CSS

虽然 HTML 是每个网页的基础结构，但它本身的视觉效果往往不够美观。层叠样式表（CSS，Cascading Style Sheets） 是一种网页开发者用来美化网页 HTML 内容的语言。

如果你想要修改 颜色、字体类型、字体大小、图片、元素定位 等内容，CSS 就是你的最佳工具！

在本节课中，你将学习如何设置 CSS 文件结构 ，并选择 HTML 元素进行样式化。

起步和语法

CSS结构解析

上图展示了编写css代码的两种方式，一种是规则集，一种是内联样式

无论是哪种方法，它们都具有相同的基本结构 。请注意，两种语法都包含"声明（Declaration）" 。声明是 CSS 的核心，它用于给选定的元素应用样式 。在示例中，<p> 元素被选中，并被设置为蓝色文本。

理解"声明用于给选定元素应用样式"是学习如何使用 CSS 美化 HTML 文档的关键！以下术语解释了右侧示例图中的各个部分。

规则集（Ruleset）术语

选择器（Selector） ------ 规则集的起始部分，用于选中需要设置样式的 HTML 元素。
声明块（Declaration Block） ------ 大括号 {} 内的代码，包含一个或多个 CSS 声明。
声明（Declaration） ------ 由"属性 + 值"组成，用于给选中的元素应用样式。
属性（Property） ------ 声明中的第一部分 ，表示需要修改的视觉特征（如颜色、字体等）。
值（Value） ------ 声明中的第二部分 ，表示属性的具体值 （如 blue、20px 等）。

内联样式（Inline Style）术语

起始标签（Opening Tag） ------ HTML 元素的起始部分，即要添加样式的元素。
属性（Attribute） ------ style 属性，用于给 HTML 元素添加内联 CSS。
声明（Declaration） ------ 由"属性 + 值"组成，用于给选定元素应用样式。
属性（Property） ------ 声明中的第一部分 ，表示需要修改的视觉特征（如颜色、字体等）。
值（Value） ------ 声明中的第二部分 ，表示属性的具体值 （如 blue、20px 等）。

内联样式

虽然 CSS 是一种独立于 HTML 的语言 ，但仍然可以在 HTML 代码中直接编写 CSS ，这被称为内联样式（Inline Styles） 。

要给 HTML 元素添加样式，可以直接在元素的起始标签中添加 style 属性 。然后，将 style 属性设置为你想要应用的 CSS 样式。

html 复制代码

<p style="color: red;">I'm learning to code!</p>

在上面的示例中，<p> 段落元素的起始标签中包含了 style 属性。接着，style 属性被赋值为 color: red;，这会让段落文字在浏览器中显示为红色。

多个内联样式

如果想要在同一个 HTML 元素上应用多个样式 ，可以在 style 属性中继续添加样式 ，并用分号（;）分隔。

html 复制代码

<p style="color: red; font-size: 20px;">I'm learning to code!</p>

内联样式的适用场景

内联样式是一种快速为 HTML 元素添加样式的方法，不需要额外的 CSS 文件。
在某些特殊场景 （如邮件模板、动态样式 ）中，可能必须使用内联样式。
难以维护 ，如果一个页面有多个元素需要相同的样式，修改会变得非常麻烦。
不符合最佳实践 ，通常，推荐使用外部 CSS 文件 或内部 CSS 来管理样式。

内部样式表（Internal Stylesheet）

正如之前所提到的，内联样式（Inline Styles）并不是最佳的 HTML 样式编写方式。

例如，如果你想要给多个 <h1> 元素 添加相同的样式，你就需要逐个手动添加 内联样式。当新增 <h1> 元素时，你还需要手动修改 HTML 代码，这既麻烦又难以维护。

幸运的是，HTML 允许你在 <head> 元素中使用 <style> 标签来编写 CSS 代码，这称为内部样式表（Internal Stylesheet）

内部样式表的作用

优势：

可以一次性对多个相同类型的 HTML 元素应用相同的样式，避免重复的内联样式。
不需要外部 CSS 文件 ，适用于简单或小型项目 ，或者当外部 CSS 文件不可用的情况下。

缺点：

不利于代码复用 ，如果有多个 HTML 页面，就需要在每个页面中都写相同的 <style> 代码。
不符合最佳实践 ，在更复杂的项目中，推荐使用外部样式表（External Stylesheet） 。

如何创建内部样式表

要创建内部样式表，需要在 <head> 元素内添加 <style> 标签，并在其中编写 CSS 代码，如下所示：

html 复制代码

<head>
  <style>

  </style>
</head>

在 <style> 标签中，你可以像这样编写 CSS 代码：

html 复制代码

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>

在上面的示例中，所有 <p> 段落元素的文本颜色将变为红色 ，同时字体大小设为 20 像素。

语法解析

与内联样式类似，内部样式表的CSS 代码结构相同 ，但有以下主要区别：

不需要在 HTML 标签内使用 style 属性。
可以直接定义哪些 HTML 元素要应用该样式 （如 p 选择器表示所有 <p> 元素）。
CSS 代码集中管理，更易维护。

外部样式表

开发者通常会将 HTML 和 CSS 代码分别存放在不同的文件中，以避免混合代码（HTML 文件仅包含 HTML 代码，CSS 文件仅包含 CSS 代码）。

你可以通过使用 .css 文件扩展名来创建外部样式表，例如：style.css。

使用外部样式表，你可以在单独的 CSS 文件中编写所有样式代码，而不会影响 HTML 文件的可读性和可维护性。

链接css文件

当 HTML 和 CSS 代码位于不同的文件中时，必须将这两个文件链接起来。否则，HTML 文件将无法找到 CSS 代码，样式也就无法应用。

你可以使用 <link> 元素将 HTML 文件和 CSS 文件链接在一起。<link> 元素必须放在 HTML 文件的 <head> 部分。它是一个自闭合标签，并且需要以下属性：

href --- 与锚点元素类似，此属性的值必须是 CSS 文件的地址或路径。
rel --- 此属性描述 HTML 文件和 CSS 文件之间的关系。由于你正在链接到一个样式表，值应设置为 stylesheet。

当链接 HTML 文件和 CSS 文件时，<link> 元素应如下所示：

html 复制代码

<link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'>

如果 CSS 文件与 HTML 文件位于同一目录下，你可以指定一个相对路径，而不是 URL，如下所示：

html 复制代码

<link href='./style.css' rel='stylesheet'>

使用相对路径是链接样式表的常见方式。

选择器

类型

声明是 CSS 的基本组成部分，因为它们将样式应用于选定的元素。那么，如何决定哪些元素会获得样式呢？这就需要用到 选择器。

选择器用于定位特定的 HTML 元素，来应用声明中的样式。你可能已经熟悉一种选择器------类型选择器。顾名思义，类型选择器会匹配 HTML 文档中的元素类型。

在上一课中，你修改了段落元素的颜色：

css 复制代码

p {
  color: green;
}

这就是使用类型选择器的一个例子！元素类型是 p，它来自 HTML 的 <p> 元素。

关于类型选择器的几个重要说明：

类型选择器不包含尖括号。
由于元素类型通常通过它们的起始标签名称来表示，类型选择器有时也被称为标签名称选择器或元素选择器。

通配符

你已经了解了类型选择器如何选择给定类型的所有元素。那么，通配符选择器会选择所有类型的元素。

选择页面上所有元素有一些特定的使用场景，例如重置默认的浏览器样式或选择父元素的所有子元素。现在如果你不理解这些使用场景也不用担心，我们将在后续的 CSS 学习中讲解这些内容。

通配符选择器使用 * 字符，在规则集中，它的位置与类型选择器相同，如下所示：

css 复制代码

* { 
  font-family: Verdana;
}

在上面的代码中，页面上的每个文本元素的字体都会被更改为 Verdana。

类选择器

在使用 HTML 和 CSS 时，class 属性是选择元素的最常见方式之一。

例如，考虑以下 HTML：

html 复制代码

<p class='brand'>Sole Shoe Company</p>

上面的例子中，<p> 元素在其开头标签中具有一个 class 属性。该属性的值为 'brand'。要使用 CSS 选择这个元素，我们可以创建一个规则集，并使用类选择器 .brand。

css 复制代码

.brand {

}

要通过类选择器选择 HTML 元素，必须在类名之前加上一个句点（.）。在上面的例子中，类名是 brand，因此其对应的 CSS 选择器是 .brand

多个类

我们可以使用 CSS 通过类名选择 HTML 元素的 class 属性。到目前为止，我们只是使用每个元素的一个类名进行选择。如果每个 HTML 元素只有一个类，那么每个元素的样式信息将需要一个新的类。

幸运的是，实际上可以在 HTML 元素的 class 属性中添加多个类名。

例如，假设有一个需要同时呈现绿色和加粗的标题元素。你可以编写两个 CSS 规则集，如下所示：

css 复制代码

.green {
  color: green;
}

.bold {
  font-weight: bold;
}

然后，你可以像这样将这两个类同时应用到一个 HTML 元素：

html 复制代码

<h1 class='green bold'> ... </h1>

我们可以通过用空格分隔多个类名，将它们添加到 HTML 元素的 class 属性中。这使得我们能够混合和搭配 CSS 类，以创建许多独特的样式，而不需要为每种样式组合写一个自定义类。

ID选择器

通常情况下，使用 CSS 选择单个元素并为其设置独特的样式是很重要的。如果需要为某个 HTML 元素设置独特的样式，我们可以通过 id 属性为其指定一个 ID。

html 复制代码

<h1 id='large-title'> ... </h1>

与可以接受多个值并广泛用于整个 HTML 文档的 class 不同，元素的 id 只能有一个值，并且每个页面上只能使用一次。

要使用 CSS 选择元素的 ID，我们在 ID 名称前加上井号（#）。例如，如果我们想选择上面例子中的 HTML 元素，它的 CSS 选择器将是这样的：

css 复制代码

#large-title {
}

ID 名称是 large-title，因此它的 CSS 选择器是 #large-title。

