CSS设计指南 笔记2
2 CSS工作原理
当元素的同一个样式属性有多种样式值的时候，CSS靠层叠机制来决定最终应用哪种样式
CSS是一种先选择HTML元素，然后设定选中元素CSS属性的机制
CSS选择符和要应用的样式构成了一条CSS规则
2.1 剖析CSS规则
规则是一条完整的CSS指令，声明了要修改的元素和要应用给该元素的样式
为文档添加样式的三种方式
-
行内样式
-
写在元素标签里
-
作用范围有限：只能影响所在的标签
-
总会覆盖嵌入样式和链接样式
<p>default </p><p sylte="font-size: 12px; font-weight: bold">use inline CSS styling </p>
-
-
嵌入样式
-
写在
<style>标签里 -
嵌入的CSS样式放在HTML文档的head元素中
-
应用范围仅限于当前页面，会覆盖外部样式表中的样式
<head><style type="text/css">h1 {font-size: 12px;}p {color: blue;}</style> </head>
-
-
链接样式
-
写在单独的CSS样式表（扩展名为.css的文本文件）中
-
可以在任意多个HTML页面中链接同一个样式表文件
<link href="styles.css" rel="stylesheet" type="text/css" />
-
-
@import指令：在样式表中链接其他样式表
-
@import指令必须出现在样式表中其他样式之前，否则不会被加载
@import url(css/styles2.css)
-
CSS规则命名惯例
CSS规则由选择符和声明两部分组成
- 选择符：指出规则所要选择的元素
- 声明：
- 属性：样式
- 值：属性的一个新状态
扩展
-
多个声明包含在一条规则里
-
多个选择符组合在一起
-
多条规则应用给一个选择符
选择符分类
- 上下文选择符：基于祖先或同胞元素选择一个元素
- ID和类选择符：基于id和class属性的值选择元素
- 属性选择符：基于属性的有无和特征选择元素
2.2 上下文选择符
后代组合式选择符（descendant combinator selector）
- 一组以空格分隔的标签名
- 用于选择作为指定祖先元素后代的标签
标签1 标签2 {声明}
标签2是想要选择的目标
只有在标签1是其祖先元素（不一定是父元素）的情况下才会选中
2.3 特殊的上下文选择符
2.3.1 子选择符 >
标签1 > 标签2
标签2必须是标签1的子元素
2.3.2 紧邻同胞选择符 +
标签1 + 标签2
标签2必须紧跟在其同胞标签1的后面
2.3.3 一般同胞选择符 ~
标签1 ~ 标签2
标签2必须跟（不一定紧跟）在其同胞标签1的后面
2.3.4 通用选择符 *
通用选择符*是一个通配符，匹配任何元素
一般在使用时会同时使用另一个选择符
非子选择符
section * a {font-size: 1.3em;}
任何时section孙子元素，而非子元素的a都会被选中；a的父元素是什么，没有关系
2.4 ID和类选择符
可以不用考虑文档的层次结构，只要为元素添加id和class属性
2.4.1 类属性
HTML元素的class属性
-
类选择符
.类名 -
标签带类选择符
-
把标签名和类选择符写在一起
-
p.classname {color: red;}
-
-
多类选择符
-
.class1.class2 {font-size: 120%;} -
两个类名之间没有空格：只想选择同时具有这两个类名的元素，而不是“祖先/后代”关系
-
2.4.2 ID属性
#specialId {CSS样式声明}
- ID可以用在页内导航链接中
2.4.3 什么时候用ID，什么时候用类
- 什么时候用ID
- ID在页面中唯一地标识一个元素，可以在CSS中方便地定位到这个元素及其子元素
- 什么时候用类
- 类是薇洛标识一组具有相同特征的元素
不要乱用类
- 避免“类泛滥——标记中的麻疹”
- 不要像使用ID一样，每个类都指定一个不同的类名，然后再为每个类编写规则
- 继承和上下文选择符能让不同的标签共享样式，降低需要编写和维护的CSS量
2.5 属性选择符
2.5.1 属性名选择符
标签名[属性名]
选择任何带有属性名的标签名
2.5.2 属性值选择符
标签名[属性名="属性值"]
选中任何带有值为属性值的属性名的标签名
在HTML5中，属性值的引号可加，可不加
2.6 伪类
使用CSS在某些事件发生时，改变某些元素的样式
与类相似，但实际上并没有类会附加到标记中的标签上
- UI（User Interface，用户界面）伪类
- 在HTML元素处于某个状态时为该元素应用CSS样式
- 结构化伪类
- 在标记中存在某种结构时的关系时为相应元素应用CSS样式
:：标识伪类
::：标识CSS3新增的伪元素
2.6.1 UI伪类
基于特定HTML元素的状态应用样式
-
链接伪类
-
针对链接的伪类
链接状态 伪类选择器 Link a:link 等待点击 Visited a:visited 已点击过 Hover a:hover 鼠标悬停 Active a:active 正在点击（鼠标按下，还未释放）
-
-
:focus伪类
- 表单中的文本字段在用户单击时会获得焦点，然后用户才能输入字符
-
:target伪类
- 如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标，可以用:target伪类选中它
2.6.2 结构化伪类
根据标记的结构应用样式
-
:first-child 和 :last-child
-
:nth-child
e:nth-child(n)- n表示一个数值（也可以用odd或者even）
- 最常用于提高表格的可读性
2.7 伪元素
文档中若有实无的元素
- ::first-letter伪元素
- 首字符
- ::first-line伪元素
- 可以选中文本段落的第一行
- ::before 和 ::after伪元素
- 可以在特定元素前面或后面添加特殊内容
- 搜索引擎不会取得伪元素的信息（因为它在标记中并不存在），不要通过伪元素添加想让搜索引擎索引的重要内容
2.8 继承
CSS中很多属性可以继承，相当一部分和文本有关（颜色、字体、字号）；很多属性不能继承，主要涉及元素盒子的定位和显示方式（边框、外边距、内边距）
2.9 层叠
一种样式在文档层次中逐层叠加的过程，目的是让浏览器面对某个标签特定属性值的多个来源，决定最终使用哪个值
层叠时CSS的核心机制
2.9.1 样式来源
- 浏览器默认样式表
- 用户样式表
- 作者样式表
- 链接样式、嵌入样式、行内样式
层叠顺序：
- 浏览器默认样式表
- 用户样式表
- 作者链接样式表（按照它们链接到页面的先后顺序）
- 作者嵌入样式
- 作者行内样式
浏览器按照上述顺序依次检查每个来源的样式，并在有定义的情况下更新对每个标签属性值的设定
2.9.2 层叠规则
-
找到应用给每个元素和属性的所有声明
- 浏览器在加载页面时，会据此查到每一条CSS规则，表示出所有受到影响的HTML元素
-
按照顺序和权重排序
- 浏览器依次检查5个来源，并设定匹配的属性
- 如果匹配的属性在下一个来源也有定义，则更新该属性的值
- 声明也可以有权重
!important- 会让其他设定不起作用
-
按特指度排序
- 特指度（specificity）表示一条规则有多名去
- 类名选择符比普通的选择符具有更高的特指度
- 一条规则的特指度由它的选择符中包含多少标签、类名和ID决定
- ICE公式：
I - C - E- 选择符中有一个ID，I+1
- 选择符中有一个类，C+1
- 选择符中有一个元素（标签）名，E+1
-
顺序决定权重
- 如果两条规则都英雄某元素的同一个属性，而且它们的特指度也相同，则位置最靠下（或后声明）的规则胜出
2.10 规则声明
一个声明包含两个部分：属性和值
CSS属性主要分为三类：文本中，数字值和颜色值
2.10.1 文本值
所有CSS属性都有文本值
2.10.2 数字值
用于描述元素的各种长度
-
绝对值
绝对值 单位缩写 英寸 in 厘米 cm 毫米 mm 点 pt 皮卡 pc 像素 px -
相对值
相对值 单位缩写 Em em Ex ex 百分比 % - em和ex都是字体大小的单位，但在CSS中作为长度单位适用于任何元素
- em：表示一种字体中字母M的宽度，具体大小取决于使用的字体
- ex：等于给定字体中字母x的高度
- 百分比：适合设定被包含元素的宽度，可以随着用户调整浏览器窗口大小而成比例地伸缩
2.10.3 颜色值
- 颜色名
- 十六进制颜色
- #RRGGBB 或 #RGB
- RGB颜色值
- (R, G, B)
- RGB百分比值
- (R%, G%, B%)
- HSL（色相，饱和度%，亮度%）
HSL(0, 0%, 0%)- 色相：一个事记的颜色，以色轮上的度数表示
- 饱和度：设定有多少颜色
- 亮度：设定颜色的明暗
- Alpha通道、
- 设置颜色的不透明度
- RGB和HSL都支持Alpha通道
- 可以是1（完全不透明），可以是0（完全透明），或者介于1和0之间的小数值
