这是我参与「第五届青训营」伴学笔记创作活动的第 2 天。
CSS用来定义页面元素样式。e.g.设置字体颜色、位置大小、动画效果。
CSS由多条规则构成，每条规则样式如下：
h1 {
color: white;
font-size: 14px;
}
大括号中每一条为一条声明，由属性和对应的值构成。由声明和选择器构成一条规则。
使用CSS方式：通过 link 标签外链css文件、通过 style 标签嵌入、 通过 style 属性内联。
推荐用link方式外链，因为利于html和css分工，内容和样式分离。组件式开发时可能会将css、html、js放在同一个文件中，此时关注点分离，一般用style标签。不太推荐大量使用内联样式。
选择器
常见选择器种类：
| 选择器类型 | 用法 |
|---|---|
| 元素选择器 | 直接使用元素名 e.g. div {} |
| ID选择器 | 定位带有id属性的页面上唯一的元素 格式为id名前面加 # |
| 类选择器 | 格式为类名前加 . |
| 通配选择器 | * 选择器可以与任何元素匹配 |
| 属性选择器 | 用 [] 将元素属性名框起来 e.g.[class="second"] |
属性选择器中， = 连接表示属性值完全匹配不多不少， ~= 表明根据包含的部分属性值选择。 ^= 表明属性值以后面的值开头，e.g. class^="se" 选择class整个值以se开头的元素。$= 表明属性值以后面值结尾， *= 表明属性值包含后面的字符串。|= 表明选择属性值等于或以后面值开头的所有元素。一般用于匹配语言，e.g. lang|="en" 。
伪类：用于对元素的不同状态作样式上的区分，如访问过和未访问的链接。格式e.g.:link
选择器组合方式如下：
| 名称 | 说明 |
|---|---|
| 直接组合 | AB 满足A同时满足B |
| 后代组合 | A B 选中B，如果它是A后代 |
| 亲子组合 | A>B 选中B，如果它是A直接子元素 |
| 兄弟选择器 | A~B 选中B，如果它在A后且和A同级 |
| 相邻兄弟选择器 | A+B 选中B，如果它紧跟在A后 |
| 选择器组 | A,B 同时对选择器A和B应用样式 |
color 颜色属性
通常用color属性指定元素的颜色。 css中最常用RGB模型表示颜色。缺点是无法与部分颜色特征直接关联，难以直观判读。另一种HSL模型更为直观，由hue色相（色彩基本属性，取值0-360的色轮）、saturation饱和度、lightness亮度构成，方便通过SL属性判断亮暗和鲜艳程度，也方便实现按钮点击提亮等需要改变颜色的功能。
颜色的另一个通道alpha表示颜色的“不透明度”，alpha为1时完全不透明。 通常写rgba(255,255,0,1)时第四个值表示alpha通道。
字体属性
-
font-family属性：字体族，可以指定多个逗号分隔的字体，从前到后依次由浏览器匹配选择，从而防止跨平台出问题。
-
通用字体族：serif衬线体、sans-serif无衬线体、cursive楷体之类手写体、fantasy类似papyrus一类艺术字、monospace等宽字体。 指定好通用字体族可以防止指定的字体族都找不到的时候默认字体风格偏差太大。
描述字体族时先英文后中文，字体渲染时依次找，如中文字体在前英文也会从该字体中找字符。 也可将字体文件放在服务器上，使用web-font写法，让浏览器去服务器查找字体文件进行渲染。
通过font-size属性指定文字大小。em是某种相对大小，1em的值为父元素的字体大小。如body中字体16px时，body下的元素2em为32px。
font-style属性可以指定文字的效果，如加粗/斜体等。font-weight可以指定字重，值域为100-900。
line-height为行高属性，为两行文字的基准线之间的距离。html默认的行高非常不适合阅读，排版多段文字时需要调整。用无单位数字描述行高时，表示行高为字体大小的多少倍。如行高为1.6表示为字体大小的1.6倍率。
选择器生效条件
同一元素匹配上多个选择器时，特异度更高的选择器优先级会更高。特异度由选择器包含的不同类型选择器数目决定，优先级为id>类>标签选择器数目。
某些元素会自动继承父元素计算值，除非显式指定一个值。css中和文字相关的可继承，但盒模型有关的不可继承，如宽度。可以通过inherit属性强制显式继承父元素属性。规范中规定好了每个元素的初始值。