属性选择器

你可能还记得，一些 HTML 元素使用 属性（attribute） 来提供额外的细节或功能。例如，href 和 src 是常见的属性，但还有很多其他属性------包括 class 和 id！

属性选择器（attribute selector） 可用于选择包含特定属性的 HTML 元素。这样，即使是相同类型的元素，也可以根据它们的属性或属性值进行不同的样式设置，而无需额外添加 class 或 id。

属性选择器的语法类似于 类型选择器（type selector） 、类选择器（class selector） 和 ID 选择器（ID selector） 。

css 复制代码

[href] {
   color: magenta;
}

在上面的示例中，[href] 选择所有具有 href 属性的元素，并将其 颜色（color） 设置为 洋红色（magenta） 。

此外，我们可以通过 指定类型 或 属性值 来进行更精确的选择。例如，可以使用 type[attribute*=value] 语法，选择 属性值包含特定字符串 的元素。

css 复制代码

<img src='/images/seasons/cold/winter.jpg'>
<img src='/images/seasons/warm/summer.jpg'>

上面的 HTML 代码包含两个 <img> 元素，它们的 src 属性指向不同的图片路径。

现在，我们可以使用属性选择器对它们进行不同的样式设置：

css 复制代码

img[src*='winter'] {
  height: 50px;
}

img[src*='summer'] {
  height: 100px;
}

第一条规则：选择 src 属性包含 'winter' 的 <img> 元素，并将其 高度（height） 设置为 50px。
第二条规则：选择 src 属性包含 'summer' 的 <img> 元素，并将其高度设置为 100px。

注意，我们并没有在 HTML 代码中 新增 class 或 id ，但仍然能针对不同的元素 单独应用样式 。

这正是 属性选择器 的一个重要优势！

伪类（Pseudo-class）

你可能已经注意到，某些 HTML 元素的外观会根据用户的交互方式而改变，或者在不同状态下呈现不同的样式。例如：

当你点击一个 <input> 输入框时，会出现蓝色边框，表示它获得了焦点。
当你点击一个蓝色的 <a> 超链接跳转到另一个页面，然后返回时，该链接的文本变成紫色，表示它已经被访问过。
在填写表单时，如果提交按钮一开始是灰色的（禁用状态） ，但当所有输入框都填满后，按钮变为有颜色的（激活状态） 。

这些都是伪类（pseudo-class）选择器的作用！

常见的伪类

:focus ------ 选中正在输入的输入框（<input>）。
:visited ------ 选中已经访问过的超链接（<a>）。
:disabled ------ 选中禁用的按钮或输入框（<button>、<input>）。
:active ------ 选中正在被点击的按钮或链接（<button>、<a>）。

伪类可以根据用户交互、网站导航以及 HTML 结构中的位置，来改变元素的状态和样式。

伪类的语法

伪类可以附加到任何选择器 ，它的语法是 冒号 : 后跟伪类名称。例如：

css 复制代码

p:hover {
  background-color: lime;
}

示例解析 当鼠标悬停（hover）在段落 <p> 元素上时，该段落的背景颜色会变成绿色（lime）。

伪类用 : 表示，可以改变元素的样式状态。
常见的伪类有 :hover、:focus、:active、:visited 等。
伪类让网页具有更好的交互体验。

类（Classes）和 ID（IDs）

CSS 可以通过**类型（type）、类（class）和 ID（id）**来选择 HTML 元素。

但 CSS 类和 ID 的用途不同，这会影响你在样式设计时的选择。

CSS 类（Classes）

CSS 类是可以在多个元素上重复使用的 。

通过编写 CSS 类，你可以组合不同的类，为元素应用多种样式。

示例：

假设一个页面上有两个标题（<h1>）。

第一个标题 需要加粗（bold）且蓝色（blue）
第二个标题 需要加粗（bold）且绿色（green）

CSS ID（IDs）

ID 只用于唯一的元素，不能重复。

与 class 不同，ID 只能在 HTML 页面中使用一次。
ID 的优先级比类（class）和标签（type）更高，可以覆盖它们的样式（在下一节会详细介绍）。
由于 ID 优先级较高 ，所以应谨慎使用 ，只用于需要始终保持相同外观的元素。

css 复制代码

#main-title {
  font-size: 32px;
  color: red;
}

html 复制代码

<h1 id="main-title">我是唯一的标题</h1>

特异性

特异性是浏览器决定应用哪种css样式的顺序

在 CSS 中的最佳实践 是：尽可能使用最低特异性的选择器，这样当需要修改元素的样式时，可以更容易地覆盖原有的样式。

选择器的特异性顺序

在 CSS 中，选择器的优先级 （特异性）从高到低依次为：
ID 选择器 > 类（class）选择器 > 类型（type）选择器

html 复制代码

<h1 class="headline">Breaking News</h1>

css 复制代码

h1 {
  color: red;
}

.headline {
  color: firebrick;
}

在上面的代码中：

h1 选择器将标题的颜色设为 红色（red） 。
.headline 类选择器将标题的颜色设为 火砖色（firebrick） 。

由于类选择器的优先级高于类型选择器 ，最终标题会显示 火砖色（firebrick） 。

如果再添加一个 ID 选择器：

html 复制代码

<h1 id="breaking" class="headline">Breaking News</h1>

css 复制代码

#breaking {
  color: black;
}

那么标题的颜色会变成 黑色（black） ，因为 ID 选择器的优先级最高。

避免过度使用 ID

随着项目变大，多个元素可能会使用 ID 选择器，这会导致 CSS 变得难以维护。
如果想要修改样式，就需要创建一个更具体的规则，增加了复杂性。

最佳做法：

优先使用类型选择器 （例如 h1、p、div 等）。
如果类型选择器不够具体，再使用类选择器 （例如 .headline）。
只有在特殊情况下才使用 ID 选择器，因为它的优先级最高，后续不易修改。

选择器链

在编写 CSS 规则时，可以要求 HTML 元素同时满足多个选择器，这样就可以更精确地选择特定的元素。

这种组合多个选择器 的方法被称为选择器链（Chaining） 。

如果有一个专门用于 <h1> 元素的特殊类，CSS 代码可以这样写：

css 复制代码

h1.special {

}

这条规则只会选择 同时满足以下两个条件的元素：

是 <h1> 标签
带有 class="special" 的类

如果某个 <p> 元素也有 class="special"，例如：

html 复制代码

<p class="special">This is a special paragraph.</p>

那么上面的 CSS 规则不会影响这个段落，因为它不是 <h1> 标签。

h1.special 选择器 ：只作用于 带有 special 类的 <h1> 元素。
其他标签（如 <p>）即使有 special 类，也不会受影响。
选择器链可以让 CSS 规则更具体，避免影响不相关的元素。

后代选择器（Descendant Combinator）

除了可以链式选择器（Chaining）来选择元素，CSS 还支持选择嵌套在其他 HTML 元素内部的元素 ，这些元素称为后代（Descendants） 。

考虑以下 HTML 结构：

html 复制代码

<ul class='main-list'>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

在这个示例中，<li> 元素是 <ul> 元素的后代元素。可以使用**后代选择器（descendant combinator）**来选择它们：

css 复制代码

.main-list li {

}

.main-list 选择具有 class="main-list" 的元素（即 <ul>）。
li 选择所有 <li> 元素。
.main-list li 选择器 ：只会选择属于 .main-list 内部的 <li> 元素。
注意：.main-list 和 li 之间是空格，表示后代关系。
后代选择器 会影响所有嵌套在指定祖先元素内部的匹配元素，无论它们嵌套的层级是多少。

为什么使用后代选择器？

让选择器更具体 ，确保元素只在特定上下文中生效。
避免影响不相关的元素 ，例如，如果页面上有其他 <li>，但它们不在 .main-list 内，则不会受到影响。

选择链与优先级

在上一个练习中，你并没有选择所有的 <h5> 元素，而是只选择了嵌套在 .description 内的 <h5> 元素 。这种 CSS 选择器比单独使用 h5 选择器更加具体（specific） 。当 CSS 选择器包含多个标签、类或 ID 时，它的**优先级（specificity）**就会提高。

css 复制代码

p {
  color: blue;
}

.main p {
  color: red;
}

在这两条 CSS 规则中：

p { color: blue; }
- 会影响所有 <p> 元素，使它们变成蓝色。
.main p { color: red; }
- 只影响 .main 内的 <p> 元素，使它们变成红色。

由于 .main p 选择器比单独的 p 选择器更具体 （因为它包含了 .main 类），所以 .main 内的 <p> 元素会变成红色 ，即使 p 选择器已经定义了蓝色。

多重选择器

为了让 CSS 代码更加简洁，我们可以同时为多个 CSS 选择器添加相同的样式，从而避免编写重复的代码。

以下代码包含重复的样式：

css 复制代码

css
复制编辑
h1 {
  font-family: Georgia;
}

.menu {
  font-family: Georgia;
}

在上述代码中，font-family: Georgia; 被重复书写了两次。

为了优化代码，我们可以使用逗号（,）分隔多个选择器，使它们共用同一组样式：

css 复制代码

h1, 
.menu {
  font-family: Georgia;
}

这样，所有的 <h1> 元素和具有 menu 类名的元素 都会应用 font-family: Georgia; 这个样式。

配置类型

字体

如果你曾使用过Microsoft Word 或 Google Docs 等文字处理软件，可能用过更改字体的功能。字体（Font） 是技术术语 字体系列（Typeface 或 Font Family） 的一种表达方式。

要更改网页上文本的字体，可以使用 font-family 属性。

css 复制代码

h1 {
  font-family: Garamond;
}

在上面的示例中，所有 <h1> 主标题的字体系列被设置为 Garamond。

在网页上设置字体时需要注意的事项

字体必须安装在用户的电脑上，或者随着网站一同下载。
Web safe fonts 是一组在大多数浏览器和操作系统上都受支持的字体。
除非使用网页安全字体，否则字体可能在不同的浏览器和操作系统上显示不一致。
如果字体名称由多个单词组成，最好用引号括起来，例如：

