css基础知识
基础知识
css：cascading style sheet。
层叠式
样式
使用符合css语法的纯文本为页面添加样式效果
Web前端三层：
结构层作用：从结构角度搭建网页（html）
样式层 作用：从美化角度书写样式（css）
行为层 作用：从交互的角度描述行为（js）
引入css的目的:为了达到结构与样式的分离
引入css的好处：
html结构代码书写量大大减少
可以提供更加丰富的效果
浏览器兼容性更好
css选择器
css包括的部分：
选择器(选择哪个标签进行样式设置)
样式规则（给标签添加什么属性）
- 样式
- 样式值
多个样式之间使用分隔号隔开
css属性是逐条排列的，有什么样式就直接写什么属性
语法如下：
选择器{
样式：样式值；
}
css的作用：可以给文字添加各种样式，给盒子添加样式用于布局
对比HTML
键值对的概念：
html的键值对：k="v"
css的键值对：k：v
冒号和分号的重要性：冒号和分号必须写
每一个属性之间必须用冒号隔开
css对空格、换行、缩进也不敏感
在书写的时候：每个属性都换行缩进，为了清晰易读
再将css文件发送到服务器之前：对代码进行压缩，删除所有的空格、换行，让代码在一行显示。文件的体积变小，这样加载速度就变快了。
css的引入方式
css也是一门标记语言，通过浏览器可以渲染
但css必须绑定HTML,来渲染结构和内容（不能单独运行）
浏览器运行的还是我们的html网页文件
引入方式有：
-
行内式
-
直接使用
- 行内式耦合性较高（并没有达到结构与样式的分离），后期维护成本较高
-
-
嵌入式
-
在head标签内，使用style标签引入css样式，解决了行内式的问题，但是还是没有做到结构与样式的完全分离
- html文档从上往下依次执行，如果嵌入的样式过多，会影响页面的加载速度
-
-
外链式
-
在head标签内，使用link标签引入外部独立的css文件
- css文件不能使用数字开头
- 达到了结构与样式的完全分离
- 通过link引入的css文件，与html文件是并行下载的
-
-
嵌入式
-
在style标签内，使用@import url（‘css路径‘）
- 但这种方式，是在html加载完成后，才加载的。会影响样式渲染的速度，常见的现象是页面加载时，先闪一下，然后正常
-
优先级
样式的几种引入方式：jiujinyuanze
这也是层叠性的体现
不同的引入方式，通过同样的选择器设置相同的样式，根据我们设置样式的距离，决定渲染的最终结果（层叠）
结果：后面的样式覆盖前面的样式
通配符选择器
css选择器用来筛选符合条件的标签
基本选择器
-
通配符（全局）选择器
用来对默认的样式进行标准化，如
*{样式：样式值；}
-
标签选择器
匹配文档中所有该类型的元素，如
标签名{样式：样式值；}
选择器：想给其添加样式的html标签名称
以标签本身作为选择器的元素。标签是什么就写什么
标签名直接书写可以选择页面上所有同种的标签，不会管我们嵌套多少层，就算嵌套的层数再多再深都能选中
用途：可以清空默认样式表，设置默认样式等
-
类选择器
匹配筛选指定类名的元素，如
.类名{样式：样式值；}
通过元素上面的class属性的值可以选中相同类名的所有标签元素
书写方式：以点开头，后面紧跟类名
优势：可以给我们想要的元素添加统一的类型，设置统一的样式
特殊运用：原子类（公用类）原子类的属性尽量的少
添加多个类名：一个class可以有多个类名，用空格隔开
类名的命名规则：必须以字母开头（严格区分大小写）可以有数字下划线和横线
id选择器一般默认都有js行为
-
id选择器
匹配筛选id值为指定元素，如
#id名{样式·：样式值；}
通过一个html的id属性选择这个元素，添加样式
注意：#后面必须紧跟id名，不能有空格
一个id名在一个html页面中只能出现一次
ID属性的命名规则：必须以字母开头（严格区分大小写），可以有数字下划线和横线，建议驼峰式
层叠性的体现：我们可以通过标签选择器和id选择器同时选择一个标签元素，给它添加不同的样式，这些样式都会在标签上面进行显示
-
高级选择器
代码规范
- 使用4个空格作为一个缩进层次
- 选择器与{之间必须包含空格
- 属性名与之后的分号：之间不允许有空格
- 分号： 与属性值之间必须包含空格
- 列表型属性值书写在单行时，“，”后必须跟一个空格
- 当一组样式包含多组选择器时，每组选择器声明必须独占一行
- 》>、+、~选择器的两边各保留一个空格
- 属性选择器中的值必须用双引号包围，文本内容必须用双引号包围
- 属性定义必须另起一行，属性定义后必须以分号结尾
继承与层叠
继承性：
在css中，有一些属性，如果给父级元素设置了，那么他的后代元素都将继承这个属性
只有文字的属性能够继承，盒子的属性不能继承
文字属性：color、font系列、line系列、text系列
盒子属性：background系列、width、height、border系列，浮动、定位
css的继承性是一个很好的语言特性
作用：可以简化css代码，有的属性可以设置给body，body内部的标签都会继承这个属性
层叠性的体现：css继承性
选择器的权值
权值：选择器的针对性越高，权值越高
权重排序：！important>行内样式>id>类|伪类|属性>标签>通配符
针对同一个元素标签，当设置了不同的选择器时，要判断权值的大小，权值越大优先级越高，基本选择器权值如下：
| 选择器 | 权值 |
|---|---|
| 继承，通配符等 | 0.1 |
| 标签选择器 | 1 |
| 类选择器，伪类，属性等 | 10 |
| id选择器 | 100 |
| 行内使用style | 1000 |
| ！important | 无穷大 |
某些浏览器下：1个类选择器=255标签选择器
1id选择器=255个类选择器
计算权重
权重：对选择器组合后的权值求和，权重越高使用样式的优先级越大
权重的计算方法：比较id、类、标签的数量，依次比较
文字与排版
盒模型
文档流
浮动
布局
背景与精灵图
定位