排版 - CSS 参考

#color

定义文本的颜色。

color: transparent;

将透明颜色应用于文本。文本仍将占据其应有的空间。

color: red;

您可以使用140 多个颜色名称。

color: #05ffb0;

您可以使用十六进制颜色代码。

color: rgb(50, 115, 220);

您可以使用rgb() 颜色代码

第一个值表示red
第二个值表示green
第三个值表示blue

它们每个都可以取值在0到255之间。

color: rgba(0, 0, 0, 0.5);

您可以使用rgba() 颜色代码

前 3 个值表示rgb
第 4 个值表示alpha 通道，并定义颜色的不透明度

alpha 值可以在零0（透明）到一1（不透明）之间。

color: hsl(14, 100%, 53%);

您可以使用hsl() 颜色代码

第一个值表示hue，可以取值在0到359之间
第二个值表示saturation，可以取值在0%到100%之间
第三个值表示luminosity，可以取值在0%到100%之间

color: hsla(14, 100%, 53%, 0.6);

您可以使用hsl()a 颜色代码

前 3 个值表示hsl
第 4 个值表示alpha 通道，并定义颜色的不透明度

alpha 值可以在零0（透明）到一1（不透明）之间。

#font-family

font-family: "Source Sans Pro", "Arial", sans-serif;

当使用多个值时，font-family 的字体系列列表定义了浏览器选择字体系列的优先级。

浏览器将在用户计算机上的任何@font-face 资源中查找每个字体系列。

列表从左到右排序：如果可用，它将使用第一个值，否则将转到下一个值，直到列表末尾。默认字体系列由浏览器首选项定义。

在此示例中，浏览器将尝试使用Source Sans Pro（如果可用）。如果找不到它，它将尝试使用Arial。如果它也不可用，它将使用浏览器的sans-serif 字体。

font-family: serif;

浏览器将使用衬线字体系列：所有字符都有笔划末端。

font-family: sans-serif;

浏览器将使用无衬线字体系列：没有字符有笔划末端。

font-family: monospace;

浏览器将使用等宽字体系列：所有字符都具有相同的宽度。

font-family: cursive;

浏览器将使用草书字体系列。

font-family: fantasy;

浏览器将使用奇幻字体系列。

#font-size

定义文本的大小。

默认 font-size: medium;

文本将使用浏览器的默认中等大小。

font-size: 20px;

您可以使用像素值。

font-size: 1.2em;

您可以使用em 值。

该值相对于父级的font-size。
因此，如果在子元素上使用，该值将级联。

font-size: 1.2rem;

您可以使用rem 值。

该值相对于根元素的font-size，即<html> 元素。
因此，该值将不会根据元素在 HTML 层次结构中的深度而变化，并将保持上下文无关。

font-size: 90%;

您可以使用百分比值。它们的行为类似于 em 值。

该值相对于父级的font-size。
因此，如果在子元素上使用，该值将级联。

font-size: smaller;

您可以使用相对关键字。该值相对于父级。

以下是可用的

larger
smaller

font-size: x-large;

您可以使用绝对关键字。该值相对于根元素<html>。

以下是可用的

xx-small
x-small
small
medium
large
x-large
xx-large

#font-style

定义文本倾斜的程度。

默认 font-style: normal;

文本不倾斜。

font-style: italic;

使用字体的斜体版本：字母略微倾斜。

font-style: oblique;

使用 **斜体** 版本的字体：字母比斜体更倾斜。

#font-variant

定义每个字母使用哪个字形。

default font-variant: normal;

每个字母使用其 **正常** 字形。

font-variant: small-caps;

每个字母使用其 **小写大写** 版本。

#font-weight

定义文本的粗细。

default font-weight: normal;

文本为 **正常** 粗细。

font-weight: bold;

文本变为 **粗体**。

font-weight: 600;

您可以使用 **数值**。它们都对应于特定的 **命名粗细**

**100** 极细
**200** 特细
**300** 细
**400** 正常
**500** 中等
**600** 半粗体
**700** 粗体
**800** 特粗体
**900** 超粗体

如果字体系列不提供请求的粗细，它将使用最接近的可用粗细。