字体粗细

在 CSS 中，font-weight 属性用于控制文本的粗细，使其看起来更粗或更细。

css 复制代码

p {
  font-weight: bold;
}

在上面的示例中，网页上的所有 <p> 段落都会变为加粗。

font-weight 还可以使用 normal 作为属性值。那么，为什么需要这个值呢？

如果我们希望网页上的所有文本 都加粗，可以选择所有文本元素，并将它们的 font-weight 设置为 bold 。

但如果某个特定的文本部分需要保持正常字体 ，可以单独为该元素设置 font-weight: normal; ，这样就可以取消加粗效果。

text-align

无论对文本应用了多少样式（字体、大小、粗细等），默认情况下，文本总是出现在其所在容器的左侧。

要调整文本的对齐方式 ，可以使用 text-align 属性。
text-align 属性会根据其父元素（即包含该文本的元素）对文本进行对齐。

css 复制代码

h1 {
  text-align: right;
}

在上面的示例中，所有 <h1> 元素的文本将会对齐到右侧。

text-align 属性可以设置以下常见的值：

left ------ 将文本对齐到父元素的左侧（通常是浏览器的左侧）。
center ------ 将文本居中对齐，使其位于父元素的正中央。
right ------ 将文本对齐到父元素的右侧。
justify ------ 通过调整文本间距，使其同时对齐到父元素的左右两侧。

颜色

在讨论颜色的具体内容之前，首先需要对颜色做出两个区分：颜色可以影响以下设计方面：

Foreground color
Background color

前景色是指元素显示的颜色。例如，当一个标题被设置为绿色时，标题的前景色就是绿色。相反，当一个标题的背景设置为黄色时，标题的背景色就是黄色。

在 CSS 中，这两个设计方面可以通过以下两个属性来设置：

color：此属性设置元素的前景色
background-color：此属性设置元素的背景色

css 复制代码

h1 {
  color: red;
  background-color: blue;
}

在上面的例子中，标题的文字将显示为红色，标题的背景将显示为蓝色。

透明度

透明度是衡量元素透明程度的指标。它的取值范围是从 0 到 1，1 表示 100%，即完全可见且不透明，0 表示 0%，即完全不可见。

透明度可以用来使元素渐变显示，产生一种漂亮的叠加效果。要调整元素的透明度，语法如下：

css 复制代码

css
复制编辑
.overlay {
  opacity: 0.5;
}

在上面的例子中，.overlay 元素的透明度为 50%，使得其后面的内容可以透过它显示出来。

背景图片

CSS 允许更改元素的背景，其中一个选项是将元素的背景设置为图片。这是通过 CSS 属性 background-image 来实现的。其语法如下：

css 复制代码

.main-banner {
  background-image: url('https://www.example.com/image.jpg');
}

background-image 属性会将元素的背景设置为显示图片。提供给 background-image 的值是一个 URL，这个 URL 应该指向一张图片。这个 URL 可以是项目中的文件，也可以是指向外部网站的链接。如果要链接到项目中的图片，必须提供相对文件路径。如果项目中有一个图片文件夹，里面有一个名为 mountains.jpg 的图片，那么相对文件路径如下：

css 复制代码

.main-banner {
  background-image: url('images/mountains.jpg');
}

重要性（!important）

!important 可以应用于特定的声明，而不是整个规则。它会覆盖任何样式，无论其优先级多么高。因此，!important 几乎不应该使用，因为一旦使用，它就很难被覆盖。

在 CSS 中，!important 的语法如下：

css 复制代码

p {
  color: blue !important;
}

.main p {
  color: red;
}

由于 !important 被应用在 p 选择器的 color 属性上，所有 p 元素都会显示为蓝色 ，即使 .main p 选择器更具体，并将 color 设置为红色，也不会生效。

使用 !important 的一个合理场景是在多个样式表共存时进行覆盖 。例如，如果我们使用 Bootstrap CSS 框架，并且想要覆盖某个特定 HTML 元素的样式 ，可以使用 !important 属性。

盒模型

浏览器加载 HTML 元素时，会为其赋予默认的定位值。这通常会导致意想不到或不理想的用户体验 ，并限制页面布局的灵活性。在本课中，你将学习盒模型这一重要概念，以理解网页中元素的定位和显示方式。

如果你使用过 HTML 和 CSS，其实你已经无意中接触过盒模型 的某些部分。例如，当你设置元素的背景颜色时，可能会发现颜色不仅应用在元素的正下方 ，还扩展到了元素右侧的区域 。此外，当你对文本进行对齐时，你会发现它是相对于某个参照物对齐的。那么这个参照物是什么呢？

网页中的所有元素都被浏览器解释为"存在"于一个盒子内 ，这就是所谓的盒模型。

例如，当你更改一个元素的背景颜色时，实际上是改变了整个盒子的背景颜色。

在本课中，你将学习盒模型的以下几个方面：

元素盒子的尺寸
元素盒子的边框（border）
元素盒子的内边距（padding）
元素盒子的外边距（margin）

介绍

盒模型 是浏览器用于渲染内容的一种 CSS 布局机制，它通过盒状元素来组织网页内容。每个元素由四个特定区域组成：

width（宽度）和 height（高度） ：指的是内容区域的宽度和高度。
padding（内边距） ：指的是内容区域与边框之间的间距。
border（边框） ：指的是包围内容区域和内边距的边框的厚度和样式。
margin（外边距） ：指的是边框与元素外部边缘之间的空间。

盒模型定义了一组属性，这些属性决定了网页上元素所占据的空间。这些属性包括：

width 和 height：内容区域的宽度和高度。
padding：内容区域与边框之间的间距。
border：包围内容区域和内边距的边框厚度和样式。
margin：边框与元素外部边缘之间的空间。

高度和宽度

一个元素的内容具有两个维度：高度（height）和宽度（width） 。默认情况下，HTML 盒子的尺寸是根据其原始内容来自动调整的。

可以使用 CSS 的 height 和 width 属性来修改这些默认尺寸：

css 复制代码

p {
  height: 80px;
  width: 240px;
}

在这个示例中，段落（p）元素的高度被设置为 80 像素 ，宽度被设置为 240 像素 。代码中的 px 代表像素（pixels） 。

使用像素（px）可以精确设置元素盒子的大小（宽度和高度）。但需要注意的是，当元素的宽度和高度以像素为单位时，它在所有设备上都会保持相同的尺寸 ------例如，一个在笔记本电脑屏幕上填满整个页面的元素，可能会在手机屏幕上溢出（overflow） 。

边框（Border）

边框是一条围绕元素的线，就像画框包围一幅画一样。边框可以通过**宽度（width）、样式（style）和颜色（color）**来设置：

width（宽度） ：指的是边框的厚度，可以使用**像素（px）**或以下关键字之一：thin（细）、medium（中等）、thick（粗）。
style（样式） ：指的是边框的设计，浏览器可以渲染10 种不同的样式 ，例如：none（无）、dotted（点状）、solid（实线）等。
color（颜色） ：指的是边框的颜色，浏览器支持多种颜色格式 ，包括 140 种内置颜色关键字。

css 复制代码

p {
  border: 3px solid coral;
}

在上述示例中，p 元素的边框宽度 为 3 像素 ，边框样式 为 solid（实线） ，边框颜色 为 coral（珊瑚色） 。所有三个属性都在同一行代码中进行了设置。

默认情况下 ，边框的样式是 medium none color，其中 color 是元素的当前颜色。如果 CSS 文件 中未设置 width、style 或 color，浏览器会为这些属性分配默认值。

示例代码：

css 复制代码

p.content-header {
  height: 80px;
  width: 240px;
  border: solid coral;
}

在这个示例中，border 的样式被设置为 solid（实线），颜色被设置为 coral（珊瑚色）。但未指定边框宽度 ，因此默认宽度为 medium（中等）。

边框曲度

自从我们显示出盒子的边框 后，你可能已经注意到，边框突出了元素的真实形状 ：方形。不过，借助 CSS ，边框不一定非要是方形的。

你可以使用 border-radius 属性修改元素边框盒子的圆角。

示例代码：

css 复制代码

div.container {
  border: 3px solid blue;
  border-radius: 5px;
}

在上述示例中，四个角的边框 都被设置为5 像素的半径（即等同于半径为 5 像素的圆的曲率）。

如何创建一个完美的圆形边框？

如果你想创建一个完美的圆形边框 ，可以先让元素的宽度和高度相等 ，然后将 border-radius 设置为盒子宽度的一半（即 50%） 。

css 复制代码

div.container {
  height: 60px;
  width: 60px;
  border: 3px solid blue;
  border-radius: 50%;
}

内边距（Padding）

盒子内容 与边框（border）之间的空间称为 内边距（padding） 。可以把 padding 想象成图片与其外框之间的空隙 。在 CSS 中，你可以使用 padding 属性来调整这个空间。

css 复制代码

p.content-header {
  border: 3px solid coral;
  padding: 10px;
}

在上述示例中，段落的文本内容 与边框之间的四个方向 都添加了 10 像素的内边距。

内边距的作用

padding 属性通常用于扩展背景颜色 ，同时让内容看起来不那么拥挤。

如果你想分别控制每个方向的内边距大小，可以使用以下属性：

padding-top ------ 设置顶部内边距
padding-right ------ 设置右侧内边距
padding-bottom ------ 设置底部内边距
padding-left ------ 设置左侧内边距

css 复制代码

p.content-header {
  border: 3px solid fuchsia;
  padding-bottom: 10px;
}

在上述示例中，只有段落内容的底部 会有 10 像素的内边距 ，而其他三侧的 padding 仍然是默认值（通常为 0）。

内边距简写

另一种使用 padding 属性的方式是，在单个声明中 明确指定内容每一侧的内边距大小。使用多个属性值的声明被称为简写属性（shorthand property） 。

padding 的简写方式允许你在一行代码中同时指定所有方向的内边距值：

