一. CSS 属性 - 文本

1. text-decoration

设置文字的装饰线
- decoration 是装饰、装饰品的意思
有如下常见取值：
- none：无任何的装饰线
- underline：下划线
- overline：上划线
- line-through：中划线（删除线）
a 元素有下划线的本质是被浏览器默认添加了 text-decoration 属性

2. text-transform

设置文字的大小写转换
- Transform 是使变形 / 变换的意思
有几个常见的值：
- capitalize：(使…首字母大写, 资本化的意思)将每个单词的首字符变为大写
- uppercase：(大写字母)将每个单词的所有字符变为大写
- lowercase：(小写字母)将每个单词的所有字符变为小写
- none：没有任何影响
实际开发中用 JS 代码转化的更多

3. text-indent

设置第一行内容的缩进
text-indent：2em；刚好是缩进 2 个文字
- 理解 em：
  - 1em 是等同于元素自身 font-size 的大小
  - 而元素自身的 font-size 若无设置，则会继承来自父元素的 font-size
- 浏览器 font-size 一般默认是 16px

注意：
只对块级元素生效（或 float 等脱标元素）
对行内元素无效，如 a、span 等
为什么呢？
一般段落首行文字是需要缩进的，所以经常用在如 p 元素上，而 p 元素本身是个块级元素
所以 W3C 设计的时候，可能考虑到这个问题，所以制定标准实现上就对行内元素无效

4. text-align

直接翻译：设置文本的对齐方式
MDN：定义行内内容如何相对它的块父元素对齐
常用的值：
- letf：左对齐
- right：右对齐
- center：居中对齐
- justify：两端对齐
  - 如果只有一行，是不会两端对齐的，只会左对齐
  - 如果是多行，最后一行会左对齐，其余行两端对齐
  - 针对以上两种情况，如果想要两端对齐，设置 text-align-last：justify
W3C 的解释：
- 定义行内中行内级元素如何相对它的块父元素对齐，对块级元素无效
- img 元素属于行内替换元素
- 行内非替换元素(如：span、a 等)
- 行内替换元素(如：img、input等)、display值为inline-block的元素都属于行内级元素

5. letter-spacing、word-spacing

letter-spacing 设置字母之间的间距
word-spacing 设置单词之间的间距
默认是 0，可以设置负数

二. CSS 属性 - 字体

1. font-size

设置文字的大小
常用的设置方式
- 具体数值 + 单位
  - 比如 100px
  - 也可以使用 em 单位(不推荐)：1em 代表100%，2em 代表200%，0.5em 代表50%
  - 1em 是等同于元素自身 font-size 的大小，而元素自身的 font-size 如果没有设置，则会继承来自父元素的 font-size
- 百分比
  - 基于父元素的 font-size 计算，比如50%表示父元素 font-size 的一半
浏览器为了考虑用户的体验有限制文字大小的最小值，chrome 最小是 12px，低于 12px 的设置，浏览器会将计算值调整为 12px
TIP：
- 2em = 2 * 父元素的 font-size

2. font-family

设置文字的字体名称
- 可以设置一个或者多个字体名称
- 浏览器会选择列表中第一个该计算机上有安装的字体
- 或者是通过 @font-face 指定的可以直接下载的字体
为什么要设置多个字体呢？
- 网页设置的某个字体时，浏览器会去用户设备上查找是否支持或安装该字体，如果不支持或未安装，就会使用浏览器默认的字体
- 如果只设置一个的话，可能某些用户的设备不支持(或未安装)该字体，这个时候就会去使用浏览器默认的字体，所以设置多个的好处就是，即使第一个字体设备不支持，还有其余的字体供设备去匹配
淘宝使用的字体
- 语法上：Unicode 编码的或者名称多个单词带有空格的，一般都会用引号括起来

3. font-weight

设置文字的粗细
常见的取值：
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量
- normal：等于400 （ 一般文字默认 normal ）
- bold：等于700 (strong、b、h1~h6 等标签的 font-weight 默认就是bold)

4. font-style

设置文字的常规、斜体显示
- normal：常规显示
- italic(斜体)：用字体的斜体显示(通常会有专门的字体)
- oblique(倾斜)：文本倾斜显示(仅仅是让文字倾斜)
em、i、cite、address、var、dfn 等元素的 font-style 默认就是italic

5. font-variant

可以设置小写字母的显示形式
- variant 是变形的意思
可以设置的值如下
- normal：常规显示
- small-caps：将小写字母替换为缩小过的大写字母

6. line-height

