【CSS】样式化文字

根据MDN网站学习记录笔记

基本文本和字体样式

样式文本的 CSS 属性通常可以分为两类：

• 字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
• 文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

字体种类

p {
   
  font-family: arial;
}

只有某几个字体通常可以应用到所有系统，因此可以毫无顾忌地使用。这些都是所谓的 网页安全字体。

字体栈：包含一个font-family属性，其值由几个用逗号分离的字体名称组成。

p {
   
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

字体样式、字体粗细

字体样式
font-style: 用来打开和关闭文本 italic (斜体)。

• normal: 将文本设置为普通字体
• italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
• oblique: 将普通文本倾斜的样式应用到文本中。

字体粗细
font-weight：设置文字的粗体大小。一般用normal或者bold；
lighter, bolder: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。

文本转换、文本装饰

文本转换
text-transform: 允许你设置要转换的字体。
值包括：

• none: 防止任何转型。
• uppercase: 将所有文本转为大写。
• lowercase: 将所有文本转为小写。
• capitalize: 转换所有单词让其首字母大写。
• full-width: 将所有字形转换成全角，即固定宽度的正方形。

文本装饰
text-decoration: 设置/取消字体上的文本装饰；
值包括：
none、underline；overline；line-through

text-decoration 可以一次接受多个值

文字阴影

4 个属性如下:

1. 阴影与原始文本的水平偏移，这个值必须指定。
2. 阴影与原始文本的垂直偏移，这个值必须指定。
3. 模糊半径 - 更高的值意味着阴影分散得更广泛。
4. 阴影的基础颜色。如果没有指定，默认为 black.

text-shadow: 4px 4px 5px red;

文本布局

1. 文本对齐
   text-align 属性：
   left: 左对齐文本。right: 右对齐文本。
   center: 居中文字。justify: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。
2. 行高
   line-height 属性：可以设置一个具体的值，也可以设置一个无单位的值作为乘数（乘以font-size）
3. 字母和单词间距
   letter-spacing 和 word-spacing 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。

p::first-line {
   
  letter-spacing: 2px;
  word-spacing: 4px;
}

样式列表

列表特定样式：list-style-type、list-style-position、list-style-image 这三个属性可以在 <ul> 或 <ol> 元素上设置：

符号样式

list-style-type 允许设置项目符号点的类型，比如

ol {
   
  list-style-type: upper-roman;
}

项目符号位置

list-style-position 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
如果值设置为 inside，项目条目则位于行内

自定义项目符号图片

list-style-image 属性允许对于项目符号使用自定义图片。

ul {
   
  list-style-image: url(star.svg);
}

list-style速记：

ul {
   
  list-style: square url(example.png) inside;
}

如果同时指定了 type 和 image，如果由于某种原因导致图像无法加载，则 type 将用作回退。

管理列表计数

1. start属性允许从1之外的数字开始计数

<ol start="4">
  <li>