发现有关 CSS 的详细信息

已完成

让我们探索更多方法来让 CSS 能够简化内容管理以及让内容对读者而言更具有吸引力。

注释

与任何计算机语言一样,CSS 支持注释。 若要在 CSS 的某个部分添加注释,请使用 /* comment *//* 标识注释的开头,*/ 标记结尾。 CSS 注释可以涵盖多行文本。 注释是为自己或其他开发人员留下笔记或在学习语言时做笔记的好方法。

重要

CSS 注释是公开的,可供浏览器和网站用户访问。 请勿在注释中存储敏感信息。

CSS 注释的格式与 HTML 注释不同。 HTML 中的注释使用 <!--comment--> 语法。

设置字体

可以使用 CSS 告诉浏览器要对特定文本使用的字体。 有时你想要使用 Arial 字体来提高可读性,或使用更花哨的字体来展现风格。 在下图中,一些文本使用的是 Arial 字体,其他文本使用的是名为“Impact”的字体。

浏览器以两种字体呈现的 H T M L 文本的屏幕截图。

用于设置在页面上使用的字体的最常见选项是 font-familyfont-family 通常设置为字体列表,允许浏览器使用它所支持的列出的第一种字体。 例如,尝试使用 Tahoma 的设置 Tahoma, Verdana, sans-serif ,然后是 Verdana,最后是通用的无衬线字体。

还可以使用其他选项,例如样式、粗细和效果。 font-style 用于通过将值设置为 italic 来将文本设置为斜体。 font-weight 支持不同的粗体设置,其中最常见的是 bold。 最后,text-decoration 用于对文本执行以下操作:underlineoverlineline-through

CSS 结果
font-weight: bold; 演示
font-style: italic; 演示
text-decoration: line-through; 演示

text-decoration 不同于用于修改字体显示的其他选项。 主要区别在于,text-decoration 用于在文本周围或文本之上应用样式,但不会修改实际字体本身。 粗体和斜体会修改字体。

注意

通常应避免在网页上使用下划线,因为文本可能看起来像超链接。

调整字体大小

使用 font-size 可指定你想要使用的字号。 CSS 提供使用绝对大小或相对大小的功能。 绝对大小通常以像素为单位设置,并始终使用指定的大小。 相对大小可以基于浏览器的默认大小并以百分比进行度量,也可以基于参考元素的大小。

注意

许多浏览器的默认字号为 16 像素。

绝对大小可以采用像素作为度量单位,并在 CSS 中使用 px 进行指定。 若要将字体设置为 14 像素,可以使用指令 font-size: 14px;

字体的相对大小通常使用 emrem 进行度量。 em 是元素的缩写,相对于父 (em) 或根 (rem) 元素。 根是 html 元素。 1em1rem 等于父元素或根元素的大小,而 2em2em 是父元素或根元素的大小的两倍。 由于屏幕大小可能会有所不同,因此通常情况下,最好尽可能使用相对大小。

以下面的 HTML 和 CSS 为例:

<html>
    <body>  
        <div>Sample text</div>
    </body>
</html>
html {
    font-size: 18px;
}
div {
    font-size: 14px;
}

div如果元素为 14 像素,因为父元素1emdiv 和 设置为 14px,而1rem为 18 像素,html因为根设置为 18px

1.5em 元素的 div 将为 21 像素 (14 * 1.5 = 21),并且 将为 27 像素 (18 * 1.5 = 27)。 可以使用 emrem 来确保页面的其余部分在更新父元素或根元素大小时进行缩放。

颜色

可以使用 color 属性设置字体颜色。 可以将 color 设置为 RGB(红色、绿色、蓝色)值,或设置为多个已命名颜色之一(如 blacklightgray)。

CSS 中的 RGB 值可以是带有前缀 # 的十六进制值,也可以是 rgb 函数中的值(0 到 255)。 若要将颜色设置为默认的棕色,请使用 color: brown;。 若要使用自定义深浅的紫色,可以使用 color: #7462e0

/* named value */
div {
    color: brown;
}

/* RGB hex value */
h1 {
    color: #7462e0;
}

/* RGB function */
h2 {
    color: rgb(105, 6, 19);
}

重要

颜色选择应始终考虑那些患有色觉缺陷的人群。 可以使用 Color Safe 之类的工具来帮助选择对比色,以确保所有用户都可以访问你的网站。

正如你可能猜想的那样,有几十种可用的已命名颜色,RGB 值提供了一组无限数量的选项。 vscode.devVisual Studio Code 等编辑器可帮助确定可用的颜色值。 这两个编辑器都会在 CSS 中显示色板预览。 如果将鼠标悬停在色板上,则会显示一个颜色选择器,您可以使用它来设置所需的颜色。

Visual Studio Code 中的颜色选择器的屏幕截图。