设置文本的行高
- 行高可以先简单理解为一行文字所占据的高度
为什么文本需要行高?
- 方便更直观清晰的阅读
行高的严格定义是：两行文字基线 baseline 之间的间距
基线（baseline）：与小写字母 x 最底部对齐的线
为什么 line-height 等同于一行文字所占的高度？
- 因为 line-height 是两行基线之间的间距，由上图可知，两行基线之间的间距 = 一行文字所占的高度
注意区分 height 和 line-height 的区别
- height：元素的整体高度
- line-height：元素中每一行文字所占据的高度
应用实例：假设 div 中只有一行文字，如何让这行文字在 div 内部垂直居中
- 让 line-height 等同于 height
- 文字会根据 line-height 的高度来居中，文字实际区域会在其所占的高度中居中，顶部到顶线的距离等同于底线到底部的距离，二者的值等同于文字所占高度减去顶线到底线之间的距离除以 2

注意：
line-height 是可继承属性
行内非替换元素设置 line-height 无法撑起其高度，如：span
对未设置具体高度的块级元素和脱标元素可撑起其高度
如果 block 元素中没有内容，那么 line-height 继承过来也是不生效的
line-height 是针对元素内容生效的，如果没有内容，即可能不生效

4. font缩写属性

font 是一个缩写属性
- font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写
- font-style font-variant font-weight font-size/line-height font-family
规则：
- font-style、font-variant、font-weight 可以随意调换顺序，也可以省略
- /line-height 可以省略，如果不省略，必须跟在 font-size 后面
  - line-height 设置1.5或者2这类的数字，而不是具体的值时，其实设置的是等同于 font-size 值的1.5或2的倍数的数值
- font-size、font-family 不可以调换顺序，不可以省略

三. CSS选择器(selector)

开发中经常需要找到特定的网页元素进行设置样式
- 思考：如何找到特定的那个元素？
什么是 CSS 选择器
- 按照一定的规则选出符合条件的元素，为之添加 CSS 样式
选择器的种类繁多，大概可以这么归类
- 通用选择器（universal selector）
- 元素选择器（type selectors）
- 类选择器（class selectors）
- id 选择器（id selectors）
- 属性选择器（attribute selectors）
- 组合（combinators）
- 伪类（pseudo-classes）
- 伪元素（pseudo-elements）

1. 通用选择器

html

<style>
  * {
    margin: 0;
    padding: 0;
  }
</style>

所有的元素都会被选中
一般用来给所有元素作一些通用性的设置
- 比如内边距、外边距
- 比如重置一些浏览器默认的设置
对性能有消耗，尽量不要使用
- 因为通用选择器 (通配符) 设置的样式会对所有元素进行设置
- 而实际开发中，有许多元素可能没有使用，这时就会导致性能的浪费(额外开销)

2. 简单选择器

简单选择器是开发中用的最多的选择器

元素选择器（type selectors）, 使用元素的名称
类选择器（class selectors）, 使用 .类名

id 选择器（id selectors）, 使用 #id

html

<style>
  div {color: red;}
  .box {color: blue;}
  #main {color: pink;}
</style>

<div>我是用的元素选择器</div>
<div class='box'>我是用的类名选择器</div>
<div id='main'>我是用的id选择器</div>

注意：
一个 HTML 文档里面的 id 值是唯一的，不能重复
id 值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
最好不要用标签名作为 id 值
中划线又叫连字符（hyphen）

3. 属性选择器

拥有某一个属性 [attr]

属性等于某个值 [attr=val]

html

<style>
  [title] {color: blue;}
  [title=box] {color: red;}
</style>

<div title='这是一个div'></div>
<div title='box'></div>

其他的了解

[attr*=val]：属性值包含某一个值val
[attr^=val]：属性值以val开头
[attr$=val]：属性值以val结尾
[attr|=val]：属性值等于val或以val开头且后面紧跟连接符-
[attr~=val]：属性值包含val，如果有其他值必须以空格和val分割

4. 后代选择器

后代选择器一：所有的后代(直接/间接的后代)
- 选择器之间以 空格 分割
后代选择器二：直接子代选择器(必须是直接子代)
- 选择器之间以 > 分割

5. 兄弟选择器

兄弟选择器一：相邻兄弟选择器
- 使用符号 + 连接
兄弟选择器二：普遍兄弟选择器(后面的)
- 使用符号 ~ 连接

6. 选择器组

6.1 交集选择器

需要同时符合两个选择器条件(两个选择器紧密连接，第一个必须是标签选择器，第二个是类选择器或 id 选择器)
- 在开发中通常为了精准的选择某一个元素

6.2 并集选择器

