表现标准语言CSS3学习 入门+导入方式

如何学习：

  1. css是什么

  2. css怎么用(快速入门)

  3. css选择器（重点+难点）

  4. 美化网页（文字、阴影、超链接、列表、渐变...）

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效效果）

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）字体、颜色，边距、高度、宽度、背景图片、网页定位、网页浮动...

1.2 发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO

CSS2.1 浮动、定位

CSS3.0 圆角、阴影、动画... 浏览器兼容性

1.3 快速入门

style 注释方式为/* */

  1. 放到HTML文件内部
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <!--规范 <style> 可以编写css代码,每一个声明，最好使用分号结尾。

  语法：

      选择器{

          声明1;

          声明2;

      }

  -->

  <style>

    h1{

        color: red;

    }

  </style>

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>
  1. 与HTML分离

在html的同级目录下，建立css文件夹。

用link进行连接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <!--规范  link方式

  -->

  <link rel="stylesheet" href="css/Style.css">

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>


h1{

    color: red;

}

css的优势

  1. 内容和表现分离

  2. 网页结构表现单一，可以实现复用

  3. 样式十分丰富

  4. 建议使用独立于html的css文件

  5. 利用SEO(Search Engine Optimization)：汉译为搜索引擎优化，容易被搜索引擎收录。

1.4四种css的导入方式

表现方式，就近原则！哪个离代码近，哪个就有优势。

  1. 行内样式
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->

<h1 style = "color: red">我是标题</h1>

</body>

</html>
  1. style标签
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

      /*  注释  */

    h1{

        color: red;

    }

  </style>

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>
  1. 外部样式链接式link
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <!--规范  link方式

  -->

  <link rel="stylesheet" href="css/Style.css">

</head>

<body>

  <h1>我是标题</h1>

</body>

</html>


h1{

    color: red;

}
  1. 外部样式导入式@import 2.1中使用的。
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    @import url("css/style.css");

  </style>

</head>

<body>

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->

<h1 >我是标题</h1>

</body>

</html>

表现标准语言CSS3学习 入门+导入方式的更多相关文章

  1. Unity---动画系统学习(2)---模型3种导入方式、人形动画介绍、切割动画

    1. 介绍 Unity中导入的模型主要是由3DMAX.Maya等建模软件制作的,后缀为.fbx的文件. 博主在Unity Asset Store里面下载了一套官方免费的模型和动画. 和一套地图,分享给 ...

  2. python学习笔记：模块——自定义模块的3种导入方式

    一.定义 模块就是用一堆的代码实现了一些功能的代码的集合,通常一个或者多个函数写在一个.py文件里,而如果有些功能实现起来很复杂,那么就需要创建n个.py文件,这n个.py文件的集合就是模块.如果不懂 ...

  3. 【CSS】CSS3从入门到深入（复习查漏向

    CSS3从入门到深入(复习查漏向 pre_section CSS:层叠样式表,决定网页表现 网页为多层结构,CSS为每一层设置样式,最后显示最上一层 CSS语句 = 选择器 + 声明块 形式 内联样式 ...

  4. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

  5. 给深度学习入门者的Python快速教程 - numpy和Matplotlib篇

    始终无法有效把word排版好的粘贴过来,排版更佳版本请见知乎文章: https://zhuanlan.zhihu.com/p/24309547 实在搞不定博客园的排版,排版更佳的版本在: 给深度学习入 ...

  6. 深度学习入门实战（二）-用TensorFlow训练线性回归

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 作者 :董超 上一篇文章我们介绍了 MxNet 的安装,但 MxNet 有个缺点,那就是文档不太全,用起来可能 ...

  7. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

  8. 给深度学习入门者的Python快速教程

    给深度学习入门者的Python快速教程 基础篇 numpy和Matplotlib篇 本篇部分代码的下载地址: https://github.com/frombeijingwithlove/dlcv_f ...

  9. HTML5+CSS3从入门到精通随书光盘 ISO 镜像视频教程​

    HTML5+CSS3从入门到精通(清华社“视频大讲堂”大系)通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于权威指南.高级程序设计.开发指南同类图书 ...

  10. HTML5+CSS3从入门到精通 中文pdf版​

    HTML5+CSS3从入门到精通是通过基础知识+中小实例+综合案例的方式,讲述了用HTML5+ CSS3设计构建网站的必备知识,相对于专业指南.高级程序设计.开发指南同类图书,本书是一本适合快速入手的 ...

随机推荐

  1. iOS开发--APP性能检测方案汇总

    1 . CPU 占用率 CPU作为手机的中央处理器,可以说是手机最关键的组成部分,所有应用程序都需要它来调度运行,资源有限.所以当我们的APP因设计不当,使 CPU 持续以高负载运行,将会出现APP卡 ...

  2. Vue RSA加密

    1. 安装jsencrypt npm install jsencrypt 2. 引入jsencrypt // 全局引入 import JSEncrypt from "jsencrypt&qu ...

  3. modbus_tk Rru

    import serialimport structimport loggingimport modbus_tkimport modbus_tk.defines as cstimport modbus ...

  4. Java自增自减运算符

    3.1自增自减运算符 注意事项: ++和--既可以放在变量的后边,也可以放在变量的前边 单独实用的时候,++和--无论是放在变量的前边还是后边,结果是一样的 参与操作的时候,如果放在变量的后边,先拿变 ...

  5. Educational Codeforces Round 3 个人总结A-D

    Educational Codeforces Round 3 A. USB Flash Drives 降序排序后,贪心,甚至不会爆longlong void solve() { int n,m; ci ...

  6. springboot项目记录3用户注册界面

    九.注册-前端页面 1.在register页面中编写发送请求的方法,采用点击事件来完成.选中对应的按钮(JQuery下的)(( " 选 择 器 " ) ) , 选 中 某 一 个 ...

  7. PINNs的网络大小与过拟合

    PINNs中网络越大时,会不会产生过拟合呢 虽然PINNs可以不用到数据,但是我认为物理约束所带来的信息也是有限的 因此当网络变得很大时,也有可能产生过拟合现象吧 但是在神经元分裂那篇文章中,训练停滞 ...

  8. 自学JavaDay01

    1.Java的特性和优势 简单性 面向对象 可移植性 高性能 分布式 动态性 多线程 安全性 健壮性 2.Java三大版本 JavaSE:标准版(桌面程序,控制台开发......) JavaME:嵌入 ...

  9. c# + appium 连接设备自动化

    //private static AndroidDriver<AppiumWebElement> _driver; //private static AppiumLocalService ...

  10. vite + vue安装 注意事项

    一.要求node版本必须>12.0.0 1.node 如何升级 · 执行npm cache clean -f 清除缓冲 · npm install -g n 安装 n 模块  n模块用于管理 n ...