各方向的 padding 作用

padding-top：定义元素顶部的内边距宽度。
padding-right：定义元素右侧的内边距宽度。
padding-bottom：定义元素底部的内边距宽度。
padding-left：定义元素左侧的内边距宽度。

padding 简写方式

1. 指定 4 个值

css 复制代码

p.content-header {
  padding: 6px 11px 4px 9px;
}

在上面的例子中，6px 11px 4px 9px 依照顺时针方向依次对应：

6px → padding-top（顶部内边距）
11px → padding-right（右侧内边距）
4px → padding-bottom（底部内边距）
9px → padding-left（左侧内边距）

2. 指定 3 个值

css 复制代码

p.content-header {
  padding: 5px 10px 20px;
}

当左右内边距相同时，可以使用 3 个值：

5px → padding-top（顶部内边距）
10px → padding-left 和 padding-right（左、右内边距相同）
20px → padding-bottom（底部内边距）

3. 指定 2 个值

css 复制代码

p.content-header {
  padding: 5px 10px;
}

当上下内边距相同，左右内边距相同时，可以使用 2 个值：

5px → padding-top 和 padding-bottom（上下内边距相同）
10px → padding-left 和 padding-right（左右内边距相同）

这种简写方式使代码更加简洁，便于阅读和维护。

外边距（Margin）

到目前为止，你已经学习了**盒模型（Box Model）**的以下组成部分：

content（内容）
border（边框）
padding（内边距）

盒模型的第四个也是最后一个 组成部分是 margin（外边距） 。

什么是 `margin`？

margin 指的是盒子外部的空间 。

我们可以使用 margin 属性来指定这个空间的大小。

css 复制代码

p {
  border: 1px solid aquamarine;
  margin: 20px;
}

在上面的代码示例中：

margin: 20px; 在段落（<p>）元素的四周 都设置了 20px 的外边距。
这意味着其他 HTML 元素不能进入 该段落 border 外 20px 的范围。

`margin` 的单独设置

如果需要更具体地控制每一侧的外边距，可以使用以下属性：

margin-top ：设置顶部的外边距。
margin-right ：设置右侧的外边距。
margin-bottom ：设置底部的外边距。
margin-left ：设置左侧的外边距。

css 复制代码

p {
  border: 3px solid DarkSlateGrey;
  margin-right: 15px;
}

在上面的示例中：

只有右侧的外边距 被设置为 15px，其他三侧不会受影响。
这种用法非常常见，因为不同方向的 margin 可能需要不同的设置。

margin 允许更灵活地调整页面元素之间的间距，使布局更加整齐、美观。

auto

margin 属性还可以用来使内容居中。但必须遵循一些语法要求。请看以下示例：

css 复制代码

div.headline {
  width: 400px;
  margin: 0 auto;
}

在上面的示例中，margin: 0 auto; 会使 div 在其包含元素中居中。0 将上下边距设置为 0 像素，而 auto 值会指示浏览器调整左右边距，使元素在其包含元素内居中。

要使元素居中，必须为该元素设置宽度。否则，div 的宽度会自动设置为其包含元素的全宽，例如 <body>。如果元素占据了整个页面宽度，就无法使其居中，因为页面的宽度可能会随着显示器或浏览器窗口的大小变化而变化。

在上面的示例中，div 的宽度被设置为 400 像素，这小于大多数屏幕的宽度。因此，如果其包含元素的宽度大于 400 像素，div 就会在其中居中。

Margin 塌陷

最小和最大宽度

由于网页可以在不同大小的屏幕上查看，因此网页上的内容可能会受到屏幕尺寸变化的影响。为了避免这个问题，CSS 提供了两个属性，可以限制元素盒子的最小和最大尺寸：

min-width ------ 该属性确保元素盒子的最小宽度。
max-width ------ 该属性确保元素盒子的最大宽度。

css 复制代码

p {
  min-width: 300px;
  max-width: 600px;
}

在上述示例中，所有段落的宽度不会缩小到 300 像素以下，也不会超过 600 像素。

当浏览器窗口变窄或放大时，内容（如文本）可能会变得难以阅读。这两个属性通过限制元素的最小和最大宽度来确保内容的可读性。

你还可以限制元素的最小和最大高度：

min-height ------ 该属性确保元素盒子的最小高度。
max-height ------ 该属性确保元素盒子的最大高度。

css 复制代码

p {
  min-height: 150px;
  max-height: 300px;
}

在上述示例中，所有段落的高度不会小于 150 像素，也不会超过 300 像素。

如果 max-height 属性设置得过低，会发生什么情况？

可能会导致内容溢出到盒子之外，导致内容不可读。在接下来的练习中，你将学习如何解决这个问题。

当 max-height 设得过低时，元素的内容可能无法完全容纳在该高度内，导致溢出。这是因为：

内容不会自动缩小：

文字、图片等内容的大小是固定的，不能像盒子本身一样随 max-height 约束而缩小。
例如，如果段落文本需要 200px 高度才能完整显示，但 max-height 设为 100px，那么多余的文本就无法容纳在盒子里。

默认情况下，溢出的内容仍会显示：

在 max-height 设得过低的情况下，浏览器仍然会尝试渲染全部内容，而不会自动隐藏溢出的部分。
这可能导致 内容超出盒子的边界，覆盖其他元素，或者造成页面布局混乱。

Overflow（溢出）

网页中的所有元素都遵循 盒模型（Box Model） ，它是浏览器用于渲染内容的一种 CSS 布局机制。每个元素由四个特定区域组成：

宽度（width）和高度（height） ：指的是内容区域的宽度和高度。
内边距（padding） ：指的是内容区域与边框之间的间距。
边框（border） ：指的是包围内容区域和内边距的边框的厚度和样式。
外边距（margin） ：指的是边框与元素外部边界之间的间距。

示例：一个图片的尺寸计算

假设一张图片的基本尺寸如下：

内容区域：300 像素宽，200 像素高
内边距：左右各 10 像素，上下各 10 像素
边框：左右各 2 像素，上下各 2 像素
外边距：左右各 20 像素，上下各 10 像素

其 总尺寸 计算方式如下：

宽度 = 300 + (10 × 2) + (2 × 2) + (20 × 2) = 364 像素
高度 = 200 + (10 × 2) + (2 × 2) + (10 × 2) = 244 像素

有时候，这些组成部分会导致元素的 实际尺寸大于父容器的可视区域，从而造成内容溢出的问题。

如何处理溢出内容？

当元素的内容超出了它的容器范围时，我们可以使用 overflow 属性来控制如何显示溢出的部分。常见的 overflow 取值包括：

hidden ------ 溢出的内容将被隐藏，不会显示。
scroll ------ 在元素的盒子内添加 滚动条，用户可以滚动查看完整内容。
visible ------ 溢出的内容仍然会显示在父容器之外（默认值）。

例如：

css 复制代码

p {
  overflow: scroll; 
}

在上面的示例中，如果段落的内容超出了它的容器（比如用户调整了浏览器窗口大小），则会自动出现 滚动条，允许用户查看完整内容。

over在父元素上的作用

overflow 通常设置在 父元素 上，以告诉浏览器如何处理 子元素 的溢出内容。例如，如果 div 的 overflow 属性设置为 scroll，那么该 div 中的所有子元素都会出现滚动条来显示溢出的内容。

此外，还有两个更精细的 overflow 控制属性：

overflow-x ------ 仅控制 水平方向 的溢出行为。
overflow-y ------ 仅控制 垂直方向 的溢出行为。

重置默认样式（Resetting Defaults）

所有主流的网页浏览器都自带 默认样式表（default stylesheet） ，如果网页没有外部样式表，浏览器就会使用自己的默认样式。这些 默认样式表 被称为 用户代理样式表（user agent stylesheets） 。在这里，用户代理（user agent） 是浏览器的技术术语。

用户代理样式表通常包含一些默认的 CSS 规则，例如 padding（内边距） 和 margin（外边距） 的默认值。这些默认值会影响 HTML 元素在浏览器中的显示方式，可能会给开发者带来设计和样式上的困扰。

如何重置默认样式

css 复制代码

* {
  margin: 0;
  padding: 0;
}

在上面的代码中：

* 选择器表示 所有 HTML 元素 ，即 全局重置。
margin: 0; ------ 清除所有元素的外边距。
padding: 0; ------ 清除所有元素的内边距。

这通常是 外部 CSS 样式表 中的第一条规则。

注意：当 margin 和 padding 的值设置为 0 时，不需要添加单位（如 px），因为 0 在 CSS 里是通用的、无单位的数值。

可见性（Visibility）

可以使用 visibility 属性来隐藏网页上的元素。

`visibility` 属性的取值

visibility 属性可以设置为以下值：

hidden ------ 隐藏元素。
visible ------ 显示元素。
collapse ------ 折叠元素（主要用于表格中的行和列）。

html 复制代码

<ul>
  <li>Explore</li>
  <li>Connect</li>
  <li class="future">Donate</li>
</ul>

css 复制代码

.future {
  visibility: hidden;
}

在上面的示例中，具有 future 类的列表项（"Donate"）将在浏览器中被隐藏。

`visibility: hidden` 的特点

隐藏元素的内容 ，但不会移除该元素占据的空间。
用户仍然可以通过 查看网页源代码 看到隐藏的内容。

`display: none` 与 `visibility: hidden` 的区别

属性	效果
`display: none;`	完全移除元素，网页布局会重新调整。
`visibility: hidden;`	隐藏元素，但保留空间，网页布局不变。

css 复制代码

.future {
  display: none;
}

此时，"Donate" 这个列表项会 完全消失，不会在网页上留下任何空白区域。

box-sizing

content-box

在 CSS 中，许多属性都有默认值，因此不需要在样式表中显式设置。

例如：

font-weight （字体粗细）的默认值是 normal，但通常不会在样式表中专门定义。

同样，浏览器也会默认使用一种 盒模型（Box Model） 来解析网页的布局。

盒模型与 `box-sizing`

