一、文本属性
1.text-align
作用：text-align:设置行内元素（img元素）或者单元格框的行内内容（文字信息）的水平对齐。对块级元素无效。
属性值：left，right，center，justify(两端对齐，最后一行默认靠左)
2.text-align-last
作用：指定一行或者块中的最后一行在被强制换行之前的对齐规则。
属性值：left，right，center，justify
3.# text-decoration
作用：设置文本上的装饰性线条的外观。
MDN文档：developer.mozilla.org/zh-CN/docs/…
4.# letter-spacing/word-spacing
作用：设置文字字符间距/设置单词间距
MDN文档①：developer.mozilla.org/zh-CN/docs/…
MDN文档②：developer.mozilla.org/zh-CN/docs/…
二、字体属性(可继承)
1.font-size
作用：设置字体大小。
常设属性值：①具体数值+单位，如16px;②百分比：基于父元素的font-size计算，比如50%表示等于父元素font-size的一半。
2.font-weight(字体大小)
作用：设置字体粗细。
常设属性值：normal(400)、bold(700)
3.font-family(字体系列)
作用：设置字体系列，往往只需要设置一次即可。
4.font-style(字体样式)
作用：设置字体样式。
常设属性值：normal、italic(斜体-按字体系列设计)、obliqu(斜体/倾斜)
4.font-style(字体变形)
作用：设置字体变形。
常设属性值：small-caps(除首字母外的小写字母变大写字母，但格式是小写字母的格式)
MDN文档：developer.mozilla.org/zh-CN/docs/…
5.line-height
作用：设置行高，行高指的是两行文本基线之间的距离。
常设属性值：【单行文本】行高设置跟所在盒子的高度一致，可实现垂直居中。
MDN文档：developer.mozilla.org/zh-CN/docs/…
三、CSS选择器
1.通配选择器
示例：*{}
作用：匹配全部元素，但效率比较低，不推荐使用。
2.简单选择器（元素选择器、类选择器、id选择器）
示例：元素名{} 、.类名{} 、#id{}
作用：选择特定的元素。
3.属性选择器
类型示例：[元素attr]{} 、[元素attr=值]{}
作用：选择具有该元素attr的元素。
拓展：
[attr*=val]:属性值包含某一个值val;
[attr^=val]:属性值以val开头;
[attr$=val]:属性值以val结尾;
[attr|=val]:属性值等于val或者以val开头后面紧跟连接符-;
[attr~=val]:属性值包含val,如果有其他值必须以空格和val进行分割;
4.后代选择器
类型示例：①所有后代（直接/间接的后代）:选择器之间以空格分隔 .box span{} ②直接子代选择器（必须直接子代）:选择器之间以>分隔 .box > span{}
5.兄弟选择器
类型示例：①:相邻兄弟选择器 .box + div{} ②普遍兄弟选择器 .box ~ div{}
6.交集选择器
示例：选择器之间紧挨着div.one{}
作用说明：更精确地选择某个元素。
7.并集选择器
示例：选择器之间以,分隔body,div,span,h1,p{}
作用说明：大范围选择多个元素设置相同的样式。
8.伪类选择器
作用说明：选择特定状态的元素。
常见伪类：
①动态伪类:hover,:link,:visited,:active。
以a元素为例：
a:link 未访问的链接
a:visited 已访问的链接
a:focus:元素tab聚焦
a:hover 鼠标挪动到链接上(重点)
a:active 激活的链接(鼠标在链接上长按住未松开)
△使用顺序：
1.:hover 必须放在:link和:visited后面才能完全生效
2.:active 必须放在:hover后面才能完全生效
3.建议顺序:link、visited、（focus）、hover、active
除了a元素，:hover、:active也可以适用于其他元素。
②元素状态伪类：input元素:enabled,:disabled,:checked
③结构伪类：:root
9.伪元素
9.1 常用
::before,::after,::nth-child(),::first-child,::last-child,::first-line,::first-letter
9.2 注意事项
::before,::after常需要搭配content属性，即使无文本内容。display一般设置"inline-block"，因为伪元素默认为行内元素，得转换为行内块元素才可设置宽高，需要调整位置，一般配合使用position定位微调。
9.3 开发场景
①批量增加各种图标/提示语。②清除浮动副作用。
四、字体系列
4.1 网络字体
4.1.1 使用过程
1.下载字体文件，常见文件格式为.ttf,otf,woff
2.引入字体文件（@font-size）
3.使用字体
4.兼容性写法
兼容ie的eot字体，需要单独写一个src。
参考资料
- W3C官方网址（概念）：www.w3.org/TR/?filter-…
- MDN文档（api属性）：developer.mozilla.org/zh-CN/docs/…
- 查询CSS属性是否可用：caniuse.com
- 代码生成器:html-css-js.com/css/generat…
- boreder生成图形:css-tricks.com/the-shapes-…
- 字体：www.fonts.net.cn/fonts-zh-1.…
- 精灵图获取尺寸：www.spritecow.com/
