CSS-文本样式-MDN文档学习笔记
CSS文本样式
查看更多学习笔记：GitHub：LoveEmiliaForever
MDN中文官网
基本文字和字体样式
用于样式文本的 CSS 属性通常可以分为两类
- 字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等
- 文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐
❕包含在元素中的文本是作为一个单一的实体，你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，或使用伪元素
字体颜色
color 属性设置选中元素的前景内容的颜色 （通常指文本）
字体种类
使用font-family可以为浏览器指定一个字体或是一个字体列表
浏览器只会应用当前可用的字体，如果字体不可用，那么就会用浏览器默认字体代替
网页安全字体
只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用
这些都是所谓的网页安全字体
Web 安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的
Arial：应该要添加Helvetica作为Arial的首选替代品Courier New：某些操作系统有一个Courier New字体的替代版本叫CourierTimes New Roman：某些操作系统有一个Times New Roman字体的替代版本叫Times
默认字体
CSS 定义了 5 个常用的字体名称：serif, sans-serif, monospace, cursive, 和 fantasy
这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器
serif, sans-serif 和 monospace 是比较好预测的，默认的情况应该比较合理
cursive 和 fantasy 是不太好预测的，使用它们的时候应该稍微注意
五个名称的定义如下
| 名称 | 定义 |
|---|---|
serif |
衬线字体，即有衬线的字体 |
sans-serif |
无衬线字体 |
monospace |
等宽字体，指包含的全部字符的宽度相同的字体 |
cursive |
手写字体 |
fantasy |
装饰字体 |
字体栈
由于你无法保证你想在你的网页上使用的字体的可用性
可以提供一个字体栈，这样的话，浏览器就有多种字体可以选择了
font-family: "Trebuchet MS", Verdana, sans-serif;
浏览器会从左到右顺序查看字体的可用性，因此在最后放一个通用字体是不错的
❕ 有一些字体名称不止一个单词，比如
Trebuchet MS，那么就需要用引号包裹
字体大小
使用font-size属性指定字体大小，通常的单位是px、em、rem
元素的 font-size 属性是从该元素的父元素继承的
所以这一切都是从整个文档的开始，浏览器的 font-size 标准设置的值为 16px
字体样式、字体粗细、文本转换、文本装饰
font-style：用来打开和关闭文本 italic （斜体）normal：文本为正常字体italic：当前字体如有斜体则应用，如无则利用oblique模拟斜体oblique：模拟斜体，也就是将普通文本倾斜的样式应用
font-weight：设置文字粗体大小normal、bold：普通或者加粗的字体lighter、bolder：更细或者更粗的字体100~900：利用间隔100的数字指定字体粗细
text-transform：设置要转换的字体none：防止转型uppercase：所有文本转为大写lowercase：所有文本转为小写capitalize：让所有单词的首字母大写full-width：所有字形转为全角
text-decoration：设置字体的文本装饰none：不设置文本装饰underline：文本下划线overline：文本上划线line-through：删除线
❕
text-decoration可以一次接受多个值，如text-decoration: underline overline
并且text-decoration是一个缩写形式，它由-line、-style、-color构成
文字阴影
使用text-shadow来给文本应用阴影，它接受四个值
text-shadow: 4px 4px 5px red;
这四个值分别代表着
- 阴影的水平偏移
- 阴影的垂直偏移
- 阴影模糊半径
- 阴影基础颜色
text-shadow接受多个值（值之间以,分隔）
这样就能够给同一文本应用多个阴影
文本对齐
text-align属性用来控制文本如何与所在内容盒子对齐
left：左对齐right：右对齐center：居中justify：使文本展开，改变单词之间的差距，使所有文本行的宽度相同
行高
line-height属性设置文本每一行的高，它能够接受大多数值
但最好的方法，是设置一个无单位的数，表示行高是字体大小的多少倍
line-height: 1.5;
字母和单词间距
letter-spacing 和 word-spacing 属性允许设置文本中字母之间的间距、或是单词之间的间距
其它重要行为
text-overflow：用于确定如何提示用户存在隐藏的溢出内容clip：默认值，会隐藏溢出内容ellipsis：会把溢出的内容以...表示（它要和white-space: nowrap合用）
text-indent：定义一个块元素首行文本内容之前的缩进量（首行缩进）数值类型：可以是em也可以是5%这些数值类型
word-break：控制怎样在单词内换行normal：默认换行行为，英语单词不断，中日韩文本断行break-all：所有的都可在单词内断行keep-all：所有的都不能在单词内断行
overflow-wrap：控制怎么在文本内换行normal：只能在正常单词断点处换行anywhere：没有正常断点时，会直接换行，但考虑由单词引入的换行机会break-word：和anywhere相似，但不考虑由单词引入的换行机会
列表样式
处理列表间距
设置列表的行间距，调整样式，使其保持与周围元素相同的垂直间距
例如，将列表的字体大小统一设置、行高统一设置
特定列表样式
符号样式
使用list-style-type属性来设置项目符号点的类型
它可以接受多种多样的值，参见MDN-CSS:list-style-type
不过常见的有以下几种
none：不显示列表项的标记disc：实心圆点标记circle：空心圆点标记square：实心方块decimal：十进制阿拉伯数字
项目符号位置
使用list-style-type指定项目符号是出现在列表项内部还是外部
outside：出现在外部inside：出现在内部
自定义项目符号图片
使用list-style-image: url(图片位置)可以自定义项目符号
list-style合写
list-style: square url(example.png) inside;
管理列表计数
start：该属性能够指定列表的计数开始处reversed：让列表倒过来计数value：的属性，直接指定序数
"4" reversed>
- "2">First
- "33">Second
链接的样式化
:link：没有被访问过:visited：已经被访问过了:hover：鼠标悬停时的效果:focus：被聚焦时的效果:active：被激活时的效果
Web字体
可以在网站文件里包含字体文件，在用户访问网站时字体文件会被一起传输
如此一来就不怕字体无法应用了
@font-face {
font-family: "myFont";
src: url("myFont.ttf") format("truetype"),
url("myFont.woff") format("woff"),
url("woff2") format("woff2")
}
如上所示，有多个字体格式，因为跨浏览器兼容需要它们
免费字体网站：Font Squirre、dafont、Everything Fonts