在 CSS 中，box-sizing 属性用于控制浏览器解析网页时使用的盒模型类型。

默认值 ：content-box
在 content-box 模型中，width 和 height 只包括内容区域 ，但 border（边框）和 padding（内边距）不会被计算在内。

css 复制代码

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
}

在 content-box 模式下：

内容区域（content） ：宽度 200px，高度 100px
内边距（padding） ：左右各 20px，上下各 20px
边框（border） ：左右各 5px，上下各 5px
最终占据的总尺寸（实际宽度与高度）：
- 宽度：200px + 20px * 2 + 5px * 2 = 250px
- 高度：100px + 20px * 2 + 5px * 2 = 150px

这意味着，在默认的 content-box 盒模型下，width 和 height 并不包含 padding 和 border，而是单独计算的。

border-box

幸运的是，我们可以重置整个盒模型 ，并指定新的 border-box 盒模型：

css 复制代码

* {
  box-sizing: border-box;
}

上面的代码将所有 HTML 元素的 box-sizing 设为 border-box 。这样可以避免在 content-box 盒模型中可能出现的尺寸计算问题。

`border-box` 盒模型的特点

在 border-box 盒模型中：

width 和 height 是固定的 ，不会因为 border（边框）和 padding（内边距）而增加元素的尺寸。
border 和 padding 被包含在 width 和 height 之内，不会额外增加盒子的总尺寸。

html 复制代码

<h1>Hello World</h1>

css 复制代码

* {
  box-sizing: border-box;
}

h1 {
  border: 1px dashed #4f768e;
  height: 150px;
  width: 200px;
  padding: 20px;
}

在 border-box 模式下：

h1 的 总宽度 仍然是 200px ，不会因为 padding 和 border 变大。
h1 的 总高度 仍然是 150px ，即使添加了 padding 和 border，内容区域会自动缩小以适应。

这种方式可以避免 content-box 盒模型中的尺寸计算问题，使布局更加稳定、易于控制。

浮动

如果一个 HTML 文档没有 CSS，浏览器会按照元素在文档中的顺序从左到右、从上到下 依次渲染它们。这种渲染顺序称为 HTML 元素的浮动性。

除了提供用于美化 HTML 元素的样式属性外，CSS 还包含一些可以改变浏览器如何定位元素的属性。这些属性用于指定元素在页面上的位置、元素是否可以与其他元素共享同一行，以及其他相关的布局特性。

在本课中，你将学习五个用于调整 HTML 元素在浏览器中位置的 CSS 属性：

position（定位）
display（显示方式）
z-index（层级）
float（浮动）
clear（清除浮动）

这些属性可以帮助我们控制网页上元素的布局和显示效果，并且可以与其他任何你已掌握的 CSS 样式属性配合使用。

定位（position）

请看下图中的块级元素：

像这些方框一样的块级元素，会创建一个与其父元素同宽的区块，并阻止其他元素出现在相同的水平空间内。

请注意，上图中的块级元素各占据一整行，因此它们不会相互重叠。在右侧的浏览器窗口中，你可以看到块级元素默认会出现在浏览器的左侧。这是块级元素的默认定位方式（position） 。

元素的默认定位方式可以通过 position 属性进行更改。position 属性可以取以下五个值：

static - 默认值（通常不需要明确指定）
relative - 相对定位
absolute - 绝对定位
fixed - 固定定位
sticky - 粘性定位（根据滚动位置在 relative 和 fixed 之间切换）

在接下来的练习中，你将学习这些值的具体用法。现在，你只需要知道，如果你喜欢 HTML 元素的默认定位方式，就无需设置 position 属性。

Position: Relative

相对定位

修改元素默认位置的一种方法是将其 position 属性设置为 relative。

这个值允许你相对于元素在网页中的默认 static 位置来进行定位。

css 复制代码

.green-box {
  background-color: green;
  position: relative;
}

尽管上面的代码告诉浏览器 .green-box 元素是相对定位 的，但它并没有 指定该元素在页面上的具体位置。要完成定位，还需要配合以下偏移属性（offset properties） ，用于将元素从默认 static 位置移动：

top ------ 将元素向下移动指定距离。
bottom ------ 将元素向上移动指定距离。
left ------ 将元素向右移动指定距离。
right ------ 将元素向左移动指定距离。

你可以使用像像素（px）、ems（em）、百分比（%）等单位 来精确调整元素的偏移量。
需要注意的是，如果元素的 position 属性是 static（默认值），偏移属性将不会生效。

css 复制代码

.green-box {
  background-color: green;
  position: relative;
  top: 50px;
  left: 120px;
}

在上面的示例中，.green-box 元素将从默认的 static 位置 向下移动 50 像素 ，向右移动 120 像素。下图展示了该元素的新位置：

相对定位的元素 被偏移后，不会影响其他元素的位置。

position：absolute 绝对定位

width是让元素完全脱离标准文档流的，不会影响或占据其他元素的空间

另一种修改元素位置的方式是将其 position 设置为 absolute（绝对定位）。

当元素的 position 设置为 absolute 时，页面上的所有其他元素都会忽略该元素的存在，并且不会在布局中为其预留空间。该元素将 相对于 它最近的祖先元素 （该祖先元素的 position 属性设置为 relative、absolute 或 fixed，而不是 static）进行定位。同时，可以使用偏移属性（如 top、right、bottom 和 left）来调整其相对于参考点的位置。

在图示中， "本网站正在建设中，请稍后再访问！" 这一文本元素从其静态位置 （位于父容器的左上角）被移动到了新的位置。其父容器是图中主要的白色区域 。该元素采用了绝对定位 ，并使用了 top: 300px; 和 right: 0px; 的偏移属性，将其向下移动 300 像素 并对齐到父容器的右边缘 。由于绝对定位 ，页面上的其他元素不会受到该元素的影响，它们的布局不会因它的存在而发生变化。

position: fixed

当元素的 position 设置为 absolute 时（就像上一节的练习中那样），当用户滚动页面时，该元素会随着文档一起滚动。

我们可以通过将 position 设置为 fixed，并配合常见的偏移属性 top、bottom、left 和 right，使元素固定在页面的特定位置（不受用户滚动影响）。

css 复制代码

.title {
  position: fixed;
  top: 0px;
  left: 0px;
}

在上面的示例中，.title 元素将始终固定在页面的左上角，无论用户如何滚动页面，都不会改变其位置

这种技术通常用于网页中的导航栏，确保它始终可见，即使用户滚动页面也不会消失。

fixed会让元素脱离文档流，默认停在页面顶部也就是说，如果你想要一个跟随窗口固定的footer，需要将bottom设置为0，将footer固定在浏览器窗口底部

Position: Sticky

由于 static 和 relative 定位的元素仍然保持在文档流中，当用户滚动页面（或父元素）时，这些元素也会随之滚动。而 fixed 和 absolute 定位的元素脱离了文档流，因此当用户滚动时，它们会保持在指定的位置不变。

sticky 是另一种定位方式，它使元素在文档流中保持原位，但在页面滚动到一定位置后"粘附"到指定位置。实现 sticky 需要结合常见的偏移属性，以及一个新的行为。

css 复制代码

.box-bottom {
  background-color: darkgreen;
  position: sticky;
  top: 240px;
}

在上面的示例中，.box-bottom <div> 元素最初会按照正常的相对位置滚动。当它距离页面顶部 240 像素时，它会固定在该位置，并在用户继续滚动时保持不变。直到其父容器的底部，它才会"取消粘附"，重新回到正常的文档流中。

`position: sticky` 和 `position: fixed` 的区别

特性	`sticky`	`fixed`
是否保留在文档流中	✅ 是（最初按照正常位置排列）	❌ 否（完全脱离文档流）
是否受父容器影响	✅ 受父容器限制，超出范围会"取消粘附"	❌ 不受父容器限制，始终固定在视口指定位置
是否随页面滚动	✅ 部分滚动，超过指定位置后固定	❌ 始终固定，不随滚动条变化
常见用途	局部固定（如表头、侧边栏）	全局固定（如导航栏、悬浮按钮）

Z-Index

当网页上的多个元素具有不同的 position（定位）时，它们可能会相互重叠，从而导致内容难以阅读或查看。

css 复制代码

.blue-box {
  background-color: blue;
}

.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}

在上面的示例中，.green-box 元素会覆盖在 .blue-box 元素的上方。

`z-index` 控制元素的层级

z-index 属性用于控制重叠元素的前后顺序 ，可以理解为元素的深度：

数值较大的元素会显示在前面
数值较小的元素会显示在后面

z-index 属性接受整数值，浏览器会根据这些值决定元素的叠放顺序。

`z-index` 示例

css 复制代码

.blue-box {
  background-color: blue;
  position: relative;
  z-index: 1;
}

.green-box {
  background-color: green;
  position: relative;
  top: -170px;
  left: 170px;
}

解析：

.blue-box 设置了 position: relative; 并赋予 z-index: 1;
.green-box 未指定 z-index，默认值为 0
由于 1 > 0，.blue-box 会显示在 .green-box 的上方

注意：
z-index 仅对非 static 定位的元素生效 ，因此我们将 .blue-box 的 position 设置为 relative，否则 z-index 不会生效。

总结：z-index 可以用来控制元素的前后顺序，常用于弹出窗口、悬浮菜单、遮罩层等，确保关键内容不会被遮挡。

Inline Display

每个 HTML 元素都有一个默认的 display（显示）值，该值决定了该元素是否可以与其他元素共享水平空间。一些元素无论内容大小如何，都会占据整个浏览器宽度（从左到右）。而另一些元素仅占据其内容所需的水平空间，并且可以直接与其他元素相邻。

在本课中，我们将介绍 display 属性的三种取值：inline（内联）、block（块级）和 inline-block（内联块）。