符合一个选择器条件即可(两个选择器以 , 号分割)
- 在开发中通常为了给多个元素设置相同的样式

四. 认识伪类

1. 什么是伪类?

Pseudo-classes：翻译过来是伪类
伪类是选择器的一种，它用于选择处于特定状态的元素
比如我们经常会实现的：当鼠标悬浮在一个元素上时, 显示另外一个颜色

2. 伪类

动态伪类
- :link、:visited、:hover、:active、:focus
目标伪类
- :target
语言伪类
- :lang()
元素状态伪类
- :enabled、:disabled、:checked
结构伪类
- :nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()
- :first-child、:last-child、:first-of-type、:last-of-type
- :root、:only-child、:only-of-type、:empty
否定伪类
- :not()
所有的伪类: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

3.动态伪类

使用举例：
- a:link 未访问的链接
- a:visited 已访问的链接
- a:hover 鼠标挪动到链接上
- a:active 激活的链接（鼠标在链接上长按住未松开）
多个动态伪类同时使用时，须注意
- :hover 必须放在 :link 和 :visited 后面才能完全生效
- :active 必须放在 :hover 后面才能完全生效
- 所以建议的编写顺序是 :link、:visited、:hover、:active
除了 a 元素，:hover、:active 也能用在其他元素上
:focus
- :focus 指当前拥有输入焦点的元素（能接收键盘输入）
  - 文本输入框一聚焦后，背景就会变红色
- 因为链接 a 元素可以被键盘的 Tab 键选中聚焦，所以 :focus 也适用于 a 元素
动态伪类编写顺序建议为
- :link、:visited、:focus、:hover、:active
直接给 a 元素设置样式，相当于给 a 元素的所有动态伪类都设置了
相当于a:link、a:visited、a:hover、a:active、a:focus 的 color 都是red

补充：
移动端不存在 hover，需要点击才能触发

五. 伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式
伪元素默认是一个行内非替换元素，而行内非替换元素不能设置宽高
想要设置伪元素的宽高的话，修改元素特性即可
一个选择器只能使用一个伪元素，伪元素必须紧跟在语句中的简单选择器/基础选择器之后
常用的伪元素有：
- :first-line、::first-line
- :first-letter、::first-letter
- :before、::before
- :after、::after
为了区分伪元素和伪类，建议伪元素使用2个冒号，如：::first-line

1. ::first-line 和 ::first-letter

::first-line
- 对首行文本设置属性
::first-letter
- 对首字母设置属性
- 中文状态下，选中的是第一个文字

2. ::before 和 ::after

::before
- 创建一个伪元素，作为已选中元素的第一个子元素
- 在一个元素的内容之前插入其他内容（文字、图片等）
::after
- 创建一个伪元素，作为已选中元素的最后一个子元素
- 在一个元素的内容之后插入其他内容（文字、图片等）
常通过 content 属性来为一个元素添加修饰性的内容
不能省略 content 属性，省略 content 元素将会不可见
不能应用在替换元素上，如 img、br 元素

一. CSS 属性 - 文本 ​

1. text-decoration ​

2. text-transform ​

3. text-indent ​

4. text-align ​

5. letter-spacing、word-spacing ​

二. CSS 属性 - 字体 ​

1. font-size ​

2. font-family ​

3. font-weight ​

4. font-style ​

5. font-variant ​

6. line-height ​

4. font缩写属性 ​

三. CSS选择器(selector) ​

1. 通用选择器 ​

2. 简单选择器 ​

3. 属性选择器 ​

4. 后代选择器 ​

5. 兄弟选择器 ​

6. 选择器组 ​

6.1 交集选择器 ​

6.2 并集选择器 ​

四. 认识伪类 ​

1. 什么是伪类? ​

2. 伪类 ​

3.动态伪类 ​

五. 伪元素 ​

1. ::first-line 和 ::first-letter ​

2. ::before 和 ::after ​

一. CSS 属性 - 文本

1. text-decoration

2. text-transform

3. text-indent

4. text-align

5. letter-spacing、word-spacing

二. CSS 属性 - 字体

1. font-size

2. font-family

3. font-weight

4. font-style

5. font-variant

6. line-height

4. font缩写属性

三. CSS选择器(selector)

1. 通用选择器

2. 简单选择器

3. 属性选择器

4. 后代选择器

5. 兄弟选择器

6. 选择器组

6.1 交集选择器

6.2 并集选择器

四. 认识伪类

1. 什么是伪类?

2. 伪类

3.动态伪类

五. 伪元素

1. ::first-line 和 ::first-letter

2. ::before 和 ::after