本文章记于2021.04.22
1.伪元素
::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)
2.属性
color
font-family
font-size，元素的 font-size 属性是从该元素的父元素继承的
font-style
font-weight
text-transform
text-decoration
text-shadow
text-align:left,right,center,justify
line-height，设置文本每行之间的高，无单位的值乘以 font-size来获得 line-height
letter-space
word-space
text-transform相关取值：
none: 防止任何转型
uppercase: 将所有文本转为大写
lowercase: 将所有文本转为小写
capitalize: 转换所有单词让其首字母大写
full-width: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐
text-decoration取值：
注意text-decoration 是一个缩写形式，它由text-decoration-line, text-decoration-style和 text-decoration-color构成
none: 取消已经存在的任何文本装饰
underline: 文本下划线
overline: 文本上划线
line-through: 穿过文本的线 strikethrough over the text
text-shadow
text-shadow: 4px 4px 5px red;
四个属性如下:
1). 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的，这个值必须指定
2). 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，向上/向下移动阴影，必须指定
3). 模糊半径 - 更高的值意味着阴影分散得更广泛
如果不包含此值，则默认为0，没有模糊
可以使用大多数的 CSS 单位 length and size units
4). 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 `black`
通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本
text-shadow: -1px -1px 1px #aaa,
0px 4px 1px rgba(0,0,0,0.5),
4px 4px 5px rgba(0,0,0,0.7),
0px 0px 7px rgba(0,0,0,0.4);
font其他属性
文本布局
说到字体可用性，只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用
3.font简写
font-style,font-variant,font-weight,font-stretch,font-size,line-height,font-family
使用 font 的简写形式，在所有这些属性中，只有 font-size 和 font-family 是一定要指定的
font-size和line-height属性之间必须放一个正斜杠
font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
4.样式化列表
列表默认值
* `<ul>`和 `<ol>`元素设置`margin`的顶部和底部: 16px(1em) 0;和 `padding-left: 40px(2.5em)`; （在这里注意的是浏览器默认字体大小为16px）
* `<li>` 默认是没有设置间距的
* `<dl>`元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定
* `<dd>`元素设置为： `margin-left` `40px` (`2.5em`)
* 在参考中提到的 `<p>`元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同
列表具有的特定属性：
-
list-style-type：设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字，由于某种原因导致图像无法加载，则 type 将用作回退 -
list-style-position：设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外 -
list-style-image：允许为项目符号使用自定义图片，而不是简单的方形或圆形
（1）start属性允许从1 以外的数字开始计数，<ol start="4">//4 5 6 7
（2）reversed属性将启动列表倒计数，<ol start="4" reversed>//4 3 2 1
（3）value属性允许设置列表项指定数值，示例如下:
<ol>
<li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
<li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
<li value="6">Wash and chop the salad.</li>
<li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
</ol>
CSS计数器提供用于自定义列表计数和样式的高级工具，但它们相当复杂
@counter-stylecounter-incrementcounter-reset
5.样式化链接
记忆方法：LoVe Fears HAte.
-
Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用
:link伪类来应用样式 -
Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用:visited伪类来应用样式 -
Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用:hover伪类来应用样式 -
Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab 移动到这个链接的时候，或者使用编程的方法来选中这个链接HTMLElement.focus()它可以使用:focus伪类来应用样式 -
Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用:active伪类来应用样式
链接中包含图标：a[href*="http"]，background属性url添加图片
6.web字体（Web字体作为一种技术从 Internet Explorer 4 开始就得到了的支持）
@font-face {
font-family: "myFont";
src: url("myFont.ttf");
}
大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器
字体一般都不能自由使用
必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在站点上)提供字体创建者
不应该在没有适当的授权的情况下偷窃字体
- 免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)
比如： Font Squirre，dafont 和 Everything Fonts - 收费的字体经销商：这是一个收费则字体可用的网站，例如fonts.com或myfonts.com
也可以直接从字体铸造厂中购买字体，例如Linotype，Monotype或 Exljbris - 在线字体服务：这是一个存储和为提供字体的网站，它使整个过程更容易