某些元素（如 <em>、<strong> 和 <a>）的默认显示方式是 inline（内联） 。内联元素的盒子会紧紧包裹其内容，仅占据显示内容所需的空间，并且不会强制换行到新的一行 。这些元素的高度和宽度不能在 CSS 文档中指定。例如，超链接标签 <a> 的文本默认会与周围的文本显示在同一行上，并且其宽度仅为容纳其内容所需的大小。内联元素不能使用 height 或 width CSS 属性来调整大小。

html 复制代码

To learn more about <em>inline</em> elements, read <a href="#">MDN documentation</a>.

在上面的示例中，<em> 元素是内联元素，因为它的内容与其周围内容（包括超链接 <a> 标签）显示在同一行上。因此，该示例会显示如下内容：

To learn more about inline elements, read MDN documentation.

display 属性允许我们将任何元素转换为内联元素，包括默认不是内联的元素（例如段落 <p>、<div> 和标题 <h1> 等）。

css 复制代码

h1 {
  display: inline;
}

在上面的 CSS 代码中，所有 <h1> 元素的 display 值被更改为 inline。这样，浏览器会将 <h1> 元素与其前后的其他内联元素（如果有的话）显示在同一行上。

display: block（块）

有些元素不会与周围的内容显示在同一行上，这些元素称为 块级元素（block-level elements） 。这些元素默认情况下会填满整个页面的宽度，但其 width 属性也可以进行设置。除非另有规定，它们的高度通常只会占据容纳其内容所需的空间。

默认是块级的元素 包括：所有级别的标题元素（<h1> 到 <h6>）、<p>、<div> 和 <footer>。要查看完整的块级元素列表，请访问 the MDN documentation.

css 复制代码

strong {
  display: block;
}

在上面的示例中，所有 <strong> 元素都会显示在 单独的一行 上，即使其内容没有填满大多数计算机屏幕的宽度，也不会有其他内容与其并列显示。

Display: Inline-Block

display 属性的第三种取值是 inline-block 。inline-block 结合了 内联元素（inline） 和 块级元素（block） 的特点。

像内联元素一样 ，inline-block 元素可以与其他 inline-block 或 inline 元素并排显示。
像块级元素一样 ，inline-block 元素可以使用 width 和 height 属性来指定尺寸。

默认情况下，图片（<img>）就是 inline-block 元素的一个典型例子。

例如，下面的 <div> 元素将显示在同一行上，并具有指定的尺寸：

html 复制代码

<div class="rectangle">
  <p>I'm a rectangle!</p>
</div>
<div class="rectangle">
  <p>So am I!</p>
</div>
<div class="rectangle">
  <p>Me three!</p>
</div>

css 复制代码

.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
}

在上面的代码中，有 三个矩形的 <div> ，每个 <div> 内部都包含一个段落文本。由于 display: inline-block;，这些 .rectangle <div> 元素将会 并排显示 （前提是从左到右的空间足够），并且它们的宽度为 200 像素 ，高度为 300 像素，即使它们内部的文本并不需要占据这么大的空间。

浮动

到目前为止，你已经学习了如何使用 偏移属性（offset properties） 来精确指定元素的位置。如果你只是想 将元素尽可能向左或向右移动 ，可以使用 float 属性。

float 属性通常用于 让文本围绕图片排版 。但需要注意的是，如果是为了布局目的 而让元素左右移动，更推荐使用 CSS Grid 和 Flexbox，你将在后续课程中学习这些布局工具。

`float` 属性的常见取值

left ------ 将元素尽可能 向左移动（浮动） 。
right ------ 将元素尽可能 向右移动（浮动） 。

css 复制代码

.green-section {
  width: 50%;
  height: 150px;
}

.orange-section {
  background-color: orange;
  width: 50%;
  float: right;
}

在上面的示例中，我们将 .orange-section 元素浮动到 右侧（float: right;） 。

浮动适用于 static 和 relative 定位的元素，如下图所示：

浮动的元素必须指定 width ，否则该元素会 默认占据整个父元素的宽度 ，此时修改 float 属性不会产生可见的效果。

为什么浮动只适用于static和relative？

static 是htm元素的默认定位，即元素按照正常的文档流排列 当 float 应用于 static 元素时 ，该元素会脱离正常文档流 ，浮动到指定方向（left 或 right），但仍然受其父容器的影响。

例如：

css 复制代码

.box {
  float: right;
}

html 复制代码

<div class="box">我是浮动的</div>

.box 默认是 static 定位，float: right; 让它浮动到右侧。
虽然它脱离了标准流，但后续的 非浮动元素 仍然会按照正常的文档流排列，并可能环绕浮动的 .box。

relative 允许元素 相对于自己原本的位置进行偏移 （使用 top、left 等）。 当 float 作用于 relative 元素时 ，它的 float 行为优先，即它会首先浮动到指定方向，relative 偏移不会影响浮动结果。

css 复制代码

.box {
  position: relative;
  float: left;
  left: 50px; /* 这个 left 不会生效 */
}

html 复制代码

<div class="box">我是浮动的</div>

float: left; 会让 .box 浮动到左侧 ，但 left: 50px; 不会影响浮动后的位置 ，因为 float 的优先级更高。

定位方式	`float` 是否生效？	原因

`static`（默认）	✅ 生效	`float` 让元素脱离标准流，并浮动到指定方向

`relative`（相对）	✅ 生效	`float` 优先，`relative` 偏移不会影响浮动

`absolute`（绝对）	❌ 无效	`absolute` 已经脱离文档流，`float` 没有意义

`fixed`（固定）	❌ 无效	`fixed` 相对于视口固定，`float` 不影响它

什么时候应该用 `inline-block`，什么时候应该用 `float`？

使用 inline-block 的情况

不想让元素脱离标准文档流（例如：水平排列的菜单项）。
希望元素可以调整 width 和 height，但仍然像 inline 一样排列。
不想处理浮动带来的"塌陷"问题。

使用 float 的情况

让文本环绕图片（图片排版） 。
需要让多个块级元素横向排列，并且脱离标准文档流。
页面的旧式布局（但现代 CSS 更推荐使用 Flexbox 和 Grid） 。

清除浮动（clear）

让元素避开浮动元素，确保页面布局不会因为浮动而混乱

float 属性可以用于同时浮动多个元素。但是，当多个浮动元素的高度不同时，可能会影响页面的布局。具体来说，元素可能会"碰撞"在一起，导致其他元素无法正确地向左或向右移动。

clear 属性用于指定当元素碰撞时应该如何排列。它可以取以下值：

left ------ 该元素的左侧不会接触到同一个容器内的任何其他浮动元素。
right ------ 该元素的右侧不会接触到同一个容器内的任何其他浮动元素。
both ------ 该元素的两侧都不会接触到同一个容器内的任何其他浮动元素。
none ------ 该元素可以接触到两侧的浮动元素。

css 复制代码

div {
  width: 200px;
  float: left;
}

div.special {
  clear: left;
}

在上面的示例中，所有 <div> 元素都被浮动到左侧。但由于其中一个 <div> 高度较高，导致带有 special 类的 <div> 不能完全靠左排列。通过设置 clear: left;，该 special <div> 将会被移到页面的最左侧，从而避免了高度不同导致的布局问题。

颜色

CSS 支持多种颜色格式。这些包括命名颜色 （如 blue、black 和 limegreen），以及数值颜色表示法。使用数值系统，我们可以充分利用浏览器支持的整个色彩光谱。在本课中，我们将探索 CSS 提供的所有颜色选项。

在 CSS 中，颜色可以用三种不同的方式描述：

命名颜色（Named colors） ------ 以英文单词表示颜色，也称为关键字颜色。
RGB（红绿蓝） ------ 通过数值表示红色、绿色和蓝色的混合比例。
HSL（色相、饱和度和亮度） ------ 通过数值表示色相、饱和度和亮度的混合比例。

前景色 vs 背景色

在讨论颜色的具体用法之前，我们需要先区分颜色的两种作用：

前景色（Foreground color）
背景色（Background color）

前景色 指的是元素本身的颜色。例如，当一个标题被设置为绿色时，我们就是在设置标题的前景色。

背景色 指的是元素的背景颜色。例如，当一个标题的背景被设置为黄色时，我们就是在设置标题的背景色。

在 CSS 中，这两个设计属性可以使用以下两个属性进行设置：

color ------ 用于设置元素的前景色。
background-color ------ 用于设置元素的背景色。

css 复制代码

h1 {
  color: red;
  background-color: blue;
}

在上面的示例中，h1 标题的文本颜色会变成红色，而背景颜色会变成蓝色。

十六进制颜色（Hexadecimal）

CSS 中的一种颜色表示法叫做十六进制表示法（hexadecimal） ，使用该方式指定的颜色称为十六进制颜色（hex colors） 。十六进制颜色的表示方式以 # 号 开头，后面跟着 3 个或 6 个字符 。这些字符分别表示 红（Red）、绿（Green）和蓝（Blue） 的数值。

yaml 复制代码

darkseagreen: #8FBC8F
sienna:       #A0522D
saddlebrown:  #8B4513
brown:        #A52A2A
black:        #000000 或 #000
white:        #FFFFFF 或 #FFF
aqua:         #00FFFF 或 #0FF

你可能还会注意到，有些颜色可以用 3 个字符 或 6 个字符 表示。例如：

黑色（black） ： #000000 或 #000
白色（white） ： #FFFFFF 或 #FFF
水色（aqua） ： #00FFFF 或 #0FF

当颜色的每一对数字都相同时 ，可以用 3 个字符 来简写。例如，#00FFFF 变为 #0FF。

但要注意，并不是所有的 6 位十六进制颜色都能被缩写。

十六进制颜色的字母可以大写或小写 ，如 #9932CC 或 #9932cc，两者效果相同。

RGB 颜色（RGB Colors）

除了十六进制颜色（hex），CSS 还有另一种表示 RGB 值的语法，通常称为 "RGB 值" 或简称 "RGB" 。这种方式使用十进制（decimal） 数字来表示颜色，而不是十六进制（hex），其格式如下：

css 复制代码

h1 {
  color: rgb(23, 45, 23);
}