font-weight: lighter;

您可以使用 **相对** 关键字：lighter 或 bolder。浏览器将使用下一个可用的粗细。

#font

用于 font-style font-variant font-weight font-size line-height 和 font-family 的速记属性。

#letter-spacing

定义一段文本中字符之间的间距。

default letter-spacing: normal;

字符之间的间距为 **正常**。

letter-spacing: 2px;

您可以使用像素值。

letter-spacing: 0.1em;

您可以使用 **em** 值：这允许间距相对于字体大小保持 *相对*。

#line-height

定义单行文本的高度。

default line-height: normal;

恢复到浏览器的 **默认** 值。

recommended line-height: 1.6;

您可以使用 **无单位** 值：行高将相对于字体大小。

line-height: 30px;

您可以使用像素值。

line-height: 0.8em;

您可以使用 **em** 值：与无单位值一样，行高将相对于字体大小。

#text-align

定义元素的文本内容如何水平对齐。

text-align: left;

文本内容对齐到 **左侧**。

text-align: right;

文本内容对齐到 **右侧**。

text-align: center;

文本内容 **居中**。

text-align: justify;

文本内容 **两端对齐**。

#text-decoration

定义元素的文本内容如何装饰。

default text-decoration: none;

删除任何文本装饰。

text-decoration: underline;

在文本内容下方加下划线。

#text-indent

定义元素第一行文本的缩进。

default text-indent: 0;

文本 **不** 缩进。

text-indent: 40px;

您可以使用 **数值**，如 **像素**、**(r)em**、**百分比** 等。

请注意，只有 *第一行* 被缩进。

text-indent: -2em;

您也可以使用 **负** 值。

#text-overflow

定义隐藏的文本内容在溢出时如何表现。

default text-overflow: clip;

文本内容被 **裁剪**，无法访问。

text-overflow: ellipsis;

溢出的内容被 **省略号** 替换：…

#text-shadow

定义文本内容的阴影。

default text-shadow: none;

文本内容 **没有阴影**。

text-shadow: 2px 6px;

您至少需要 **两个值**

第一个是 *水平* 偏移量
第二个是 *垂直* 偏移量

阴影颜色将从文本颜色继承。

text-shadow: 2px 6px red;

您可以将 **颜色** 定义为 *最后一个* 值。

与 color 一样，您可以使用颜色名称、十六进制、rgb、hsl 等。

text-shadow: 2px 4px 10px red;

可选的 **第三个值** 定义了阴影的 **模糊度**。

在此示例中，颜色将在 10 像素内扩散，从不透明到透明。

#text-transform

定义文本内容应如何转换。

default text-transform: none;

删除任何文本转换：文本将与 HTML 代码中显示的一样。

text-transform: capitalize;

将每个单词的 **第一个字母** 转换为 **大写** 字母。

text-transform: uppercase;

将所有字母转换为大写字母。

text-transform: lowercase;

将所有字母转换为小写字母。

#white-space

定义元素的空白如何处理。

default white-space: normal;

空格序列合并为一个。
换行符被忽略。
文本内容被换行。

white-space: nowrap;

空格序列合并为一个。
换行符被忽略。
文本内容不会被换行，并保持在单行上。

white-space: pre;

空白被完全保留。

空格序列被保留
行仅在新行和<br>处换行

white-space: pre-wrap;

空白被大部分保留。

空格序列被保留
行在新行、<br>处换行，当到达元素的末尾时也会换行

white-space: pre-line;

仅保留新行。

空格序列被合并为一个
行在新行、<br>处换行，当到达元素的末尾时也会换行

#word-break

定义单词在到达行尾时如何换行。

default word-break: normal;

没有空格的单词不会换行。不间断字符序列将显示在单行上。

word-break: break-all;

没有空格的单词在到达行尾时会换行。

#word-spacing

定义文本块中单词之间的间距。

default word-spacing: normal;

字符之间的间距为 **正常**。

word-spacing: 5px;

您可以使用像素值。

word-spacing: 2em;

您可以使用 **em** 值：这允许间距相对于字体大小保持 *相对*。