在 rgb() 语法中，每个值代表一个颜色分量 ，其取值范围是 0 到 255：

第一个数字 表示 红色（Red） 的强度
第二个数字 表示 绿色（Green） 的强度
第三个数字 表示 蓝色（Blue） 的强度

RGB 颜色与十六进制颜色的显示效果是完全相同的，只是表示方式和使用的数值系统不同。例如：

rgb(255, 0, 0) 代表 纯红色 ，等同于 #FF0000
rgb(0, 255, 0) 代表 纯绿色 ，等同于 #00FF00
rgb(0, 0, 255) 代表 纯蓝色 ，等同于 #0000FF

选择 Hex 还是 RGB？

十六进制（hex）和 RGB 在效果上是等价的 ，选择哪种表示方式取决于个人喜好 。不过，为了保持 CSS 代码的整洁和可读性，建议在同一份 CSS 文件中统一使用一种格式，这样在对比颜色时更容易理解。

十六进制（Hex）和 RGB 颜色（RGB Colors）

十六进制（hex）和 RGB 颜色系统 能够表示比 CSS 命名颜色（named colors）多得多的颜色。我们可以利用这些更丰富的颜色选择，来优化网页的样式设计。

在 hex 和 RGB 颜色系统中，每种颜色都由三个值 组成，分别代表红色（Red） 、绿色（Green）和蓝色（Blue） 。每个值的取值范围是 0 到 255，也就是说，我们可以使用的颜色总数为：

256 × 256 × 256 = 16,777,216 种颜色

相比之下，CSS 的命名颜色 只有 大约 140 种 ，可见 hex 和 RGB 颜色系统的选择范围要广得多！

回顾之前的学习，我们从命名颜色开始 ，然后将它们转换为十六进制颜色 ，再从十六进制转换为 RGB 。如果我们的转换没有出错，那么这些颜色在视觉上仍然是相同的。

现在，我们可以利用这些丰富的颜色选项，来更精细地调整网页的配色方案！

色相、饱和度和亮度（Hue, Saturation, and Lightness）

RGB 颜色模式很方便，因为它与计算机内部存储颜色的方式 非常接近。但在 CSS 中，还有另一种同样强大的颜色系统，称为 色相-饱和度-亮度（Hue-Saturation-Lightness，HSL） 颜色模式。

HSL 的语法与 RGB 的十进制形式相似，但它有几个重要的不同之处：

css 复制代码

color: hsl(120, 60%, 70%);

第一个数值 代表 色相（Hue） ，取值范围 0 到 360，表示颜色在色轮上的角度：

- 红色（Red） ：0° - 绿色（Green） ：120° - 蓝色（Blue） ：240° - 红色（Red） ：360°（与 0° 相同）

第二个数值 代表 饱和度（Saturation） ，用百分比表示颜色的纯度：
- 100% ：颜色最纯（最鲜艳）
- 0% ：颜色最灰（完全去饱和变成灰色）
第三个数值 代表 亮度（Lightness） ，用百分比表示颜色的明暗程度：
- 50% ：正常亮度
- 100% ：完全变白
- 0% ：完全变黑

HSL 的优点

HSL 在调整颜色时更加直观：

在 RGB 模式 下，如果想让颜色变暗，通常需要调整 红、绿、蓝三个值，调整过程较为复杂。
在 HSL 模式 下，只需**降低亮度（Lightness）**的值，就能轻松实现颜色变暗。

此外，HSL 还能轻松创建协调的配色方案：

只需 保持相同的饱和度和亮度 ，调整不同的色相，就能创建一组和谐的颜色！

不透明度和 Alpha

到目前为止，我们看到的所有颜色都是不透明的 ，也就是非透明的 。当两个不透明的元素重叠时，下方元素的内容不会透过上方元素显示出来。在本练习中，我们将更改颜色的不透明度（opacity） ，也就是透明度（transparency） ，这样底部元素的部分或全部内容可以通过覆盖元素显示出来。

在 HSL 颜色模式中使用透明度时，需要使用 hsla 而不是 hsl，并且需要提供四个值，而不是三个。例如：

css 复制代码

color: hsla(34, 100%, 50%, 0.1);

前三个值的作用与 hsl 相同。第四个值（之前未见过）是 alpha ，有时也被称为 opacity（不透明度）。

Alpha 是一个 从 0 到 1 之间的小数 。如果 alpha 为 0，则颜色完全透明 。如果 alpha 为 1，则颜色完全不透明 。如果 alpha 值为 0.5，则表示半透明。

可以将 alpha 值理解为"要与背景混合的前景颜色的比例"。当一个颜色的 alpha 低于 1 时，任何位于其后面的颜色都会与其进行混合。这种混合是针对每个像素独立进行的，不会产生模糊效果。

RGB 颜色模式 也有类似的透明度语法，即 rgba 。同样，前三个值的作用与 rgb 相同，第四个值是 alpha。示例如下：

css 复制代码

color: rgba(234, 45, 98, 0.33);

此外，十六进制（hex）颜色也可以包含 alpha 值 。通过在 六位十六进制颜色 后面添加 两位十六进制数 （如 #52BC8280），或在 三位十六进制颜色 后面添加 一位十六进制数 （如 #F003），可以更改颜色的不透明度。Hex 颜色的透明度范围是 00（完全透明）到 FF（完全不透明） 。

Alpha 只能用于 HSL、RGB 和十六进制颜色 ，不能为命名颜色 （如 green）添加 alpha 值。

不过，有一个专门表示 完全透明 的命名颜色关键字，即 transparent 。它等同于 rgba(0, 0, 0, 0)，可以像其他颜色关键字一样使用：

css 复制代码

color: transparent;

不透明度和 Alpha

在 HSL 颜色模式中使用透明度时，需要使用 hsla 而不是 hsl，并且需要提供四个值，而不是三个。例如：

css 复制代码

color: hsla(34, 100%, 50%, 0.1);

前三个值的作用与 hsl 相同。第四个值（之前未见过）是 alpha ，有时也被称为 opacity（不透明度）。

RGB 颜色模式 也有类似的透明度语法，即 rgba 。同样，前三个值的作用与 rgb 相同，第四个值是 alpha。示例如下：

css 复制代码

color: rgba(234, 45, 98, 0.33);

Alpha 只能用于 HSL、RGB 和十六进制颜色 ，不能为命名颜色 （如 green）添加 alpha 值。

不过，有一个专门表示 完全透明 的命名颜色关键字，即 transparent 。它等同于 rgba(0, 0, 0, 0)，可以像其他颜色关键字一样使用：

css 复制代码

color: transparent;

排版（Typography）

在本课程中，我们将重点学习 排版（typography） ，即在页面上排列文本的艺术。我们将学习以下内容：

如何设置和变换字体。
如何在页面上布局文本。
如何向网页添加外部字体。

网页上最重要的信息通常是文本。通过对文本进行样式设置，使页面内容更加易读和吸引人，可以显著提高用户体验。让我们开始吧！

Font Family

元素的字体可以使用 font-family 属性来更改

css 复制代码

h1 {
  font-family: Arial;
}

在上面的例子中，所有 <h1> 标题元素的字体被设置为 Arial。

多词值（Multi-Word Values）

当指定一个包含多个单词的字体（如 Times New Roman）时，建议使用引号（' '）将单词组合在一起，像这样：

css 复制代码

h1 {
  font-family: 'Times New Roman';
}

Web 安全字体（Web Safe Fonts）

有一类字体在所有浏览器和操作系统上都能保持一致，这些字体被称为Web 安全字体 。你可以在这里查看完整的 Web 安全字体列表。here.

后备字体和字体堆栈（Fallback Fonts and Font Stacks）

Web 安全字体是很好的后备字体，当首选字体不可用时，它们可以被使用。

css 复制代码

h1 {
  font-family: Caslon, Georgia, 'Times New Roman';
}

在上面的例子中，Georgia 和 Times New Roman 是 Caslon 的后备字体。当你指定一组字体时，这就是所谓的字体堆栈。字体堆栈通常包含一组外观相似的字体。在这种情况下，浏览器将首先尝试使用 Caslon 字体。如果 Caslon 不可用，它会尝试使用相似的字体 Georgia。如果 Georgia 也不可用，它会尝试使用 Times New Roman。

衬线字体和无衬线字体（Serif and Sans-Serif）

你可能会好奇，什么特征使得一种字体与另一种字体相似。Caslon、Georgia 和 Times New Roman 都是衬线字体（Serif fonts） 。衬线字体在每个字母的末端都有额外的细节，而**无衬线字体（Sans-Serif fonts）**则没有这些额外的细节。

衬线字体和无衬线字体

serif 和 sans-serif 也是关键字值，可以作为最终的后备字体，放在字体堆栈中，假如前面的字体都不可用。

衬线字体和无衬线字体

serif 和 sans-serif 也是关键字值，可以作为最终的后备字体，放在字体堆栈中，假如前面的字体都不可用。

css 复制代码

h1 {
  font-family: Caslon, Georgia, 'Times New Roman', serif;
}

字体粗细

在 CSS 中，font-weight 属性用于控制文本的粗细程度。它可以使用关键字值或数值来指定。

关键字值（Keyword Values）

font-weight 属性可以接受以下关键字值：

bold：加粗字体。
normal：正常字体（默认值）。
lighter：比元素的父级字体更细一级。
bolder：比元素的父级字体更粗一级。

数值值（Numerical Values）

数值范围从 1（最细）到 1000（最粗） ，但通常以 100 为步进使用：

400 等同于 normal（正常）。
700 等同于 bold（加粗）。

css 复制代码

.left-section {
  font-weight: 700;
}

.right-section {
  font-weight: bold; 
}

在上述示例中，.left-section 和 .right-section 类中的文本都会以加粗形式显示。

并非所有字体都支持数值形式的 font-weight，而且有些字体可能不支持所有的数值权重。因此，在使用 font-weight 之前，建议先查看所选字体支持的字体粗细级别。

Font Style

你还可以使用font-style 属性使文本变为斜体。

css 复制代码

h3 {
  font-style: italic;
}

`font-style` 属性

italic：使文本以斜体显示。
normal：正常显示文本（默认值）。

在上面的示例中，所有 <h3> 标题的文本都会以斜体显示。

文本转换（Text Transformation）

文本还可以使用 text-transform 属性设置为全部大写或小写。

css 复制代码

h1 {
  text-transform: uppercase;
}

在上面的示例中，所有 <h1> 元素的文本都会转换为大写，无论 HTML 文件中原始文本的大小写如何。此外，还可以使用 lowercase 值将文本格式化为 全小写。

为什么需要 `text-transform`？

既然 HTML 文件中可以直接输入大写或小写文本，为什么还要用 CSS 规则来格式化字母大小写呢？

保持代码整洁：如果在 HTML 中直接输入大写字母，可能会降低代码的可读性，而使用 CSS 进行转换可以让 HTML 代码更清晰。
统一页面风格 ：某些网站可能希望特定的元素始终以大写或小写显示。例如，新闻网站可能希望所有 <h1> 标题始终显示为大写，以强调重要信息。

文本的显示与布局

你已经学习了如何通过 字体系列（font-family） 、字重（font-weight） 、样式（font-style） 和 转换（text-transform） 来定义文本的样式。现在，我们来学习一些 文本在容器内的布局方式。

字母间距

letter-spacing 属性用于设置 字符之间的水平间距 。虽然不常调整字母间距，但在某些字体或样式下，增加或减少间距可以提高可读性。

该属性接受 像素（px）、em 等单位 的长度值。

css 复制代码

p {
  letter-spacing: 2px;
}

在上面的示例中，每个 <p> 段落中的字符 都会间隔 2 像素。

单词间距（Word Spacing）

word-spacing 属性用于设置 单词之间的间距 。虽然也不常使用，但在加粗或放大 文本时，调整单词间距可以提高可读性。

该属性也接受 像素（px）、em 等单位 的长度值。

css 复制代码

h1 {
  word-spacing: 0.3em;
}

在上面的示例中，单词之间的间距设置为 0.3em 。对于 单词间距 ，推荐使用 em 单位 ，这样可以根据字体大小自动调整间距。

行高（Line Height）

line-height 属性用于设置 每行文本的高度。该值可以是：

无单位数值（如 1.2） ：根据当前字体大小自动调整。
具体长度值（如 12px、5% 或 2em） 。

css 复制代码

p {
  line-height: 1.4;
}

在上面的示例中，每行文字的高度是 字体大小的 1.4 倍 。
推荐使用 无单位数值 ，这样当字体大小改变时，行高会自动适配 ，更加响应式。

文本对齐（Text Alignment）

text-align 属性用于 设置文本在父元素中的对齐方式。

css 复制代码

h1 {
  text-align: right;
}

在上面的示例中，<h1> 元素的文本被 右对齐 ，而不是默认的 左对齐。

text-align 可选值：

left（默认）：左对齐
right：右对齐
center：居中对齐
justify：两端对齐（自动调整空格，使文本左右对齐）

在线字体

之前，我们学习了网页安全字体（web safe fonts） ，它们是一组被各大浏览器和操作系统广泛支持 的字体。然而，你可以在网站上使用的字体远不止这些 ------网页字体（web fonts） 允许你通过丰富的在线字体来表达独特的风格。

免费字体服务

像 Google Fonts 和 Adobe Fonts 这样的免费字体服务 ，提供了大量可用的字体。你可以使用它们提供的 <link> 标签，在 HTML 文件中直接引入这些字体。

Google Fonts

Adobe Fonts

使用自托管的字体

如果你使用 Fonts.com 等付费字体服务 ，你可以下载字体文件 并将其与网站的其他文件一起托管。此时，你需要在 CSS 样式表中使用 @font-face 规则 来引用字体文件的路径，例如：

css 复制代码

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
       url('fonts/MyCustomFont.woff') format('woff');
}

这样，你就可以在 CSS 中使用 font-family: 'MyCustomFont'; 来应用该字体了。

使用link引入字体

在 Google Fonts 选择某种字体后，你会看到该字体的所有可用样式 （例如：粗体、斜体、不同字重等）。你可以挑选需要的样式并添加到你的网站中。

当你选择完字体和样式后，Google Fonts 会自动生成一个 <link> 元素 ，你可以将它添加到 HTML 文档的 <head> 标签内，例如：

html 复制代码

<head>
  <!-- 在 <head> 标签中添加 Google Fonts 提供的 <link> 代码 -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
</head>

这样，你的网页就可以访问 Google Fonts 提供的 Roboto 字体了！

如何在 CSS 中使用 Google Fonts？

在 CSS 里，你可以像使用其他字体一样，通过 font-family 属性来应用 Google Fonts：

css 复制代码

p {
  font-family: 'Roboto', sans-serif;
}

这样，所有 <p> 标签的文本都会使用 Roboto 字体 （如果用户设备上没有该字体，浏览器会回退到 sans-serif）。

使用 Google Fonts 只需要两步：

在 HTML <head> 中添加 <link> 代码，让网页加载 Google 提供的字体。
在 CSS 中使用 font-family，像普通字体一样应用它们。

使用 @font-face 添加 Web 字体

除了在 HTML 文档中使用 <link> 元素外，你还可以在 CSS 样式表 中使用 @font-face 规则来添加自定义字体。

字体文件格式

字体文件可以像其他网络资源一样被下载，它们有几种不同的格式：

OTF（OpenType Font）
TTF（TrueType Font）
WOFF（Web Open Font Format）
WOFF2（Web Open Font Format 2）

不同的字体格式适用于不同的浏览器 ，其中 WOFF2 是最先进 的格式。为了确保兼容性，建议在 @font-face 规则中同时包含 TTF、WOFF 和 WOFF2 格式的字体。

字体文件格式

字体文件可以像其他网络资源一样被下载，它们有几种不同的格式：

OTF（OpenType Font）
TTF（TrueType Font）
WOFF（Web Open Font Format）
WOFF2（Web Open Font Format 2）

如何使用 `@font-face` 规则？

我们以 Roboto 字体为例：

1. 下载字体文件

在 Google Fonts "Selected Families" 区域，点击 "Download" 按钮，将字体下载到你的电脑。下载的文件通常是 TTF 格式的。

如果你需要 WOFF 和 WOFF2 格式，可以使用在线字体转换工具 （可参考 MDN 的字体生成工具）。

2. 将字体文件放入项目目录

将下载的字体文件移动到你的网站项目文件夹，例如：

bash 复制代码

bash
复制编辑
/project-folder/
  ├── index.html
  ├── styles.css
  ├── fonts/
      ├── Roboto.woff2
      ├── Roboto.woff
      ├── Roboto.ttf

3. 在 CSS 中使用 `@font-face`

css 复制代码

@font-face {
  font-family: 'MyParagraphFont';
  src: url('fonts/Roboto.woff2') format('woff2'),
       url('fonts/Roboto.woff') format('woff'),
       url('fonts/Roboto.ttf') format('truetype');
}

@font-face 规则 ：用于定义自定义字体。建议将 @font-face 规则放在 CSS 样式表的顶部。
font-family ：给字体取一个自定义名称 （可以随意取名）。在此示例中，字体命名为 'MyParagraphFont'，因为它将用于段落文本。
src 属性 ：指定字体文件的路径和格式：
- 浏览器会按照从上到下 的顺序查找支持的字体格式，因此 woff2 放在最前面，因为它是最新、最优先的格式。

4. 在 CSS 中使用自定义字体

css 复制代码

p {
  font-family: 'MyParagraphFont', sans-serif;
}

这样，所有 <p> 段落 都会使用 'MyParagraphFont' （即 Roboto 字体）。如果浏览器不支持该字体，则会回退到 sans-serif。

起步和语法

CSS结构解析

规则集（Ruleset）术语

内联样式（Inline Style）术语

内联样式

多个内联样式

内联样式的适用场景

内部样式表（Internal Stylesheet）

内部样式表的作用

如何创建内部样式表

语法解析

外部样式表

链接css文件

选择器

类型

通配符

类选择器

多个类

ID选择器

属性选择器

伪类（Pseudo-class）

常见的伪类

伪类的语法

类（Classes）和 ID（IDs）

CSS 类（Classes）

CSS ID（IDs）

特异性

选择器的特异性顺序

避免过度使用 ID

选择器链

后代选择器（Descendant Combinator）

为什么使用后代选择器？

选择链与优先级

多重选择器

配置类型

字体

字体大小

字体粗细

text-align

颜色

透明度

背景图片

重要性（!important）

盒模型

介绍

高度和宽度

边框（Border）

边框曲度

如何创建一个完美的圆形边框？

内边距（Padding）

内边距的作用

内边距简写

外边距（Margin）

什么是 margin？

margin 的单独设置

auto

Margin 塌陷

最小和最大宽度

Overflow（溢出）

示例：一个图片的尺寸计算

如何处理溢出内容？

over在父元素上的作用

重置默认样式（Resetting Defaults）

如何重置默认样式

可见性（Visibility）

visibility 属性的取值

visibility: hidden 的特点

display: none 与 visibility: hidden 的区别

box-sizing

content-box

盒模型与 box-sizing

border-box

border-box 盒模型的特点

浮动

定位（position）

Position: Relative

position：absolute 绝对定位

position: fixed

Position: Sticky

什么是 `margin`？

`margin` 的单独设置

`visibility` 属性的取值

`visibility: hidden` 的特点

`display: none` 与 `visibility: hidden` 的区别

盒模型与 `box-sizing`

`border-box` 盒模型的特点

`position: sticky` 和 `position: fixed` 的区别

`z-index` 控制元素的层级

`z-index` 示例

`float` 属性的常见取值

什么时候应该用 `inline-block`，什么时候应该用 `float`？

`font-style` 属性

为什么需要 `text-transform`？

如何使用 `@font-face` 规则？

3. 在 CSS 中使用 `@font-face`