基本文本和字体样式 - 学习 Web 开发

基本文本和字体样式
=========

* Overview: Styling text
* 下一页

在这篇文章中，我们将带你开始掌握 CSS 的文字样式的旅程。这里我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。

|  |  |
| --- | --- |
| 前提： |
 基本的电脑操作，HTML 基础 (学习
 Introduction to HTML)，CSS 基础 (学习
 Introduction to CSS).
  |
| 目标： | 了解在网页上设计文本所需的基本属性和技术。 |

CSS 中的文字样式涉及什么？
---------------

正如你已经在你使用 HTML 和 CSS 完成工作时所经历的一样，元素中的文本是布置在元素的内容框中。以内容区域的左上角作为起点 (或者是右上角，是在 RTL 语言的情况下)，一直延续到行的结束部分。一旦达到行的尽头，它就会进到下一行，然后继续，再接着下一行，直到所有内容都放入了盒子中。文本内容表现地像一些内联元素，被布置到相邻的行上，除非到达了行的尽头，否则不会换行，或者你想强制地，手动地造成换行的话，你可以使用 `<br>` 元素。

**备注：** 如果上面的段落让你感到困惑，没关系，在继续之前，可以重新看看我们的 Box model 文件，复习盒模型的理论。

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

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

**备注：** 请记住，包含在元素中的文本是作为一个单一的实体。你不能将文字其中一部分选中或添加样式，如果你要这么做，那么你必须要用适合的元素来包装它们，比如 ( `<span>` 或者 `<strong>`), 或者使用伪元素，像::first-letter (选中元素文本的第一个字母), ::first-line (选中元素文本的第一行), 或者 ::selection (当前光标双击选中的文本)

字体
--

我们直接来看看样式字体的属性。在这个例子中，我们会在一个相同的 HTML 示例中应用一些不同的 CSS 属性，就像这样：

```html
<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

你可以在这找到完成版本 finished example on Github (也可以看源码 the source code.)

### 颜色

`color` 属性设置选中元素的前景内容的颜色 (通常指文本，不过也包含一些其他东西，或者是使用 `text-decoration` 属性放置在文本下方或上方的线 (underline overline)。

`color` 也可以接受任何合法的 CSS 颜色单位, 比如：

```css
p {
  color: red;
}
```

这将导致段落变为红色，而不是标准的浏览器默认的黑色，如下所示：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

### 字体种类

要在你的文本上设置一个不同的字体，你可以使用 `font-family` 属性，这个允许你为浏览器指定一个字体 (或者一个字体的列表)，然后浏览器可以将这种字体应用到选中的元素上。浏览器只会把在当前机器上可用的字体应用到当前正在访问的网站上；如果字体不可用，那么就会用浏览器默认的字体代替 default font. 下面是一个简单的例子：

```css
p {
  font-family: arial;
}
```

这段语句使所有在页面上的段落都采用 arial 字体，这个字体可在任何电脑上找到。

#### 网页安全字体

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

大多数时候，作为网页开发者，我们希望对用于显示我们的文本内容的字体有更具体的控制。问题在于，需要一个方法来知道当前正在浏览我们的网站网页的电脑，它有哪些可用字体。我们并不是总能在每种情况下都知道这一点，但是网络安全字体在几乎所有最常用的操作系统（Windows，Mac，最常见的 Linux 发行版，Android 和 iOS 版本）中都可用。

实际的 Web 安全字体列表将随着操作系统的发展而改变，但是可以认为下面的字体是网页安全的，至少对于现在来说 (它们中的许多都非常流行，这要感谢微软在 90 年代末和 21 世纪初期的倡议\*Core fonts for the Web\* )：

| 字体名称 | 泛型 | 注意 |
| --- | --- | --- |
| Arial | sans-serif |
 通常认为最佳做法还是添加 Helvetica 作为 Arial
 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica
 被认为具有更好的形状，即使 Arial 更广泛地可用。
  |
| Courier New | monospace |
 某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫
 Courier。使用 Courier New 作为 Courier
 的首选替代方案，被认为是最佳做法。
  |
| Georgia | serif |  |
| Times New Roman | serif |
 某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫
 Times。使用 Times 作为 Times New Roman
 的首选替代方案，被认为是最佳做法。
  |
| Trebuchet MS | sans-serif | 你应该小心使用这种字体——它在移动操作系统上并不广泛。 |
| Verdana | sans-serif |  |

**备注：** 在各种资源中，cssfontstack.com 网站维护了一个可用在 Windows 和 Mac 操作系统上使用的网页安全字体的列表，这可以帮助决策网站的安全性。

**备注：** 有一个可以下载来自一个网页的自定义字体的方法，允许你通过任何你想要的方法来定制你使用的字体：**网页字体**。这个有一点复杂，我们将在这个模块中的另一篇文章中讨论这一点。

#### 默认字体

CSS 定义了 5 个常用的字体名称：`serif`, `sans-serif`, `monospace`, `cursive`, 和 `fantasy`. 这些都是非常通用的，当使用这些通用名称时，使用的字体完全取决于每个浏览器，而且它们所运行的每个操作系统也会有所不同。这是一种糟糕的情况，浏览器会尽力提供一个看上去合适的字体。 `serif`, `sans-serif` 和 `monospace` 是比较好预测的，默认的情况应该比较合理，另一方面，`cursive` 和 `fantasy` 是不太好预测的，我们建议使用它们的时候应该稍微注意一些，多多测试。

五个名称定义如下：

| 名称 | 定义 | 示例 |
| --- | --- | --- |
| `serif` | 衬线字体，即有衬线的字体（衬线是指字体笔画尾端的小装饰，存在于某些印刷体字体中）。 |
```
My big red elephant
```
```

body {
  font-family: serif;
}
```
 |
| `sans-serif` | 无衬线字体。 |
```
My big red elephant
```
```

body {
  font-family: sans-serif;
}
```
 |
| `monospace` | 等宽字体，指包含的全部字符的宽度相同的字体，通常在编辑代码时使用。 |
```
My big red elephant
```
```

body {
  font-family: monospace;
}
```
 |
| `cursive` | 手写字体，对于英文字符而言通常具有顺滑的连接笔画以模拟手写效果。 |
```
My big red elephant
```
```

body {
  font-family: cursive;
}
```
 |
| `fantasy` | 装饰字体。 |
```
My big red elephant
```
```

body {
  font-family: fantasy;
}
```
 |

#### 字体栈

由于你无法保证你想在你的网页上使用的字体的可用性 (甚至一个网络字体可能由于某些原因而出错), 你可以提供一个**字体栈** (**font stack**)，这样的话，浏览器就有多种字体可以选择了。只需包含一个 `font-family` 属性，其值由几个用逗号分离的字体名称组成。比如

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

在这种情况下，浏览器从列表的第一个开始，然后查看在当前机器中，这个字体是否可用。如果可用，就把这个字体应用到选中的元素中。如果不可用，它就移到列表中的下一个字体，然后再检查。

在字体栈的最后提供一个合适的通用的字体名称是个不错的办法，这样的话，即使列出的字体都无法使用，浏览器至少可以提供一个还算合适的选择。为了强调这一点，如果没有其他选项可用，那么段落将被赋予浏览器的默认衬线字体 - 通常是 Time New Roman - 这对于 sans-serif 字体是不利的！

**备注：** 有一些字体名称不止一个单词，比如`Trebuchet MS` ，那么就需要用引号包裹。

#### 一个使用 font-family 的例子

让我们把它添加到之前的例子上，给段落一个 sans-serif 的字体。

```css
p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

这给我们以下结果：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

### 字体大小

在我们之前的模块中的CSS values and units 文章，我们回顾了length and size units. 字体大小 (通过 `font-size` 属性设置) 可以取大多数这些单位的值 (以及其他，比如百分比 percentages)，然而你在调整字体大小时，最常用的单位是：

* `px` (像素): 将像素的值赋予给你的文本。这是一个绝对单位，它导致了在任何情况下，页面上的文本所计算出来的像素值都是一样的。
* `em`: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更加具体的话，比如包含在父元素中的大写字母 M 的宽度) 如果你有大量设置了不同字体大小的嵌套元素，这可能会变得棘手，但它是可行的，如下图所示。为什么要使用这个麻烦的单位呢？当你习惯这样做时，那么就会变得很自然，你可以使用`em`调整任何东西的大小，不只是文本。你可以有一个单位全部都使用 em 的网站，这样维护起来会很简单。
* `rem`: 这个单位的效果和 `em` 差不多，除了 1`rem` 等于 HTML 中的根元素的字体大小， (i.e. `<html>`) ，而不是父元素。这可以让你更容易计算字体大小，但是遗憾的是， `rem` 不支持 Internet Explorer 8 和以下的版本。如果你的项目需要支持较老的浏览器，你可以坚持使用`em` 或 `px`, 或者是 polyfill 就像 REM-unit-polyfill. （这个单位在“CSS 的值和单位”一节也有讲解）

元素的 `font-size` 属性是从该元素的父元素继承的。所以这一切都是从整个文档的根元素——`<html>`开始，浏览器的 `font-size` 标准设置的值为 16px。在根元素中的任何段落 (或者那些浏览器没有设置默认大小的元素)，会有一个最终的大小值：16px。其他元素也许有默认的大小，比如 `<h1>` (en-US) 元素有一个 2em 的默认值，所以它的最终大小值为 32px。当你开始更改嵌套元素的字体大小时，事情会变得棘手。比如，如果你有一个 `<article>` 元素在你的页面上，然后设置它的 font-size 为 `1.5em` (通过计算，可以得到大小为 24px)，然后想让 `<article>` 元素中的段落获得一个计算值为 20px 的大小，那么你应该使用多少 em。

```html
<!-- document base font-size is 16px -->
<article>
  <!-- If my font-size is 1.5em -->
  <p>My paragraph</p>
  <!-- How do I compute to 20px font-size? -->
</article>
```

你需要将 em 的值设置为 20/24, 或者 `0.83333333em`. 这个计算可能比较复杂，所以当你设置的时候，你需要仔细一些。如果可以使用 rem 的话，那实现起来就变得简单不少，避免在可能的情况下设置容器元素的字体大小。

#### 一个简单的 size 示例

当调整你的文本大小时，将文档 (document) 的基础 `font-size` 设置为 10px 往往是个不错的主意，这样之后的计算会变得简单，所需要的 (r)em 值就是想得到的像素的值除以 10，而不是 16。做完这个之后，你可以简单地调整在你的 HTML 中你想调整的不同类型文本的字体大小。在样式表的指定区域列出所有`font-size`的规则集是一个好主意，这样它们就可以很容易被找到。

我们的新结果是这样的：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```css
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

### 字体样式、字体粗细、文本转换和文本装饰

CSS 提供了 4 种常用的属性来改变文本的样子：

* `font-style`: 用来打开和关闭文本 italic (斜体)。可能的值如下 (你很少会用到这个属性，除非你因为一些理由想将斜体文字关闭斜体状态)：
    + `normal`: 将文本设置为普通字体 (将存在的斜体关闭)
    + `italic`: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。
    + `oblique`: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
* `font-weight`: 设置文字的粗体大小。这里有很多值可选 (比如 *-light*, *-normal*, *-bold*, *-extrabold*, *-black*, 等等), 不过事实上你很少会用到 `normal` 和 `bold`以外的值：
    + `normal`, `bold`: 普通或者**加粗**的字体粗细
    + `lighter`, `bolder`: 将当前元素的粗体设置为比其父元素粗体更细或更粗一步。`100`–`900`: 数值粗体值，如果需要，可提供比上述关键字更精细的粒度控制。
* `text-transform`: 允许你设置要转换的字体。值包括：
    + `none`: 防止任何转型。
    + `uppercase`: 将所有文本转为大写。
    + `lowercase`: 将所有文本转为小写。
    + `capitalize`: 转换所有单词让其首字母大写。
    + `full-width`: 将所有字形转换成全角，即固定宽度的正方形，类似于等宽字体，允许拉丁字符和亚洲语言字形（如中文，日文，韩文）对齐。
* `text-decoration`: 设置/取消字体上的文本装饰 (你将主要使用此方法在设置链接时取消设置链接上的默认下划线。) 可用值为：
    + `none`: 取消已经存在的任何文本装饰。
    + `underline`: 文本下划线。
    + `overline`: 文本上划线
    + `line-through`: 穿过文本的线。你应该注意到 `text-decoration` 可以一次接受多个值，如果你想要同时添加多个装饰值，比如 `text-decoration: underline overline`.。同时注意 `text-decoration` 是一个缩写形式，它由 `text-decoration-line`, `text-decoration-style` 和 `text-decoration-color` 构成。你可以使用这些属性值的组合来创建有趣的效果，比如 `text-decoration: line-through red wavy`.

我们来看一下这几个属性添加到我们的例子中：

我们的新结果是这样的：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```css
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

### 文字阴影

你可以为你的文本应用阴影，使用 `text-shadow` 属性。这最多需要 4 个值，如下例所示：

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

4 个属性如下：

1. 阴影与原始文本的水平偏移，可以使用大多数的 CSS 单位 length and size units, 但是 px 是比较合适的。这个值必须指定。
2. 阴影与原始文本的垂直偏移;效果基本上就像水平偏移，除了它向上/向下移动阴影，而不是左/右。这个值必须指定。
3. 模糊半径 - 更高的值意味着阴影分散得更广泛。如果不包含此值，则默认为 0，这意味着没有模糊。可以使用大多数的 CSS 单位 length and size units.
4. 阴影的基础颜色，可以使用大多数的 CSS 颜色单位 CSS color unit. 如果没有指定，默认为 `black`.

**备注：** 正偏移值可以向右移动阴影，但也可以使用负偏移值来左右移动阴影，例如 `-1px -1px`.

#### 多种阴影

你可以通过包含以逗号分隔的多个阴影值，将多个阴影应用于同一文本，例如：

```css
text-shadow:
  -1px -1px 1px #aaa,
  0px 4px 1px rgba(0, 0, 0, 0.5),
  4px 4px 5px rgba(0, 0, 0, 0.7),
  0px 0px 7px rgba(0, 0, 0, 0.4);
```

如果我们把这个样式应用到我们 "Tommy the cat" 示例中的 `<h1>` (en-US) 元素，就像这样：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 26px;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 14px;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

**备注：** 你可以看到更多有趣的关于 `text-shadow` 使用的示例在 Moonlighting with CSS text-shadow.

文本布局
----

有了基本的字体属性，我们来看看我们可以用来影响文本布局的属性。

### 文本对齐

`text-align` 属性用来控制文本如何和它所在的内容盒子对齐。可用值如下，并且在与常规文字处理器应用程序中的工作方式几乎相同：

* `left`: 左对齐文本。
* `right`: 右对齐文本。
* `center`: 居中文字
* `justify`: 使文本展开，改变单词之间的差距，使所有文本行的宽度相同。你需要仔细使用，它可以看起来很可怕。特别是当应用于其中有很多长单词的段落时。如果你要使用这个，你也应该考虑一起使用别的东西，比如 `hyphens`，打破一些更长的词语。

如果我们应用 `text-align: center;` 到我们例子中的 `<h1>` (en-US) 元素中，结果如下：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}
```

### 行高

`line-height` 属性设置文本每行之间的高，可以接受大多数单位 length and size units，不过也可以设置一个无单位的值，作为乘数，通常这种是比较好的做法。无单位的值乘以 `font-size` 来获得 `line-height`。当行与行之间拉开空间，正文文本通常看起来更好更容易阅读。推荐的行高大约是 1.5–2 (双倍间距。) 所以要把我们的文本行高设置为字体高度的 1.5 倍，你可以使用这个：

```css
line-height: 1.5;
```

把这个样式应用到我们示例中的 `<p>` 元素，结果如下：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
```

### 字母和单词间距

`letter-spacing` 和 `word-spacing` 属性允许你设置你的文本中的字母与字母之间的间距、或是单词与单词之间的间距。你不会经常使用它们，但是可能可以通过它们，来获得一个特定的外观，或者让较为密集的文字更加可读。它们可以接受大多数单位 length and size units.

所以作为例子，如果我们把这个样式应用到我们的示例中的 `<p>` 段落的第一行：

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

我们会得到下面的结果：
```

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>
```

```
html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
  text-shadow:
    -1px -1px 1px #aaa,
    0px 2px 1px rgba(0, 0, 0, 0.5),
    2px 2px 2px rgba(0, 0, 0, 0.7),
    0px 0px 3px rgba(0, 0, 0, 0.4);
  text-align: center;
}

h1 + p {
  font-weight: bold;
}

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

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
}
```

### 其他一些值得看一下的属性

以上属性让你了解如何开始在网页上设置文本，但是你可以使用更多的属性。我们只是想介绍最重要的。一旦你习惯使用上面的内容，你还应该探索以下几点：

Font 样式：

* `font-variant`: 在小型大写字母和普通文本选项之间切换。
* `font-kerning`: 开启或关闭字体间距选项。
* `font-feature-settings`: 开启或关闭不同的 OpenType 字体特性。
* `font-variant-alternates`: 控制给定的自定义字体的替代字形的使用。
* `font-variant-caps`: 控制大写字母替代字形的使用。
* `font-variant-east-asian` (en-US): 控制东亚文字替代字形的使用，像日语和汉语。
* `font-variant-ligatures`: 控制文本中使用的连写和上下文形式。
* `font-variant-numeric`: 控制数字，分式和序标的替代字形的使用。
* `font-variant-position`: 控制位于上标或下标处，字号更小的替代字形的使用。
* `font-size-adjust`: 独立于字体的实际大小尺寸，调整其可视大小尺寸。
* `font-stretch`: 在给定字体的可选拉伸版本中切换。
* `text-underline-position`: 指定下划线的排版位置，通过使用 `text-decoration-line` 属性的`underline` 值。
* `text-rendering`: 尝试执行一些文本渲染优化。

文本布局样式：

* `text-indent`: 指定文本内容的第一行前面应该留出多少的水平空间。
* `text-overflow`: 定义如何向用户表示存在被隐藏的溢出内容。
* `white-space`: 定义如何处理元素内部的空白和换行。
* `word-break`: 指定是否能在单词内部换行。
* `direction`: 定义文本的方向 (这取决于语言，并且通常最好让 HTML 来处理这部分，因为它是和文本内容相关联的。)
* `hyphens`: 为支持的语言开启或关闭连字符。
* `line-break`: 对东亚语言采用更强或更弱的换行规则。
* `text-align-last`: 定义一个块或行的最后一行，恰好位于一个强制换行前时，如何对齐。
* `text-orientation`: 定义行内文本的方向。
* `word-wrap`: 指定浏览器是否可以在单词内换行以避免超出范围。
* `writing-mode`: 定义文本行布局为水平还是垂直，以及后继文本流的方向。
Font 简写
-------

许多字体的属性也可以通过 `font` 的简写方式来设置 . 这些是按照以下顺序来写的： `font-style`, `font-variant`, `font-weight`, `font-stretch`, `font-size`, `line-height`, and `font-family`.

如果你想要使用 `font` 的简写形式，在所有这些属性中，只有 `font-size` 和 `font-family` 是一定要指定的。

`font-size` 和 `line-height` 属性之间必须放一个正斜杠。

一个完整的例子如下所示：

```css
font:
  italic normal bold normal 3em/1.5 Helvetica,
  Arial,
  sans-serif;
```

动手练习：使用样式文本
-----------

在这个动手练习中，我们没有任何具体的练习来做：我们只是希望你和一些字体/文本布局属性相处地愉快，看看你可以制作什么！你可以使用离线 HTML / CSS 文件进行此操作，也可以将代码输入到下面的实时可编辑示例中。

如果你犯了错误，你可以使用 Reset 按钮来复原。
```

<div
 class="body-wrapper"
 style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
  <h2>HTML Input</h2>
  <textarea
 id="code"
 class="html-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
  <p>Some sample text for your delight</p></textarea
 >

  <h2>CSS Input</h2>
  <textarea
 id="code"
 class="css-input"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
p {

  }</textarea
 >

  <h2>Output</h2>
  <div
 class="output"
 style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
  <div class="controls">
    <input
 id="reset"
 type="button"
 value="Reset"
 style="margin: 10px 10px 0 0;" />
  </div>
</div>
```

```
var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");

var styleElem = document.createElement("style");
var headElem = document.querySelector("head");
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function () {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
```

小结
--

我们希望你在本篇文章中享受与文本在一起的时光！下篇文章会介绍所有你需要知道的关于 HTML 列表的样式。

* Overview: Styling text
* 下一页


Web 字体 - 学习 Web 开发

Web 字体
======

* 上一页
* Overview: Styling text
* 下一页

在模块的第一篇文章中，我们探讨了用于样式化字体和文本的基本 CSS 特性。在这篇文章中，我们将更进一步，详细地探索 web 字体——它们允许你下载自定义字体和你的 web 页面，以允许更多不同的、自定义的文本样式。

|  |  |
| --- | --- |
| 前提： |
 基本计算机素养，HTML 基础 (学习
 Introduction to HTML), CSS 基础 (学习Introduction to CSS),
 CSS 文本和字体基础 。
  |
| 目标： | 学习如何将 web 字体应用到 web 页面，使用第三方服务，或者编写自己的代码。 |

字体种类回顾
------

正如我们在基本文本和字体样式中所看到的那样，应用到你的 HTML 的字体可以使用 `font-family`属性来控制。你需要提供一个或多个字体种类名称，浏览器会在列表中搜寻，直到找到它所运行的系统上可用的字体。

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

这个系统运行良好，但是对于传统的 web 开发人员来说，字体选择是有限的。只有少数几种字体可以保证兼容所有流行的操作系统——这就是所谓的 Web-safe 字体。你可以使用字体堆栈来指定可选择的字体，后面是 Web-safe 的替代选项，然后是默认的系统字体，但是为了确保你的设计在每种字体中都显示正常，这样增加了测试的开销。

Web 字体
------

但是还有一种选择，它非常有效，回到 IE 版本 6。Web 字体是一种 CSS 特性，允许你指定在访问时随你的网站一起下载的字体文件，这意味着任何支持 Web 字体的浏览器都可以使用你指定的字体。太酷啦！所需的语法如下所示：

首先，在 CSS 的开始处有一个`@font-face`块，它指定要下载的字体文件：

```css
@font-face {
  font-family: "myFont";
  src: url("myFont.ttf");
}
```

在这个下面，你可以使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你喜欢的任何东西上，比如说：

```css
html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}
```

语法确实比这更复杂，下面我们将详细介绍。

关于网页字体有两件重要的事情要记住：

1. 浏览器支持不同的字体格式，因此你需要多种字体格式以获得良好的跨浏览器支持。例如，大多数现代浏览器都支持 WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web 开放字体格式版本 1 和 2)，它是最有效的格式，但是旧版本 IE 只支持 EOT (Embedded Open Type，嵌入式开放类型) 的字体，你可能需要包括一个 SVG 版本的字体支持旧版本的 iPhone 和 Android 浏览器。我们将向你展示如何生成所需的代码。
2. 字体一般都不能自由使用。你必须为他们付费，或者遵循其他许可条件，比如在代码中 (或者在你的站点上) 提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。

**备注：** Web 字体作为一种技术从 Internet Explorer 4 开始就得到了的支持！

自主学习:web 字体示例
-------------

记住这一点，让我们从最初的原则构建一个基本的 web 字体示例。使用嵌入的 live 示例很难演示这一点，因此，我们希望你按照下面几节中详细介绍的步骤来了解这个过程。

你应该使用 web-font-start.html 和 web-font-start.css 文件作为开始添加到你的代码中（又见预览版。）现在，在你的电脑上的一个新目录中复制这些文件。在 `web-font-start.css`文件中，你将找到一些最小的 CSS 来处理这个示例的基本布局和排版。

### 查找字体

 对于本例，我们将使用两种 web 字体，一种用于标题，另一种用于正文文本。首先，我们需要找到包含字体的字体文件。字体是由字体铸造厂创建的，并且存储在不同的文件格式中。
 通常有三种类型的网站可以获得字体：

* 免费的字体经销商：这是一个可以下载免费字体的网站 (可能还有一些许可条件，比如对字体创建者的信赖)。比如： Font Squirre，dafont 和 Everything Fonts。
* 收费的字体经销商：这是一个收费则字体可用的网站，例如fonts.com或myfonts.com。你也可以直接从字体铸造厂中购买字体，例如Linotype，Monotype 或 Exljbris。
* 在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见使用在线字体服务。

让我们找到一些字体！前往Font Squirrel 并选择两种字体——一种用于标题的有趣的字体 (可能是一种不错的显示字体或无衬线字体)，和一种用于段落，稍微不那么华丽，更易于阅读的字体。当你找到每种字体时，按下下载按钮，并将该文件保存在与你先前保存的 HTML 和 CSS 文件相同的目录中。无论它们是 TTF(True Type Fonts)) 还是 OTF(Open Type 字体) 都不重要。

在每种情况下，都要解压字体包 (Web 字体通常分布在包含字体文件和许可信息的 ZIP 文件中。) 你可能会在包中发现多个字体文件，一些字体是作为一个具有不同变体的家庭分布的，例如，瘦、中、粗体、斜体、斜体等等。对于这个例子，我们只是想让你自己考虑一个单一的字体文件。

**备注：** 在右边栏的“查找字体”部分中，你可以单击不同的标记和分类来筛选显示的选项。

### 生成所需代码

现在你需要生成所需的代码 (以及字体格式)。对于每种字体，遵循以下步骤：

1. 确保你已经满足了任何许可证的要求，如果你打算在一个商业和/或 Web 项目中使用它。
2. 前往 Fontsquirrel Webfont Generator.
3. 使用上传字体按钮上传你的两个字体文件。
4. 勾选复选框，“是的，我上传的字体符合网络嵌入的合法条件。
5. 点击下载你的套件（kit）。

在生成器完成处理之后，你应该得到一个 ZIP 文件，将它保存在与 HTML 和 CSS 相同的目录中。

### 在演示中实现代码

在这一点上解压你刚刚生成的 webfont 套件。在解压的目录中，你将看到三个有用的条目：

* 每个字体的多个版本：（比如 `.ttf`, `.woff`, `.woff2`…… 随着浏览器支持需求的改变，提供的字体将随着时间的推移而不断更新。）正如上面提到的，跨浏览器支持需要使用多种字体——这是 Fontsquirrel 的方法，确保你得到了你需要的一切。
* 每个字体的一个演示 HTML 文件在你的浏览器中加载，看看在不同的使用环境下字体会是什么样子。
* 一个 `stylesheet.css` 文件，它包含了你需要的生成好的 @font-face 代码。

要在演示中实现这些字体，请遵循以下步骤：

1. 将解压缩的目录重命名为简易的目录，比如`fonts`
2. 打开 `stylesheet.css` 文件，把包含在你的网页中的 `@font-face` 块复制到你的 `web-font-start.css` 文件——你需要把它们放在最上面，在你的 CSS 之前，因为字体需要导入才能在你的网站上使用。
3. 每个`url()`函数指向一个我们想要导入到我们的 CSS 中的字体文件——我们需要确保文件的路径是正确的，因此，在每个路径的开头添加`fonts/` （必要时进行调整）。
4. 现在，你可以在字体栈中使用这些字体，就像任何 web 安全或默认的系统字体一样。
 例如：

```css
font-family: "zantrokeregular", serif;
```

你应该得到一个演示页面，上面有一些漂亮的字体。因为不同字体的字体大小不同，你可能需要调整大小、间距等，以区分外观和感觉。

![](/zh-CN/docs/Learn/CSS/Styling_text/Web_fonts/web-font-example.png)

**备注：** 如果对于要让它正常工作你有任何问题，可以自由地将你的版本与我们完成的文件进行比较——见 web-font-finished.html 和 web-font-finished.css (运行完成的示例)。

使用在线字体服务
--------

在线字体服务通常会为你存储和服务字体，这样你就不用担心写`@font-face`代码了，通常只需要在你的网站上插入一两行代码就可以让一切都运行。例子包括Typekit 和Cloud.typography。大多数这些服务都是基于订阅的，除了Google Fonts，这是一个有用的免费服务，特别是对于快速的测试工作和编写演示。

大多数这些服务都很容易使用，所以我们不会详细地介绍它们。让我们快速浏览一下 Google Fonts，这样你就能明白它的意思了。再次的，使用`web-font-start.html` 和 `web-font-start.css` a 的副本作为你的开始。

1. 前往 Google Fonts.
2. 使用左边的过滤器来显示你想要选择的字体类型，并选择一些你喜欢的字体。
3. 要选择字体种类，按下按钮旁边的 ⊕ 按钮。
4. 当你选择好字体种类时，按下页面底部的\*[Number]\* 种类选择。
5. 在生成的屏幕中，首先需要复制所显示的 HTML 代码行，并将其粘贴到 HTML 文件的头部。将其置于现有的`<link>`元素之上，使得字体是导入的，然后在你的 CSS 中使用它。
6. 然后，你需要将 CSS 声明复制到你的 CSS 中，以便将自定义字体应用到你的 HTML。

**备注：** 如果你需要对比我们的，你可以在 google-font.html和google-font.css找到完整版本的。（见预览版）

关于 @font-face 的更多细节
-------------------

让我们来探索由 fontsquirrel 为你生成的`@font-face`语法。这是其中一个块的样子：

```css
@font-face {
  font-family: "ciclefina";
  src: url("fonts/cicle\_fina-webfont.eot");
  src:
    url("fonts/cicle\_fina-webfont.eot?#iefix") format("embedded-opentype"),
    url("fonts/cicle\_fina-webfont.woff2") format("woff2"),
    url("fonts/cicle\_fina-webfont.woff") format("woff"),
    url("fonts/cicle\_fina-webfont.ttf") format("truetype"),
    url("fonts/cicle\_fina-webfont.svg#ciclefina") format("svg");
  font-weight: normal;
  font-style: normal;
}
```

这被称为"bulletproof @font-face syntax（刀枪不入的 @font-face 语法）", 这是 Paul Irish 早期的一篇文章提及后 @font-face 开始流行起来 (Bulletproof @font-face Syntax。让我们来看看它是怎么做的：

* `font-family`：这一行指定了你想要引用的字体的名称。你可以把它作为你喜欢的任何东西，只要你在你的 CSS 中始终如一地使用它。
* `src`：这些行指定要导入到你的 CSS(`url`部分) 的字体文件的路径，以及每种字体文件的格式 (`format`部分)。后面的部分不是必要的，但是声明它是很有用的，因为它允许浏览器更快地找到可以使用的字体。可以列出多个声明，用逗号分隔——浏览器会搜索并使用它能找到的第一个——因此，最好是把新的、更好的格式比如 WOFF2 放在前面，把偏老的，不是那么好的格式像 TTF 这样的放在后面。唯一的例外是 EOT 字体——他们首先在旧版本的 IE 中修复了几个 bug，这样它就会尝试使用它找到的第一件东西，即使它不能真正使用字体。
* `font-weight`/`font-style`: 这些行指定字体的粗细，以及它是否斜体。如果你正在导入相同字体的多个粗细，你可以指定它们的粗细/样式，然后使用不同的`font-weight`/`font-style`来选择它们之间的不同值，而不必调用字体种类不同名称的所有不同成员。Roger Johansson 写的 @font-face tip: define font-weight and font-style to keep your CSS simple 更详细地说明了该做些什么。

**备注：** 你还可以为你的 web 字体指定特定的`font-variant` 和 `font-stretch` ) 值。在较新的浏览器中，你还可以指定一个`unicode-range` (en-US)值，这是一个你需要使用什么 web 字体的特定范围的字符——在支持浏览器中，只有指定的字符才会被下载，省去了不必要的下载。Drew McLellan 写的Creating Custom Font Stacks with Unicode-Range在如何利用这个问题上提供了一些有用的建议。

总结
--

既然你已经完成了我们关于文本样式基础的文章，现在是时候用我们对模块的评估来测试你的理解了，为社区学校的主页进行排版。

* 上一页
* Overview: Styling text
* 下一页


CSS 常见问题 - 学习 Web 开发

CSS 常见问题
========

在本篇文章中，你会发现一些有关 CSS 的常见问题，这些问题及其解答可能会有助于你成为一名网站开发人员。

为什么有效的 CSS 没有正确的渲染？
-------------------

浏览器使用 `DOCTYPE` 声明来选择是否使用更符合 Web 标准或兼容旧浏览器缺陷的模式。在你的 HTML 的开始使用一个正确的和现代的 `DOCTYPE` 声明将改善浏览器标准执行。

现代浏览器主要有两种渲染模式：

* *怪异模式*：又称向后兼容模式，允许按照旧版浏览器使用的非标准渲染规则，按作者的意图呈现旧版网页。如果文档中存在不完整、不正确或缺失的 `DOCTYPE` 声明，或已知的 2001 年以前常用的 `DOCTYPE` 声明，则会以怪异模式渲染。
* *标准模式*：浏览器试图严格遵守 W3C 标准。新的 HTML 页面预计是为符合标准的浏览器设计的，因此，带有现代 `DOCTYPE` 声明的页面将使用标准模式渲染。

有三分之一的基于 Gecko 的浏览器处于接近标准模式，只是有一些怪异行为。

这是最常用的触发标准模式的 `DOCTYPE` 声明：

```html
<!doctype html>
```

你应该尽可能使用上述 doctype 声明。还有其他有效的传统 doctype 说明，它们会触发标准模式或接近标准模式：

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
```

为什么有效的 CSS 完全没有被渲染？
-------------------

可能的原因如下：

* 引入的 CSS 文件路径写错了。
* 为了使浏览器渲染样式文件，CSS 样式表必须用 `text/css` 的 MIME 类型。如果 Web 服务器没有使用这种类型处理文件，则 CSS 也不会被应用。
`id` 和 `class` 有什么不同？
---------------------

HTML 元素可以拥有一个 `id` 和（或）`class` 属性。`id` 属性为元素指定应用一个有效名称，只能有一个具有该名称的元素。`class` 属性指定一个类名的元素，而这个名称可以被页面内的许多元素被使用。CSS 允许你可以对特定的 `id` 和/或类名的元素应用样式。

* 当你想要将样式规则应用于多个块和元素时，你应该使用特定于类的样式。
* 当你想给一个特定元素或块应用样式规则时就使用特定于 id 的样式。此样式将只用于与该特定 id 匹配的元素。

一般建议尽量使用类，只有在特定用途（如连接标签和表单元素或用于必须在语义上唯一的样式元素）绝对必要时才使用 id：

* 使用类名可以让样式具有可扩展性——即使目前只有一个元素使用这个规则集来定义样式，未来可能会添加更多。
* 类名可以让你同时为多个元素赋予样式，减少样式表的大小，避免了为每一个 id 选择器撰写同样的样式信息。越小的样式表带来的性能体验也就越好。
* 类名选择器比 id 选择器的优先级更低，所以可以很方便地覆盖它们。

**备注：** 参见 CSS 选择器，以了解详情。

我如何还原属性的默认值？
------------

最初 CSS 没有提供“default”关键字和还原默认属性的值，唯一途径是显式地重新声明该属性。例如：

```css
/\* 标题元素的默认颜色为黑色 \*/
h1 {
  color: red;
}
h1 {
  color: black;
}
```

从 CSS2 开始，情况就不一样了。关键字 initial 现在是一个有效的 CSS 属性值。它将给定的 CSS 属性值重置为默认值。

```css
/\* 标题元素的默认颜色为黑色 \*/
h1 {
  color: red;
}
h1 {
  color: initial;
}
```

我如何才可以从一个样式中衍生出另一种样式？
---------------------

CSS 并不完全允许用一种样式来定义另一种样式。但是，将多个类分配给单个元素，可以提供相同的效果。CSS 变量也提供了一种方法来定义在多处复用的样式信息。

我该如何给一个元素分配多个类？
---------------

HTML 元素可以通过列出的类属性，用空格分开它们。

```html
<style>
 .news {
 background: black;
 color: white;
 }
 .today {
 font-weight: bold;
 }
</style>

<div class="news today">这是今天的新闻内容。</div>
```

如果两个规则中都声明了相同的属性，则首先通过特异性解决冲突，然后根据 CSS 声明的顺序解决冲突。`class` 属性中类的顺序与此无关。

为什么我的样式规则不能正确地工作？
-----------------

在语法上正确的样式规则可能在某些情况下不适用。你可以使用调试工具 *CSS 面板*的规则视图来调试这类问题。下面列出了最常见的忽略样式规则的实例：

### HTML 元素层次结构

CSS 应用于 HTML 元素依靠于元素的层次结构。在任何 CSS 特异性或优先级规则中，子元素定义的样式会覆盖父元素的样式。

```css
.news {
  color: black;
}
.corpName {
  font-weight: bold;
  color: red;
}
```

```html
<!-- news 的文字是黑色的，但是 corpName 是红色且加粗的 -->
<div class="news">
  (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on
  Thursday...
</div>
```

在某些复杂的 HTML 层级中，如果某条规则看起来被忽略了，请检查该元素是否处于拥有其他样式的另一个元素之内。

### 显式重定义样式规则

在 CSS 样式表中，顺序**非常**重要。如果先定义了一个规则，然后又重新定义了同样的规则，会使用最后一个定义。

```css
#stockTicker {
  font-weight: bold;
}
.stockSymbol {
  color: red;
}
/\* 其他规则 \*/
/\* 其他规则 \*/
/\* 其他规则 \*/
.stockSymbol {
  font-weight: normal;
}
```

```html
<!-- 除了”GE“以外，大部分文字都是加粗的，“GE”本身是红色不加粗的 -->
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0 ...</div>
```

为了避免此类错误，请对特定选择器仅定义一次规则，将属于那个选择器的规则归类于此组。

### 使用简写属性

使用简写属性的好处是语法更加紧凑。仅使用一部分简写属性完全没有问题，但要注意，没有声明的属性将自动重置为默认状态，这意味着单个属性较靠前的规则可能会被隐式覆盖。

```css
#stockTicker {
  font-size: 12px;
  font-family: Verdana;
  font-weight: bold;
}
.stockSymbol {
  font: 14px Arial;
  color: red;
}
```

```html
<div id="stockTicker">NYS: <span class="stockSymbol">GE</span> +1.0 ...</div>
```

在前一个示例中，问题发生在不同元素的规则中；但在同一个元素中问题也可能出现，因为顺序是**重要**的。

```css
#stockTicker {
  font-weight: bold;
  font: 12px Verdana; /\* font-weight 现在为 normal \*/
}
```

### 使用 `*` 选择器

`*` 通配符选择器可以指代任何元素，必须小心使用。

```css
body \* {
  font-weight: normal;
}
#stockTicker {
  font: 12px Verdana;
}
.corpName {
  font-weight: bold;
}
.stockUp {
  color: red;
}
```

```html
<div id="section">
  NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
</div>
```

在这个示例中，`body *` 选择器应用于 body 内部任何层级的所有元素，包含了 `.stockUp` 类。故应用于 `.corpName` 类的 `font-weight: bold;` 样式就会被应用于所有元素的 `font-weight: normal;` 覆盖。

由于速度缓慢，尽量不要使用 \* 选择器，特别是不作为选择器的首个元素时。

### CSS 中的优先级

当某个元素应用了多个规则时，规则的选择依赖于样式的优先级。内联样式（HTML 的 `style` 属性）最高，ID 选择器次之，再其次是类选择器，最后是元素名称选择器。`<div>` 的文本颜色将是红色的。

```css
div {
  color: black;
}
#orange {
  color: orange;
}
.green {
  color: green;
}
```

```html
<div id="orange" class="green" style="color: red;">我是红的</div>
```

当选择器具有多个部分时，规则会更加复杂。有关优先级计算的更多信息，请参阅 CSS 优先级文档。

-moz-\*， -ms-\*， -webkit-\*， -o-\* 以及 -khtml-\* 属性有什么用？
-------------------------------------------------------

这些被称为*前缀属性*的属性是 CSS 标准的扩展。这些是出于测试目的的使用，不至于污染标准命名空间，防止标准扩展时产生兼容性问题。

不推荐在生产环境网站中使用这些属性，它们已经产生了巨大的网页兼容性混乱。例如，很多开发者只使用了 `-webkit-` 前缀版本的属性，但非前缀的版本已经在所有浏览器中得到支持，没有基于 Webkit 的浏览器很有可能会在今后丢失显示效果。这个问题过于严重，以至于其他浏览器也开始实现 `-webkit-` 前缀属性的别名以提升网站兼容性，即兼容性动态标准。

实际上，大部分浏览器在实现实验性功能时都不使用 CSS 前缀，或者仅在 Nightly 浏览器版本或相似机制上实现它们。

如果需要使用前缀，建议先写带前缀的属性，然后再写不带前缀的标准版本。这样就可以在标准版本支持的时候覆盖掉前缀版本。例如：

```css
-webkit-text-stroke: 4px navy;
text-stroke: 4px navy;
```

**备注：** 为更深层次了解处理前缀属性，请参阅跨浏览器测试模块的处理常见的 HTML 和 CSS 问题——处理 CSS 前缀。

**备注：** 请参阅 Mozilla CSS 扩展 (en-US)和 WebKit CSS 扩展，以了解浏览器前缀 CSS 属性的列表。

z-index 属性与定位有什么关系？
-------------------

z-index 属性指定了元素的栈序。

具有较高 z-index/栈序的元素总是渲染于具有较低 z-index/栈序的元素之前。z-index 只会在有着指定 position（`position:absolute`、`position:relative` 或 `position:fixed`）的元素上工作。

**备注：** 请参阅定位文章，特别是介绍 z-index 部分来深入学习。


使用 CSS 添加文档内容 - 学习 Web 开发

使用 CSS 添加文档内容
=============

本文介绍了一些通过 CSS 改变文档内容的方法。这样，仅修改样式表你就能把文本内容及图片添加到文档。

CSS 的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。当内容与文档结构紧密相关的时候，你可以在样式表中定义文本和图片内容。

**备注：** 样式表中指定的内容不会成为 DOM 的一部分。

在样式表中指定内容会使事情变得复杂：你可能有多个语言版本的文档共享同一个样式表。如果样式表的一部分需要翻译，这就意味着你需要将这部分单独保存在多个样式表中，并在不同语言的文档中引用。

如果你指定的内容由通用符号和图片组成的话，就不存在这个问题。

示例
--

### 文本内容

CSS 可以在元素的前后插入文本：在选择器的后面加上 `::before` 或 `::after`。在声明中，指定 `content` 属性，并设置文本内容。

#### HTML

```html
A text where I need to <span class="ref">something</span>
```

#### CSS

```css
.ref::before {
  font-weight: bold;
  color: navy;
  content: "Reference ";
}
```

#### 结果

样式表默认使用 UTF-8 字符集。但也可以通过 link 属性或样式表以及其他方式指定其他字符集。参见 CSS 规范中的 4.4 CSS style sheet representation。

还可以通过转义机制（通过反斜杠转义）指定单个字符。比如，“\265B”是国际象棋黑皇后的符号 ♛。详细内容请参见 Referring to characters not represented in a character encoding 和 CSS 规范中的 Characters and case。

### 图片内容

可以通过将 `content` 属性值设置为某个图片的 URL，可以将图片插到元素的前面或后面。

下面这条规则在所有类名包含 `glossary` 的 a 标签后面插入一个空格和一个图标：

#### HTML

```html
<a href="developer.mozilla.org" class="glossary">developer.mozilla.org</a>
```

#### CSS

```css
a.glossary::after {
  content: " " url("glossary-icon.gif");
}
```

#### 结果


CSS 的值与单位 - 学习 Web 开发

CSS 的值与单位
=========

* 上一页
* Overview: Building blocks
* 下一页

CSS 中使用的每个属性都允许拥有一个或一组值，查看 MDN 上的任何属性页将帮助你理解对任何特定属性有效的值。在本节课中，我们将学习一些最常用的值和单位。

|  |  |
| --- | --- |
| 前提： | 基本的计算机知识、安装基本的软件、文件处理基本知识、HTML 基础知识（学习 HTML 入门），以及 CSS 如何工作的基本常识（如果完全不了解 CSS，请移步学习 CSS 第一步。） |
| 目标： | 了解 CSS 属性中使用的不同类型的值和单位。 |

什么是 CSS 的值？
-----------

在 CSS 规范和 MDN 的属性页上，你将能够发现值的存在，因为它们将被尖括号包围，如 `<color>` 或 `<length>`。当你看到值 `<color>` 对特定属性有效时，这意味着你可以使用任何有效的颜色作为该属性的值，如 `<color>` 参考页面所列。

**备注：** 你还将看到被称为数据类型的 CSS 值。这些术语基本上是可以互换的——当你在 CSS 中看到一些被称为数据类型的东西时，它实际上只是一种表示值的奇特方式。

**备注：** 是的，CSS 值倾向于使用尖括号表示，以区别于 CSS 属性（例如 `color` 属性和 <color> 数据类型）。你可能还会混淆 CSS 数据类型和 HTML 元素，因为它们都使用尖括号，但这不太可能——它们在完全不一样的上下文中使用。

在下面的例子中，我们使用关键字设置标题的颜色，使用 `rgb()` 函数设置背景：

```css
h1 {
  color: black;
  background-color: rgb(197, 93, 161);
}
```

CSS 中的值类型是一种定义了一些可使用的值的集合的方式。这意味着如果你看到的 `<color>` 是有效的，那么你就不需要考虑可以使用哪种类型——不管是关键字、十六进制值还是 `rgb()` 函数等都是有效的。如果浏览器支持这些可用的 `<color>` 值，则可以使用它们当中的任意一个。MDN 上针对每个值类型的页面将提供有关浏览器支持的信息。例如，如果你查看 `<color>` 的页面，你将看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持。

让我们来看看你可能经常遇到的一些值和单位类型，并提供一些示例，以便你尝试使用各种值的可能性。

数字、长度和百分比
---------

你可能会发现自己在 CSS 中使用了各种数值数据类型。以下全部归类为数值：

| 数值类型 | 描述 |
| --- | --- |
| `<integer>` | `<integer>` 是一个整数，比如 `1024` 或 `-55`。 |
| `<number>` | `<number>` 表示一个小数——它可能有小数点后面的部分，也可能没有，例如 `0.255`、`128` 或 `-1.2`。 |
| `<dimension>` | `<dimension>` 是一个 `<number>` 它有一个附加的单位，例如 `45deg`、`5s` 或 `10px`。`<dimension>` 是一个伞形类别，包括
 `<length>`、`<angle>`、`<time>` 和
 `<resolution>`
 类型。
  |
| `<percentage>` | `<percentage>` 表示一些其他值的一部分，例如 `50%`。百分比值总是相对于另一个量。例如，一个元素的长度相对于其父元素的长度。 |

### 长度

最常见的数字类型是 `<length>`，例如 `10px`（像素）或 `30em`。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解他们控制的元素将变得有多大。

#### 绝对长度单位

以下都是**绝对**长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

| 单位 | 名称 | 等价换算 |
| --- | --- | --- |
| `cm` | 厘米 | 1cm = 37.8px = 25.2/64in |
| `mm` | 毫米 | 1mm = 1/10th of 1cm |
| `Q` | 四分之一毫米 | 1Q = 1/40th of 1cm |
| `in` | 英寸 | 1in = 2.54cm = 96px |
| `pc` | 派卡 | 1pc = 1/6th of 1in |
| `pt` | 点 | 1pt = 1/72th of 1in |
| `px` | 像素 | 1px = 1/96th of 1in |

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 `cm`（厘米）。惟一一个你经常使用的值，估计就是 `px`（像素）。

#### 相对长度单位

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。

| 单位 | 相对于 |
| --- | --- |
| `em` | 在 `font-size` 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 `width`。 |
| `ex` | 字符“x”的高度。 |
| `ch` | 数字“0”的宽度。 |
| `rem` | 根元素的字体大小。 |
| `lh` | 元素的行高。 |
| `rlh` | 根元素的行高。当用于根元素的 `font-size` 或 `line-height` 属性时，它指的是这些属性的初始值。 |
| `vw` | 视口宽度的 1%。 |
| `vh` | 视口高度的 1%。 |
| `vmin` | 视口较小尺寸的 1%。 |
| `vmax` | 视口大尺寸的 1%。 |
| `vb` | 在根元素的块向上，初始包含块的尺寸的 1%。 |
| `vi` | 在根元素的行向上，初始包含块的尺寸的 1%。 |
| `svw`、`svh` | 分别为视口较小尺寸的宽度和高度的 1%。 |
| `lvw`、`lvh` | 分别为视口大尺寸的宽度和高度的 1%。 |
| `dvw`、`dvh` | 分别为动态视口的宽度和高度的 1%。 |

#### 探索一个例子

在下面的示例中，你可以看到一些相对长度单位和绝对长度单位的行为。第一个框以像素为单位设置 `width`。作为一个绝对单位，这个宽度将保持不变，无论其他如何变化。

第二个框的宽度设置为 `vw`（视口宽度）单位。这个值相对于视口宽度，所以 `10vw` 是视口宽度的 10%。如果你更改浏览器窗口的宽度，那么框的大小应该会更改，但是这个示例使用 `<iframe>` 嵌入到页面中，所以这将不起作用。要查看实际情况，你必须在打开示例的浏览器选项卡后尝试该示例。

第三个盒子使用 `em` 单位。这些是相对于字体大小的。我在包含 `<div>` 的元素上设置了一个 `1em` 的字体大小，它有一个 `.wrapper` 类。将这个值更改为 `1.5em`，你将看到所有元素的字体大小都增加了，但是只有最后一项会变宽，因为宽度与字体大小有关。

按照上面的说明操作之后，尝试以其他方式处理这些值，看看你将收获什么。

#### em 和 rem

`em` 和 `rem` 是你在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当你开始学习更复杂的主题时，比如样式化文本或 CSS 布局。下面的示例提供了一个演示。

HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示例都有相同的 HTML。唯一的区别是第一个类具有 *em*，第二个类具有 *rem*。

首先，我们将 16px 设置为 `<html>` 元素的字体大小。

**概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”**。带有 `ems` 类的 `<ul>` 内的 `<li>` 元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为 `1.3em`——是其父嵌套字体大小的 1.3 倍。

**概括地说，rem 单位的意思是“根元素的字体大小”**。（“根 em”的 rem 标准。）`<ul>` 内的 `<li>` 元素和一个 rems 类从根元素（`<html>`）中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。

但是，如果你在 CSS 中更改 `<html>` 字体大小，你将看到所有其他相关内容都发生了更改，包括 `rem` 和 `em` 大小的文本。

### 百分比

在许多情况下，百分比与长度的处理方法是一样的。百分比的问题在于，它们总是相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

在下面的示例中，两个百分比大小的框和两个像素大小的框具有相同的类名。分别为 200px 和 40% 宽。

不同之处在于，第二组两个框位于一个 400px 宽的包装器中。第二个 200px 宽的盒子和第一个一样宽，但是第二个 40% 的盒子现在是 400px 的 40%——比第一个窄多了！

**尝试更改包装器的宽度或百分比值，看看这是如何工作的。**

下一个示例以百分比设置字体大小。每个 `<li>` 都有 80% 的字体大小，因此嵌套列表项在从父级继承其大小时将逐渐变小。

注意，虽然许多值接受长度或百分比，但也有一些值只接受长度。你可以在 MDN 属性引用页面上看到它能接受哪些值。如果允许的值包括 `<length-percentage>`，则可以使用长度或百分比。如果允许的值只包含 `<length>`，则不可能使用百分比。

### 数字

有些值接受数字，不添加任何单位。接受无单位数字的属性的一个例子是不透明度属性（`opacity`），它控制元素的不透明度（它的透明程度）。此属性接受 `0`（完全透明）和 `1`（完全不透明）之间的数字。

**在下面的示例中，尝试将不透明度值更改为 `0` 到 `1` 之间的各种小数值，并查看框及其内容是如何变得透明或者不透明的。**

**备注：** 当你在 CSS 中使用数字作为值时，它不应该用引号括起来。

颜色
--

在 CSS 中指定颜色的方法有很多，其中一些是最近才实现的。在 CSS 中，相同的颜色值可以在任何地方使用，无论你指定的是文本颜色、背景颜色还是其他颜色。

现代计算机的标准颜色系统是 24 位的，它允许通过不同的红、绿、蓝通道的组合显示大约 1670 万种不同的颜色，每个通道有 256 个不同的值（256 x 256 x 256 = 16,777,216）。让我们来看看在 CSS 中指定颜色的一些方法。

**备注：** 在本教程中，我们将研究具有良好浏览器支持的常用指定颜色的方法；虽然还有其他的，但是他们没有很好的支持，也不太常见。

### 颜色关键词

在这学习示例或 MDN 上的其他示例中，你经常会看到使用的颜色关键字，因为它们是一种指定颜色的简单易懂的方式。有一些关键词，其中一些有相当有趣的名字！你可以在页面上看到 `<color>` 值的完整列表。

**在下面的示例中尝试使用不同的颜色值，以了解它们是如何工作的。**

### 十六进制 RGB 值

你可能遇到的下一种颜色值类型是十六进制代码。每个十六进制值由一个散列/磅符号（#）和六个十六进制数字组成，每个十六进制数字都可以取 0 到 f（代表 15）之间的 16 个值中的一个——所以是 `0123456789abcdef`。每对值表示一个通道——红色、绿色和蓝色——并允许我们为每个通道指定 256 个可用值中的任意一个（16 x 16 = 256）。

这些值有点复杂，不太容易理解，但是它们比关键字更通用——你可以使用十六进制值来表示你想在配色方案中使用的任何颜色。

**同样，大胆尝试更改值，看看颜色如何变化吧！**

### RGB 和 RGBA 的值

我们将在这里讨论的第三种方案是 RGB。RGB 值是一个函数——`rgb()`——它有三个参数，表示颜色的红色、绿色和蓝色通道值，与十六进制值的方法非常相似。RGB 的不同之处在于，每个通道不是由两个十六进制数字表示的，而是由一个介于 0 到 255 之间的十进制数字表示的——这有点容易理解。

让我们重写上一个例子，使用 RGB 颜色：

你可以向 `rgb()` 传递第四个参数，它代表颜色的 alpha 通道，控制不透明度。如果你把这个值设置为 `0`，它将使颜色完全透明，而 `1` 将使它完全不透明。介于两者之间的值会给你带来不同级别的透明度。

**备注：** 在颜色上设置 alpha 通道与使用我们前面看到的 `opacity` 属性有一个关键区别。当你使用不透明度时，你让元素和它里面的所有东西都不透明，而使用 RGB 与 alpha 参数的颜色只让你指定的颜色不透明。

在下面的例子中，我添加了一个背景图片到我们的彩色方块的包含块中。然后我设置了不同的不透明度值——注意当 alpha 通道值较小时，背景如何显示的。

**在本例中，尝试更改 alpha 通道值，看看它如何影响颜色输出。**

**备注：** 在旧版本的 CSS 中，`rgb()` 语法不支持 alpha 参数——你需要使用另一个叫 `rgba()` 的函数来实现。如今，你可以向 `rgb()` 传递一个 alpha 参数，但为了向后兼容旧网站，`rgba()` 语法仍然被支持，并且具有与 `rgb()` 完全相同的行为。

### HSL 和 HSLA 的值

另一种指定颜色的方法是 HSL 颜色模型。`hsl()` 函数不接受红、绿、蓝值，而是接受色相、饱和度和亮度值，这些值用于区分 1670 万种颜色，但方式不同：

* **色调**：颜色的底色。这个值在 0 和 360 之间，表示 color wheel (en-US) 周围的角度。
* **饱和度**：颜色有多饱和？它的值为 0–100%，其中 0 为无颜色（它将显示为灰色阴影），100% 为全色饱和度
* **亮度**：颜色有多亮？它从 0–100% 中获取一个值，其中 0 表示没有光（它将完全显示为黑色），100% 表示完全亮（它将完全显示为白色）

我们可以更新 RGB 的例子来使用 HSL 颜色，就像这样：

就像 `rgb()` 一样，你可以向 `hsl()` 传递一个 alpha 参数来指定不透明度。

**备注：** 在旧版本的 CSS 中，`hsl()` 语法不支持 alpha 参数——你需要使用一个叫做 `hsla()` 的不同函数来实现。现在你可以向 `hsl()` 传递一个 alpha 参数，但为了向后兼容老网站，`hsla()` 语法仍然被支持，并且具有与 `hsl()` 完全相同的行为。

你可以在项目中使用这些颜色值中的任何一个。对于大多数项目，你可能会选择一个调色板，然后在整个项目中使用这些颜色——以及你所选择的定义这些颜色的方法。你可以混合使用不同的颜色模型，但是为了一致性，通常最好是你的整个项目使用相同的一个！

图片
--

`<image>` 数据类型用于图像为有效值的任何地方。它可以是一个通过 `url()` 函数指向的实际图像文件，也可以是一个渐变。

在下面的例子中，我们演示了一个图像和一个渐变作为 CSS `background-image` 属性的值。

**备注：** `<image>` 还有一些其他可能的值，但是这些都是较新的，并且目前对浏览器的支持很差。如果你想了解 `<image>` 数据类型，请查看 MDN 页面。

位置
--

`<position>` 数据类型表示一组 2D 坐标，用于定位一个元素，如背景图像（通过 `background-position`）。它可以使用关键字（如 `top`、`left`、`bottom`、`right` 以及 `center`）将元素与 2D 框的特定边界对齐，以及表示框的顶部和左侧边缘偏移量的长度。

一个典型的位置值由两个值组成——第一个值水平地设置位置，第二个值垂直地设置位置。如果只指定一个轴的值，另一个轴将默认为 `center`。

在下面的示例中，我们使用关键字将背景图像从容器的顶部到右侧放置了 40px。

**尝试使用这些值，看看如何把这些图像移来移去。**

字符串和标识符
-------

在上面的示例中，我们看到关键字被用作值的地方（例如 `<color>` 关键字，如 `red`、`black`、`rebeccapurple` 和 `goldenrod`）。这些关键字被更准确地描述为标识符，一个 CSS 可以理解的特殊值。因此它们没有使用引号括起来——它们不被当作字符串。

在某些地方可以使用 CSS 中的字符串，例如在指定生成的内容时。在本例中，引用该值以证明它是一个字符串。在下面的示例中，我们使用非引号括起来的颜色关键字和引号括起来的内容字符串。

函数
--

我们将查看的最后一种类型的值是一组称为函数的值。在编程中，函数是一段可重用的代码，可以多次运行，以完成重复的任务，对开发人员和计算机都是如此。函数通常与 JavaScript、Python 或 C++ 等语言相关联，但它们也以属性值的形式存在于 CSS 中。我们已经在颜色部分看到了函数的作用——`rgb()`、`hsl()` 等。用于从文件返回图像的值——`url()`——也是一个函数。

`calc()` CSS 函数的行为更像你在传统编程语言中可能找到的东西。这个函数使你能够在 CSS 中进行简单的计算。如果你想计算一些你在编写项目的 CSS 时无法定义的数值，并且需要浏览器在运行时为你计算，那么它特别有用。

例如，下面我们使用 `calc()` 使框宽为 `20% + 100px`。20% 是根据父容器 `.wrapper` 的宽度来计算的，因此如果宽度改变，它也会改变。我们不能事先做这个计算，因为我们不知道父类的 20% 是多少，所以我们使用 `calc()` 来告诉浏览器为我们做这个计算。

技能测试！
-----

你已经到了本文的结尾，但你能记住其中重要的信息吗？你可以在继续前进之前进行一些测试来验证你是否记住了这些内容——技能测试：值和单位 (en-US)。

总结
--

本文简要介绍了你可能会遇到的最常见的值和单位类型。你可以看看所有不同类型的 CSS 的值和单位参考页面；当你学习这些课程时，你将会遇到很多这样的情况。

需要记住的关键一点是，每个属性都有一个已定义的允许值列表，每个值都有一个定义来解释子值是什么。然后你可以在 MDN 上查看详细信息。

例如，理解 `<image>` 还允许你创建一个颜色渐变有意义的，但也许这个章节并不会提供太多明显的相关知识！

* 上一页
* Overview: Building blocks
* 下一页


调试 CSS - 学习 Web 开发

调试 CSS
======

* 上一页
* Overview: Building blocks
* 下一页

你有时写 CSS 会碰到这样的问题：结果看起来和你想的不太一样。你可能会认为 selector（选择器）匹配到了元素但是什么都没发生，还可能会觉得盒子的大小与你想的有出入。这篇文章会教你着手调试 CSS，向你展示现代浏览器中的 DevTools 是怎样让你更方便地获悉发生了什么。

|  |  |
| --- | --- |
| 必备条件： |
 会使用计算机、安装基础软件、基本了解文件处理、有 HTML 基础（请参考HTML 导论）、了解 CSS 工作（请参考
 CSS first steps）。
  |
| 目标： | 学习浏览器 DevTools 基础、学会对 CSS 进行简单的审查和编辑。 |

如何使用浏览器开发者工具
------------

What are browser developer tools 解释了如何在不同的浏览器和平台上打开这些工具。你可能会选择大部分时间在某个浏览器上开发去熟悉里面的工具，不过你还是有必要了解如何在其他浏览器中打开同样的工具。要是你看到多个浏览器间不同的渲染结果，这就会很方便了。

你还会发现，不同的浏览器弹出开发者工具时会选择把重点放到不同的区域。例如，Firefox 有不错的工具用来可视化处理 CSS 布局，让你能够检查和编辑 Grid Layouts (en-US)、Flexbox、Shapes (en-US)。不过，浏览器都有类似的基础工具用来检查作用于页面元素的 CSS 属性和值，并对它们进行更改。

我们这节课会重点看用于处理 CSS 的开发者工具中的一些有用特性。为此，我会用一个示例。想跟着学习的话，就在新标签页加载该网页吧，并打开开发者工具（上述文章对该工具有描述）。

比较 DOM 和 View Source
--------------------

刚接触开发者工具的人可能会在这个地方产生失误：网页源码（或服务器端的 HTML 文件）显示的和开发者工具的 HTML Pane 显示的相比起来不太一样。通过 View Source，内容看起来差不多，然而一些差异还是存在的。

浏览器在渲染的 DOM 中已为你纠正了一些错误的 HTML 部分。如果你错误地闭合了元素（比如开始标签是`<h2>`，结束标签是`</h3>`。），浏览器会尽力弄清你的意图，之后 DOM 中的 HTML 就以 `<h2>` 起始，以 `</h2>` 结束了。浏览器还会处理好 HTML 文档，JavaScript 做出的更改都会由 DOM 表现出来。

相比之下，View Source 就是服务器端的 HTML 源码。DevTools 内的 HTML tree 展示了浏览器任意时间的渲染结果，让你深入理解正在发生什么。

审查 CSS
------

从页面上选择一个元素，可以通过以下方法：右键该元素，选择审查元素（Inspect）；从 DevTools 左侧 HTML tree 中选择该元素。试试选择 class 为 `box1` 的元素吧，它是页面上的第一个元素，周围画有边框。

![The example page for this tutorial with DevTools open.](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting1.png)

如果查看 HTML 右边的 Rules view 栏，你应该能看到该元素的 CSS 属性与值。你能看到直接应用到 `box1` 类上的规则，还有其继承了祖先的 CSS（该例中指 `<body>`）。这在一种情况下就很有帮助——你看到有些 CSS 并非在计划之内（或许它们继承自某个父元素然而你没有覆盖它们）。

另一个有用的功能是将简写属性展开的功能。在我们的示例里面使用了 `margin` 的简写。

**点击小箭头来展开界面，显示不同的完整属性和它们的值。**

**你可以在 Rules view 面板活动的时候打开或关闭值，在你将光标悬浮在上面的时候，就会出现勾选框。取消勾选一个规则的勾选框，例如 `border-radius`，CSS 就会停止应用。**

你可以运用这个功能来进行对照实验，来决定是否有东西会在应用了一条规则的时候变得更好看，同时也有助于调试，例如如果一个布局出错，你正在研究究竟是哪项属性是问题的源头的时候。

编辑值
---

除了开关属性以外，你还能编辑它们的值。也许你会想要看看是不是另外一种颜色会更好看，或者希望微调什么东西的大小呢？开发者工具可以省去你耗费在编辑样式表和重载页面上的大量时间。

**选择了 `box1` 以后，点击显示应用在边框的颜色的色块（被涂上颜色的圆），会打开一个颜色选择器，然后你就能尝试一些不同的颜色，页面上的显示会进行实时的更新。类似地，你也可以用这种方法改变宽度或者边框的样式。**

![DevTools Styles Panel with a color picker open.](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting2-color-picker.png)

添加一个新属性
-------

你可以使用开发者工具添加属性。也许你已经意识到，你不希望你的盒子继承 `<body>` 元素的字体大小，想要给它设定专属的特别颜色了？在将它加入到你的 CSS 文件之前，你可以在开发者工具中试一下。

**你可以点击在规则中合拢的花括号，开始向里面键入一个新的声明，此时你可以开始键入新的属性，开发者工具会展示给你一个自动填充的对应属性列表。在选择了 `font-size` 以后，键入你想要尝试的值。你也可以点击“+”按钮以添加一个对应于相同选择器的规则，将你的新规则加到那里。**

![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting3-font-size.png)

**备注：** 在 Rules view 里面还有其他有用的功能，例如带有无效值的声明会被划掉。你可以在检查并编辑 CSS里了解更多。

理解盒模型
-----

在之前的课程里我们已经讨论了盒模型，介绍了替代盒模型，它改变了元素根据给定大小计算自身尺寸的方式，再在这个计算值上加上内边距和边框。开发者工具可以确实帮助你理解元素尺寸的计算方式。

Layout view 给你展示了一张选定元素的盒模型示意图，还有对能改变元素展示方式的属性和值的描述。你可能原本没有精确地使用元素的属性，只设定了初始值，盒模型也可能包含对于这些属性的描述。

在这一面板上，被详细说明的属性之一为 `box-sizing` 属性，它控制了元素使用的盒模型种类。

**将这两个分别带有 `box1` 和 `box2` 类的盒子进行比较，它们可能都应用了相同的宽度（400 像素），但是 `box1` 显然更宽。你可以在布局面板上看到，它正在使用 `content-box` 值，即为那种取你赋予元素的大小并在这基础上加上内边距和边框宽度的那种值。**

带有 `box2` 类的盒子使用了 `border-box`，所以此时内边距和边框的值是从你赋给元素的值里面减去的，也就是说页面上被盒子占据的空间大小就是你指定的大小，此例中为 `width: 400px`。

![The Layout section of the DevTools](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting4-box-model.png)

**备注：** 在仔细检查盒模型里了解更多。

解决优先级问题
-------

有的时候，在开发过程中，尤其是在你需要编辑运行站点的 CSS 的时候，你将会发现你很难让一些 CSS 被应用。无论你做了什么，元素看起来就是不听 CSS 使唤。这时候大概发生的事情是，一个更明确的选择器覆盖了你的改动，此时开发者工具也能帮助你解决这个问题。

在我们的示例文件里，有两个单词被包含在了一个 `<em>` 元素里。一个显示为橘黄色，另一个为深粉色。在 CSS 里我们这样写：

```css
em {
  color: hotpink;
  font-weight: bold;
}
```

但在样式表里面，这些规则的上面有以 `.special` 为选择器的规则：

```css
.special {
  color: orange;
}
```

正如你从层叠与继承里面，我们讨论的关于优先级的经验中回忆起来的那样，类选择器比元素选择器有更高的优先级，因而这就是实际生效的值。开发工具可以帮忙找出这类问题，尤其是在有效的信息被淹没在一个巨大的样式表的某个角落的时候。

**检查有 `.special` 类的 `<em>` 元素，开发者工具会告诉你橘黄色是实际生效的颜色，还会将应用在 em 上的 `color` 属性划掉。你这样就能看到是类选择器覆盖了元素选择器了。**

![Selecting an em and looking at DevTools to see what is over-riding the color.](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS/inspecting5-specificity.png)

进一步了解火狐开发者工具
------------

在 MDN 这里有很多关于火狐调试工具的信息，看下主要的开发者工具段落，欲了解在本节课中我们简要介绍的事情的细节，请看下这篇教程。

在 CSS 中调试问题
-----------

在解决 CSS 问题时，DevTools 可以提供很大的帮助，因此当你发现自己的 CSS 表现不如预期时，应该如何解决呢？以下步骤应有所帮助。

### 从问题中后退一步

任何代码问题都可能令人沮丧，尤其是 CSS 问题，因为你通常无法获得错误消息用于网络搜索来帮助你找到解决方案。如果你感到沮丧，请暂时离开该问题一会儿—散步，喝一杯，与同事聊天，或者做一些其他事情。有时，当你停止思考问题时，解决方案就会神奇地出现，即使没有出现，在感到清爽的时候解决起问题来要容易很多。

### 你有一个有效的 HTML 和 CSS 吗？

浏览器希望你的 CSS 和 HTML 能够正确编写，但是浏览器也非常宽容，即使标记或样式表中有错误，浏览器也会尽力显示你的网页。如果你的代码有错误，浏览器需要猜测你的意思，并且可能会对你的想法做出不同的决定。此外，两种不同的浏览器可能会以两种不同的方式来解决该问题。因此，一个好的第一步是通过验证器运行 HTML 和 CSS，以获取并修复任何错误。

* CSS Validator
* HTML validator
### 属性和值是否被你正在测试的浏览器所支持？

浏览器会忽略他们不理解的 CSS。如果你正在测试的浏览器不支持你正在使用的属性或值，则不会奔溃，但 CSS 不会被应用。DevTools 通常会以某种方式突出显示不支持的属性和值。在下面的屏幕截图中，浏览器不支持以下子网格值 `grid-template-columns`.

![Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.](/zh-CN/docs/Learn/CSS/Building_blocks/Debugging_CSS/no-support.png)

你还可以查看 MDN 每个属性页底部的浏览器兼容性表。这些向你显示浏览器对该属性的支持，如果支持该属性的某些用法，而不支持其他用法，则经常会 break down。 这里显示了 `shape-outside` 属性的兼容性数据。

### 是否有其他东西覆盖了你的 CSS?

在这里，你所学到的关于特定性（specificity）的信息将非常有用。如果你有一些更特定的内容要覆盖你打算做的，将会比较麻烦。但是，如上所述，DevTools 将向你显示 CSS 是如何应用的，你可以弄清楚如何使新选择器足够具体，以覆盖旧的 CSS 样式。

### 制作一个精简的问题测试用例

如果上述步骤未能解决问题，则你需要做更多调查。此时最好的做法是创建一个称为简化测试用例的东西。能够“减化问题”是一项非常有用的技能。这将帮助你在自己的代码和同事的代码中发现问题，还使你能够报告错误并更有效地寻求帮助。

简化的测试用例是一个代码示例，它以最简单的方式演示了该问题，并删除了无关的周围内容和样式。这通常意味着将有问题的代码从你的布局中取出，以制作一个仅显示该代码或功能的小示例。

创建一个简化测试用例：

1. 如果你的标记是动态生成的（例如通过 CMS），请生成显示该问题的静态版本。诸如 CodePen 之类的代码共享站点可用于托管简化的测试用例，因为它们可以在线访问，并且你可以轻松地与同事共享它们。你可以先在页面上执行“查看源代码”，然后将 HTML 复制到 CodePen 中，然后获取所有相关的 CSS 和 JavaScript 并将其包括在内。之后，你可以检查问题是否仍然明显。
2. 如果删除 JavaScript 不能解决问题，请不要调试包含 JavaScript 的部分。如果删除 JavaScript 确实消除了问题，那么请尽可能多地删除与问题无关的 JavaScript，保留导致问题的原因。
3. 删除所有不会导致此问题的 HTML。删除布局中的组件甚至主要元素。在保留问题可重现的情况下把代码量尽量减少。
4. 删除掉任何不影响问题的 CSS。

在执行此操作的过程中，你可能会发现导致问题的原因，或者至少能够通过删除特定的东西来打开和关闭它。当发现一些东西时，应该在代码中添加一些注释。如果你需要帮助，这些注释将向帮助你的人显示你已经做了哪些尝试。这很可能会为你提供足够的信息，以便能够搜索可能存在的问题和解决方法。

如果你还没有解决问题，那么减化测试用例可以通过发布到论坛或向同事展示来为寻求帮助提供依据。如果能够表明在寻求帮助之前你已经完成了简化问题并准确确定问题根源的工作，那么会帮助你更容易地获得帮助。一个更有经验的开发人员也许能够迅速发现问题并为你指明正确的方向，即使没有，你简化的测试用例也可以使他们快速查看并能够至少提供一些帮助。

如果你的问题实际上是浏览器中的错误，则还可以使用简化的测试用例向相关的浏览器供应商提交错误报告（e.g. on Mozilla's bugzilla site）。

随着对 CSS 的使用经验越来越丰富，你会发现发现问题的速度越来越快。但是，即使我们中最有经验的人有时也会发现自己想知道到底发生了什么。采取有条不紊的方法，简化测试用例，并向他人解释问题，通常会找到解决方法。

* 上一页
* Overview: Building blocks
* 下一页


技能测试：表格 - 学习 Web 开发

技能测试：表格
=======

此任务的目的是为了帮助你检测在样式化表格课程中学到的技巧的理解。

**备注：** You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as CodePen, jsFiddle, or Glitch to work on the tasks.

If you get stuck, then ask us for help — see the Assessment or further help section at the bottom of this page.

任务
--

在之前的课程中，我们以一种杀马特的方式样式化了一个表格。在这个任务中，我们打算样式化同样的表格，但是使用一些在外部文章Web 排版：设计可读而不是可看的表格概述的表格设计良好实践。

我们要完成的表格如下图所示。完成这个任务有许多方法，但是我建议你使用和向导中所用的相似的模式来完成以下的事情。

* 把标题和包含数字的列数据右对齐
* 把标题和包含文本的列数据左对齐
* 添加顶部和底部边框，以及页脚上方的边框
* 将主表的所有奇数行条纹化

![A table with striped rows.](/zh-CN/docs/Learn/CSS/Building_blocks/Tables_tasks/mdn-table-bands.png)

**备注：** For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

Assessment or further help
--------------------------

You can practice these examples in the Interactive Editors mentioned above.

If you would like your work assessed, or are stuck and want to ask for help:

1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include:
    * A descriptive title such as "Assessment wanted for tables skill test".
    * Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
    * A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
    * A link to the actual task or assessment page, so we can find the question you want help with.


样式化表格 - 学习 Web 开发

样式化表格
=====

* 上一页
* Overview: Building blocks
* 下一页

设计一个 HTML 表格不是世界上最迷人的工作，但有时我们必须这样做。本文提供了一个使 HTML 表格看起来不错的指南，其中一些功能在前面的文章中已作详细介绍。

|  |  |
| --- | --- |
| 前提： |
 HTML 基础 (学习
 Introduction to HTML), HTML 表格 (见 HTML 表格模块 (TBD))，了解 CSS 工作原理 (study
 Introduction to CSS.)
  |
| 目标： | 学习如何有效地对 HTML 表格进行样式化。 |

一个典型的 HTML 表格
-------------

让我们从一个典型的 HTML 表格开始。恩，我说典型——大多数 HTML 表格都是关于鞋子，天气，或者员工的。我们决定通过制作英国著名的朋克乐队来让事情变得更有趣。标记看起来是这样的

```html
<table>
  <caption>
    A summary of the UK's most famous punk bands
  </caption>
  <thead>
    <tr>
      <th scope="col">Band</th>
      <th scope="col">Year formed</th>
      <th scope="col">No. of Albums</th>
      <th scope="col">Most famous song</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Buzzcocks</th>
      <td>1976</td>
      <td>9</td>
      <td>Ever fallen in love (with someone you shouldn't've)</td>
    </tr>
    <tr>
      <th scope="row">The Clash</th>
      <td>1976</td>
      <td>6</td>
      <td>London Calling</td>
    </tr>

    ... some rows removed for brevity

    <tr>
      <th scope="row">The Stranglers</th>
      <td>1974</td>
      <td>17</td>
      <td>No More Heroes</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Total albums</th>
      <td colspan="2">77</td>
    </tr>
  </tfoot>
</table>
```

由于`scope`、`<caption>`、`<thead>`、`<tbody>`等特性，表格被很好地标记了，易于使用，并且易于访问，不幸的是，它在屏幕上呈现时看起来不太好（见它的预览版 punk-bands-unstyled.html）：

![](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables/table-unstyled.png)

它看起来很拥挤，很难阅读，也很无聊。我们需要使用一些 CSS 来解决这个问题。

自主学习：样式化我们的表格
-------------

在这个自主学习部分中，我们将一起来样式化我们的表格。

1. 首先，复制实例标记到本地，下载这两个图像 (noise和 leopardskin)，然后将三个结果文件放在本地计算机的某个工作目录中。
2. 接下来，创建一个名为`style.css`的新文件并将其保存在与其他文件相同的目录中。
3. 将 CSS 链接到 HTML 中，将下面的 HTML 代码放到 HTML 的`<head>`中：

```html
<link href="style.css" rel="stylesheet" type="text/css" />
```

### 间距和布局

我们需要做的第一件事是整理出空间/布局——默认的表格样式是如此的拥挤！要做到这一点，请将以下 CSS 添加到你的 `style.css` 文件：

```css
/\* spacing \*/

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  border: 3px solid purple;
}

thead th:nth-child(1) {
  width: 30%;
}

thead th:nth-child(2) {
  width: 20%;
}

thead th:nth-child(3) {
  width: 15%;
}

thead th:nth-child(4) {
  width: 35%;
}

th,
td {
  padding: 20px;
}
```

需要注意的最重要的部分如下：

* 在你的表上，给`table-layout`属性设置一个为`fixed`的值通常是一个好主意，因为它使表的行为在默认情况下更可预测。通常情况下，表列的尺寸会根据所包含的内容大小而变化，这会产生一些奇怪的结果。通过 `table-layout: fixed`，你可以根据列标题的宽度来规定列的宽度，然后适当地处理它们的内容。这就是为什么我们使用了`thead th:nth-child(n)` 选择了四个不同的标题 (`:nth-child`) 选择器（“选择第 n 个子元素，它是一个顺序排列的`<th>`元素，且其父元素是`<thead>`元素”）并给定了它们的百分比宽度。整个列宽度与列标题的宽度是一样的，这是一种很好的设定表列尺寸的方式。Chris Coyier 在Fixed Table Layouts中更详细地讨论了这一技术。
 我们将它与一个 100% 的`width`组合在一起，这意味着该表将填充它放入的任何容器，并且能很好的响应（虽然它仍然需要更多的工作来让它在窄屏宽度上看起来很好）。
* 一个`border-collapse`属性的`collapse`值对于任何表样式的工作来说都是一个标准的最佳实践。默认情况下，当你在表元素上设置边框时，它们之间将会有间隔，如下图所示：
 ![](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables/no-border-collapse.png)这看起来不太好 (虽然可能是你想要的样子，谁知道呢？)。使用 `border-collapse: collapse;` ，让边框合为一条，现在看起来好多了：
 ![](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables/border-collapse.png)
* 我们在整个表设置了一个`border`，这是必要的，因为我们将在表页眉和页脚后面设置一些边框——当你在表格外面没有一个边界而且以空隙结尾的时候，它看起来很奇怪，而且是不连贯的。
* 我们在`<th>`和`<td>` (en-US)元素上设置了一些`padding`——这些元素使数据项有了一些空间，使表看起来更加清晰。

此刻，我们的表看起来好多了：

![](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-spacing.png)

### 一些简单的排版：

现在我们把类型整理一下。

首先，我们在Google Fonts上找到了一种适合于朋克乐队的字体的字体。如果你愿意，你可以去那里找一个不同的。现在，你只需替换我们提供的`<link>`元素和定制的`font-family`声明，并使用 Google 字体提供给你的内容。

首先，将下面的`<link>`元素添加到你的 HTML 头部，就在你现有的 `<link>` 元素之上：

```html
<link
 href="https://fonts.googleapis.com/css?family=Rock+Salt"
 rel="stylesheet"
 type="text/css" />
```

现在将下面的 CSS 添加到你的`style.css`文件，在之前内容后面添加：

```css
/\* typography \*/

html {
  font-family: "helvetica neue", helvetica, arial, sans-serif;
}

thead th,
tfoot th {
  font-family: "Rock Salt", cursive;
}

th {
  letter-spacing: 2px;
}

td {
  letter-spacing: 1px;
}

tbody td {
  text-align: center;
}

tfoot th {
  text-align: right;
}
```

这里没有什么特别的东西。我们通常会对字体样式进行调整，使其更易于阅读：

* 我们已经设置了一个全局无衬线字体;这纯粹是一种风格上的选择。我们还在`<thead>`和`<tfoot>`元素的标题上设置了自定义字体，这是一种很不错的、很有朋克风格的外观。
* 我们在标题和单元格上设置了一些`letter-spacing`，因为我们觉得它有助于提高可读性。再次强调，这主要是一种风格上的选择。
* 我们在`<tbody>`中的表格单元中对文本进行了居中对齐，使它们与标题对齐。默认情况下，单元格被赋予了一个`text-align`的`left`值，并且标题被赋予了一个`center`值，但是通常情况下，让两者对齐看起来更好。标题字体的默认粗体值足以区分它们的外观。
* 我们在`<tfoot>`中对标题进行了右对齐，以便与它的数据点更好地关联。

结果看起来更整洁一些：

![](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-typography.png)

### 图形和颜色

现在轮到图形和颜色了！因为表格上充满“朋克“和“个性”，我们需要给它再搭配一些鲜艳的造型。别担心，你不必让你的表格“燥起来”，你可以选择一些更巧妙、更有品位的东西。

首先将下面的 CSS 添加到 `style.css` 文件中，在底部添加：

```css
/\* 图形和颜色 \*/

thead,
tfoot {
  background: url(leopardskin.jpg);
  color: white;
  text-shadow: 1px 1px 1px black;
}

thead th,
tfoot th,
tfoot td {
  background: linear-gradient(to bottom, rgb(0 0 0 / 10%), rgb(0 0 0 / 50%));
  border: 3px solid purple;
}
```

同样，对于表格这里没有什么特别的，但有几件事值得注意。

我们已经将一个`background-image`添加到`<thead>`和`<tfoot>`，并将页眉和页脚的所有文本颜色`color`更改为白色 (并给它一个`text-shadow`)，这样它的可读性就更好了。你应该确保你的文字与你的背景形成鲜明的对比，使得它是可读的。

我们还为`<th>`和 `<td>` (en-US)添加了一个线性渐变，在页眉和页脚中添加了一个漂亮的纹理，同时也为这些元素提供了一个明亮的紫色边框。有多个嵌套的元素是很有用的，这样你就可以将样式层叠在一起。是的，我们可以通过设置多组背景图像属性值来在`<thead>`和 `<tfoot>`元素上同时使用背景图像和线性渐变，但是我们决定分开使用，因为考虑到不支持多个背景图像或线性渐变的老浏览器。

#### 斑马条纹图案

我们想用一个单独的部分来展示如何实现斑马条纹（**zebra stripes**）——通过改变不同数据行的颜色，使表中交替行不同的数据行可以更容易地进行解析和读取。将下面的 CSS 添加到你的 `style.css` 文件底部：

```css
tbody tr:nth-child(odd) {
  background-color: #ff33cc;
}

tbody tr:nth-child(even) {
  background-color: #e495e4;
}

tbody tr {
  background-image: url(noise.png);
}

table {
  background-color: #ff33cc;
}
```

* 你在前面看到了`:nth-child`选择器用于选择特定的子元素。它也可以用一个公式作为参数，来选择一个元素序列。公式`2n-1`会选择所有奇数的子元素 (1、3、5 等)，而公式`2n`会选择所有偶数的子元素 (2、4、6 等等)。我们在代码中使用了`odd`和`even`的关键字，这与前面提到的公式作用完全相同。在这里，我们给奇数行和偶数行不同的 (醒目的) 颜色。
* 我们还为所有的行添加了一个重复的噪点背景色块（一个半透明的`.png`，有一点视觉上的扭曲）来提供一些纹理。
* 最后，我们给整个表格提供了一个纯的背景颜色，这样浏览器不支持`:nth-child`选择器仍然有它们的正文行的背景。

这种颜色爆炸的结果如下：

![](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-color.png)

现在，这可能有点过头不符合你的品味，但我们在这里想要指出的一点是，表格并非只能是枯燥无味的，学术性的。

### 样式化标题

对我们的表格还有最后一点处理——样式化标题。要做到这一点，请将以下内容添加到你的`style.css` 文件底部：

```css
caption {
  font-family: "Rock Salt", cursive;
  padding: 20px;
  font-style: italic;
  caption-side: bottom;
  color: #666;
  text-align: right;
  letter-spacing: 1px;
}
```

这里没有什么值得注意的地方，除了`caption-side`属性，它被赋予了一个`bottom`的值。这就导致标题被放置在表格的底部，与其他声明一起提供了最后的外观（见预览版punk-bands-complete.html）：

![](/zh-CN/docs/Learn/CSS/Building_blocks/Styling_tables/table-with-caption.png)

自主学习：样式化你自己的表格
--------------

现在，我们希望你可以使用我们的示例表格 HTML(或者使用你自己的一些！)，并将其样式设计成比我们的表更好的设计和不那么花哨的东西。

表格样式小贴士
-------

在继续之前，我们认为我们将为你提供一个快速列表，列出了上面提到的最有用的点：

* 使你的表格标记尽可能简单，并且保持灵活性，例如使用百分比，这样设计就更有响应性。
* 使用 `table-layout``: fixed` 创建更可控的表布局，可以通过在标题`width`中设置`width`来轻松设置列的宽度。
* 使用 `border-collapse``: collapse` 使表元素边框合并，生成一个更整洁、更易于控制的外观。
* 使用`<thead>`, `<tbody>`和`<tfoot>` 将表格分割成逻辑块，并提供额外的应用 CSS 的地方，因此如果需要的话，可以更容易地将样式层叠在一起。
* 使用斑马线来让其他行更容易阅读。
* 使用 `text-align`直线对齐你的`<th>`和`<td>` (en-US)文本，使内容更整洁、更易于跟随。
技能测试！
-----

我们在这篇文章里面讲了很多，但是你能记住最重要的信息吗？你能找到些更进一步的测试，在你继续之前，想要验证你已经吸收了这些信息的话，请见技能测试：表格。

总结
--

现在，我们身后的表格样式令人炫目，令人兴奋，我们需要一些其他的东西来占据我们的时间。不要担心——下一章会介绍如何调试 CSS，如何解决诸如布局不能像所应该的那样进行呈现的问题，或者元素无法像你预料的那样生效的问题。那里包含了使用浏览器开发者工具寻找你的问题的解决方案的信息。

* 上一页
* Overview: Building blocks
* 下一页


基本的 CSS 理解 - 学习 Web 开发

基本的 CSS 理解
==========

* 上一页
* Overview: Building blocks
* 下一页

你已经在这个模块中了解到了很多内容，所以当你达到这个模块的最后一篇文章的时候，感觉一定非常不错吧！在你继续之前的最后一步，就是完成对于这个模块的测验。本次测验涉及到几个相关的练习，你必须按顺序完成，这样你才能设计出最终的成品：一张名片/游戏玩家卡片/社交媒体的简介。

|  |  |
| --- | --- |
| 前提： | 在尝试这个测验之前，你应该已经完成了这个模块中所有文章的学习。 |
| 目标： | 来测试对 CSS 理论、语法、功能性的基本理解。 |

起点
--

在开始测验之前，你应该：

* 将 HTML file for the exercise, 和 associated image file,拷贝到你的本地环境中。如果你想使用自己的图片文件以及把你的名字写进资料里面的话，也没有问题，不过需要保证你提供的图像是正方形的。
* 下载 CSS resources text file 到你的本地环境，这个文件包含了一组原始选择器和规则集。你需要学习并将他们组合，这是测验的一部分。

**备注：** 另外，你可以使用一个网站比如 JSBin 或 Glitch 来做你的测验。你可以复制 HTML 和 CSS 到其中一个在线编辑器中，以及使用这个 this URL 来让 `<img>` 显示图片。如果你使用的在线编辑器无法让你链接 CSS 文件 (没有单独的 CSS 面板)，你也可以将 CSS 直接放入`<style>` 元素中。

项目概要
----

我们已经为你提供了一些原始的 HTML 和一张图片，然后需要编写必要的 CSS 来让其成为一个漂亮的网上小名片，可能大小是游戏玩家卡片或社交媒体简介的两倍。下面的段落描述了你需要做的事情。

基本设置：

* 首先，在你放 HTML 文件和图像文件的目录下，创建一个新的文件，把它命名为类似`style.css`。
* 通过 `<link>` 元素来将你的 CSS 链接到 HTML 文件中。
* 我们为你提供的 CSS 资源文本文件中，前两项规则集是我们设置好的，你可以直接使用，所以将他们复制粘贴到你的新 CSS 文件的顶部。同时也可以将这个作为测验，用来确认你是否正确链接了你的 CSS 文件到 HTML 中。
* 在以上的两条规则中添加一条 CSS 注释，注释中要包含一些文本来表明这是整体页面的一般样式。你可以在 CSS 文件底部添加 3 个或以上的注释，来明确地表明该样式是应用到卡片的容器，应用到标题和页脚的样式，和名片主要内容的样式。从现在开始，随后在样式表添加的样式都应该有组织地放置在合适的地方。

关注我们为你提供的选择器和规则集：

* 接下来，我们希望你观察四个选择器，并计算每一个的专用性。将它们写在稍后可以找到的地方，例如在 CSS 顶部的注释中。
* 现在是时候把正确的选择器放在正确的规则集上了！你的 CSS 资源中有四对选择器和规则集需要匹配，现在就开始匹配，并将它们添加到你的 CSS 文件。你需要：
    + 为整体卡片的容器提供一个固定的宽/高，背景颜色，边框，以及边框圆角等等。
    + 为 header 提供一个渐变的背景颜色，从更暗到更亮，加上圆角，配合在卡片容器上设置的圆角。
    + 为 footer 提供一个渐变的背景颜色，从更亮到更暗，加上圆角，配合在卡片容器上设置的圆角。
    + 将图像向右浮动，使其粘贴在名片主要内容的右边，然后把它的 max-height 设置为 100% (一个聪明的技巧，来确保它将放大/缩小，与父容器保持同样的高度，不管它变成什么高度。)
* 注意！提供的规则集中有两个错误。使用你知道的任何技术找到这些错误并修复，然后再继续。

你需要写的新规则：

* 编写一个同时面向 card head 和 card footer 的规则集，使它们计算的总高度为 50px（包括 30px 的内容高度和 10px 的 padding）但用 `em` 来表示。
* 浏览器会为`<h2>` 和 `<p>`元素应用默认的 margin，这会影响我们的设计，所以编写一个规则集：margin 设置为 0。
* 为了阻止图像溢出名片的主要内容 ( `<article>` 元素)，我们需要给它设置一个明确的高度。设置 `<article>`的高度为 120px，但是使用 `em`来表示。还要给它一个半透明黑色的背景颜色，产生一个稍暗一点的阴影，能让红色的背景稍微透过。
* 编写一个规则集，使 `<h2>` 有效的字体大小为 20px (使用 `em`表达) 以及一个适当的行高将其放置在标题的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
* 为页脚中的 `<p>` 编写一个规则集，使它的有效字体大小为 15px (使用 `em`表达) 以及一个适当的行高将其放置在页面的内容框的中央。回想起来，内容框高度应该是 30px，你所有需要的数字都已经给你了，所以可以计算出行高。
* 最为最后一步，为 `<article>` 中的段落设置一个合适的 padding 值，让它和 `<h2>` 以及页脚的段落左边缘对齐，并将其颜色设置得便于阅读。

**备注：** 记住第二条规则集会将 `font-size: 10px;` 设置在 `<html>` 元素上 — 这意味着 `<html>` 的任何后代中，一个 em 将会等于 10px 而不是默认的 16px。(这是当然的，如果在层次结构中，有不同的 `font-size` 设置于其上，问题中的后代没有任何的祖先位于 em 元素和 `<html>` 之间。这可能会影响你所需要的值，尽管在这个简单的示例中，这不是问题。)

其他事情要考虑：

* 如果你编写的 CSS 有比较好的可读性，并在每行上单独声明，你将得到奖励。
* 你应该在所有规则的选择器中都用 `.card` 作为开头，这样的好处是：如果将名片放在带有其他内容的页面的情况下，这些规则不会干扰其他元素的样式。
注意和提示
-----

* 你不需要以任何方式编辑 HTML，除了将 CSS 应用于你的 HTML。
* 当使用 `em` 值代表一些你需要的像素长度的时候，想想 (`<html>`) 元素的基本字体大小，以及需要乘以什么才能获得所需的值。这将给你 em 的值，至少在这样一个简单的情况下。
示例
--

完成的设计应如下图所示：

![A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.](/zh-CN/docs/Learn/CSS/Building_blocks/Fundamental_CSS_comprehension/business-card.png)

评估
--

如果你将此评估作为有组织的课程的一部分，你应该能够将你的工作交给你的老师/导师进行打分。如果你是自学的，那么你可以通过询问 Learning Area Discourse thread, 或在 #mdn的 IRC 频道 Mozilla IRC 中轻松获得打分指南。首先尝试练习 - 作弊学不到什么！

* 上一页
* Overview: Building blocks
* 下一页


处理不同方向的文本 - 学习 Web 开发

处理不同方向的文本
=========

* 上一页
* Overview: Building blocks
* 下一页

目前为止我们在 CSS 学习中遇到的许多属性和属性值与显示器的物理尺度紧密相关。例如，我们会在上、右、下、左设置边框。这些物理尺寸与水平排布的文本相得益彰，并且，默认浏览器对方向从左到右的文本（如英文或法文）的支持，要优于从右到左的文本（如阿拉伯语）的支持。

然而，CSS 在最近几年得到了改进，以更好地支持不同方向的文本，包括从右到左，也包括从上到下的文本（如日文）——这些不同的方向属性被称为书写模式。随着学习的深入，当你开始试着对页面进行布局时，对书写模式的了解将会对你很有帮助，为此我们在这里加以介绍。

|  |  |
| --- | --- |
| 前提： | 计算机基础知识，基本软件（参见basic software installed），文件管理的基本知识（参见working with files），HTML 基础（HTML 学习Introduction to HTML）以及 CSS 基础（学习CSS first steps）。 |
| 目标： | 了解书写模式对现代 CSS 的重要 |

什么是书写模式
-------

CSS 中的书写模式是指文本的排列方向是横向还是纵向的。`writing-mode` 属性使我们从一种模式切换到另一种模式。为此，你不必使用一种竖向的语言——你还可以更改部分文字的方向以实现创新性的布局。

下面的例子中，我们使用`writing-mode: vertical-rl`对一个标题的显示进行设置。现在，标题文本是竖向的了。竖向文本在平面设计中很常见，也可以为你的网页设计增添更加有趣的外观。

`writing-mode`的三个值分别是：

* `horizontal-tb`: 块流向从上至下。对应的文本方向是横向的。
* `vertical-rl`: 块流向从右向左。对应的文本方向是纵向的。
* `vertical-lr`: 块流向从左向右。对应的文本方向是纵向的。

因此，`writing-mode`属性实际上设定的是页面上块级元素的显示方向——要么是从上到下，要么是从右到左，要么是从左到右。而这决定了文本的方向。

书写模式、块级布局和内联布局
--------------

我们已经讨论了块级布局和内联布局（block and inline layout），也知道外部显示类型元素分为块级元素和内联元素。如上所述，块级显示和内联显示与文本的书写模式（而非屏幕的物理显示）密切相关。如果你使用书写模式的显示是横向的，如英文，那么块在页面上的显示就是从上到下的。

用一个例子可以更清楚地说明这一点。下一个例子中有两个盒子，分别包含一个标题和一个段落。第一个盒子应用的是`writing-mode: horizontal-tb`，这是一个从上到下的横向的书写模式。第二个盒子应用的是`writing-mode: vertical-rl`，这是一个从右到左的纵向的书写模式。

当我们切换书写模式时，我们也在改变块和内联文本的方向。`horizontal-tb`书写模式下块的方向是从上到下的横向的，而 `vertical-rl`书写模式下块的方向是从右到左的纵向的。因此，块维度指的总是块在页面书写模式下的显示方向。而内联维度指的总是文本方向。

这张图展示了在水平书写模式下的两种维度。
 ![](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/horizontal-tb.png)

这张图片展示了纵向书写模式下的两种维度。

![](/zh-CN/docs/Learn/CSS/Building_blocks/Handling_different_text_directions/vertical.png)

一旦你开始接触 CSS 布局，尤其是更新的布局方法，这些关于块级元素和内联元素的概念会变得非常重要。我之后会返回来再看。

### 方向

除了书写模式，我们还可以设置文本方向。正如上面所言，有些语言（如阿拉伯语）是横向书写的，但是是从右向左。当你在对页面布局进行创新时，你可能不这么使用——如果你只是想将某部分内容放到右边排列下来，还有其他方法可以选择——然而，重要的是能意识到，这其实是 CSS 本身功能的一部分。网页可不仅限于从左向右排列的语言！

由于书写模式和文本方向都是可变的，新的 CSS 布局方法不再定义从左到右和从上到下，而是将这些连同内联元素和块级元素的*开头*和*结尾*一起考量。现在不必过于担心，但是带着这些概念开始你的布局，你会发现这对你掌握 CSS 非常有用。

逻辑属性和逻辑值
--------

我们之所以要在这里探讨书写模式和方向，是因为目前为止我们已经了解了很多与屏幕的物理显示密切相关的很多属性，而书写模式和方向在水平书写模式下会很有意义。

让我们再来看看那两个盒子——一个用`horizontal-tb`设定了书写模式，一个用`vertical-rl`设定了书写模式。我为这两个盒子分别设定了宽度（ `width`）。可以看到，当盒子处于纵向书写模式下时，宽度也发生了变化，从而导致文本超出了盒子的范围。

通过这一些列调整，我们想要的实际上是使宽和高随着书写模式一起变化。当处于纵向书写模式之下时，我们希望盒子可以向横向模式下一样得到拓宽。

为了更容易实现这样的转变，CSS 最近开发了一系列映射属性。这些属性用逻辑（**logical**）和相对变化（**flow relative**）代替了像宽`width`和高`height`一样的物理属性。

横向书写模式下，映射到`width`的属性被称作内联尺寸（`inline-size`）——内联维度的尺寸。而映射`height`的属性被称为块级尺寸（`block-size`），这是块级维度的尺寸。下面的例子展示了替换掉`width`的`inline-size`是如何生效的。

### 逻辑外边距、边框和内边距属性

我们在前面两节中学习了 CSS 的盒模型和 CSS 边框。在外边距、边框和内边距属性中，你会发现许多物理属性，例如 `margin-top`、 `padding-left`和 `border-bottom`。就像 width 和 height 有映射，这些属性也有相应的映射。

`margin-top`属性的映射是`margin-block-start`——总是指向块级维度开始处的边距。

`padding-left`属性映射到 `padding-inline-start`，这是应用到内联开始方向（这是该书写模式文本开始的地方）上的内边距。`border-bottom`属性映射到的是`border-block-end`，也就是块级维度结尾处的边框。

下面是物理和逻辑属性之间的对比。

**如果你用`writing-mode`把盒子`.box`的书写模式改为`vertical-rl`，你将会看到尽管盒子的物理方向变了，盒子的物理属性仍然没变，然而逻辑属性会随着书写模式一起改变。**

**你还可以看到，二级标题`<h2>` (en-US)有一个黑色的底部边框`border-bottom`。你知道如何使得底部边框无论在那种书写模式下都位于文本的下方吗？**

对于每一个普通边距，都有许多属性可以参考，你可以在 MDN 页面（Logical Properties and Values）查看所有映射属性。

### 逻辑值

目前为止我们看到的都是逻辑属性的名称。还有一些属性的取值是一些物理值（如`top`、`right`、`bottom`和`left`）。这些值同样拥有逻辑值映射（`block-start`、`inline-end`、`block-end`和`inline-start`）。

例如，你可以将一张图片移到左边，并使文本环绕图片。你可以将`left`替换为`inline-start` ，就像下面的例子中一样。

**将这个例子的书写模式改为`vertical-rl`，看看图片会发生什么。将`inline-start`改为`inline-end`来改变图片的移动。**

之类，我们同样使用逻辑边距值来保证在任何书写模式下边距的位置都是对的。

**备注：** `float`的逻辑值暂时只有 Firefox 和 Firefox for Android 支持，上面的例子可能无法生效。

### 应该使用物理属性还是逻辑属性呢？

逻辑属性是在物理属性之后出现的，因而最近才开始在浏览器中应用。你可以通过查看 MDN 的属性页面来了解浏览器对逻辑属性的支持情况。如果你并没有应用多种书写模式，那么现在你可能更倾向于使用物理属性，因为这些在你使用弹性布局和网格布局时非常有用。

总结
--

本章介绍的概念在 CSS 的重要性越来越大。了解块级方向和内联方向，以及文本的排列方向如何随书写模式发生变化，将来会非常有用。即便你仅使用横向的书写模式，这也能帮助你了解。

在下一部分，我们将会看一下 CSS 中的溢出。

* 上一页
* Overview: Building blocks
* 下一页


在 CSS 中调整大小 - 学习 Web 开发

在 CSS 中调整大小
===========

* 上一页
* Overview: Building blocks
* 下一页

在前面的课程中你已经看到了几种使用 CSS 为页面中元素设定尺寸的方法。在我们设计网页的时候，需要理解这些不同方法之间的差异。在本课程中，我们将总结设定元素尺寸的方法，并定义几个术语，这些内容将会在未来对你有所帮助。

|  |  |
| --- | --- |
| 前提： | 基本的电脑知识、安装了必要的软件、处理文件的基础知识、HTML 基础（学习Introduction to HTML）、理解 CSS 如何工作（学习 CSS 入门）。 |
| 目标： | 理解在 CSS 中约束物体大小的不同方式。 |

原始尺寸，或固有尺寸
----------

在受 CSS 设置影响之前，HTML 元素有其原始的尺寸。一个直观的例子就是图像。一幅图像的长和宽由这个图像文件自身确定。这个尺寸就是固有尺寸。

如果你把图片放置在网页中的时候没有在 `<img>` 标签或 CSS 中设置其尺寸，那么将使用其固有尺寸显示。我们给下面的示例图像绘制了一个边框，以便你看出图像文件的长宽。

一个空的 `<div>` 是没有尺寸的。如果你在你的 HTML 文件中添加一个空 `<div>` 并给予其边框（就像刚才我们为图像做的那样），你会在页面上看到一条线。这是边框被压缩后的效果——它内部没有内容。在我们下面的例子中，边框宽度扩展到整个容器宽度，因为它是块级元素，而块级元素的行为就是这样的。它没有高度，或者说高度为 0，因为内部没有内容。

在上面的例子中，试着在空元素内部添加些内容。现在边框内包含一些文字了，因为元素的高度由其所含内容高度确定。再强调一次，这就是元素的固有尺寸——由其所包含的内容决定。

设置具体的尺寸
-------

我们当然可以给设计中的元素指定具体大小。当给元素指定尺寸（然后其内容需要适合该尺寸）时，我们将其称为**外部尺寸**。以上面例子中的 `<div>` 举例——我们可以给它一个具体的 `width` 和 `height` 值，然后不论我们放什么内容进去它都是该尺寸。正如我们在上一课有关溢出的内容中所发现的，如果内容的数量超出了元素可容纳的空间，则设置的高度会导致内容溢出。

由于存在溢出问题，在网络上使用长度或百分比固定元素的高度需要非常小心。

### 使用百分数

许多时候，百分数是长度单位，正如我们在 Value and units 这节课中讨论的那样，它们常常可与长度互换。当使用百分数时，你需要清楚，它是**什么**东西的百分数。对于一个处于另外一个容器当中的盒子，如果你给予了子盒子一个百分数作为宽度，那么它指的是父容器宽度的百分数。

这是因为百分数是以包含盒子的块为根据解析的。如果我们的 `<div>` 没有被指定百分数的值，那么它会占据 100% 的可用空间，因为它是块级别的元素。如果我们给了它一个百分数作为宽度，那么这就是它原来情况下可以占据空间的百分数。

### 把百分数作为内外边距

如果你把 `margins` 和 `padding` 设置为百分数的话，你会注意到一些奇怪的表现。在下面的例子里，我们有一个盒子，我们给了里面的盒子 10% 的 `margin` 以及 10% 的 `padding`。盒子底部和顶部的内外边距，和左右外边距有同样的大小。

或许，你期望元素的上下外边距是其高度的百分比，元素的左右外边距是其宽度的百分比。但情况并非如此！

使用百分比作为元素外边距（margin）或填充（padding）的单位时，值是以包含块的**内联尺寸**进行计算的，也就是元素的水平宽度。在我们的示例中，所有的外边距或填充都是宽度的 10%。请记住一个事实，当你使用百分比作为元素外边距或填充的单位时，你将得到一个相同尺寸的外边距或填充。

min- 和 max- 尺寸
--------------

除了让万物都有一个确定的大小以外，我们可以让 CSS 给定一个元素的最大或最小尺寸。如果你有一个包含了变化容量的内容的盒子，而且你总是想让它**至少**有个确定的高度，你应该给它设置一个 `min-height` 属性。盒子就会一直保持大于这个最小高度，但是如果有比这个盒子在最小高度状态下所能容纳的更多内容，那么盒子就会变大。

在以下的示例中，你可以看到两个盒子，两个都有 150 像素的确定高度，左边的盒子有 150 像素高，右边的盒子有需要更多空间才能装下的内容，所以它变得比 150 像素高。

这在避免溢出的同时并处理变化容量的内容的时候是很有用的。

`max-width` 的常见用法为，在没有足够空间以原有宽度展示图像时，让图像缩小，同时确保它们不会比这一宽度大。

作为示例，如果你设定一个图像的属性为 `width: 100%`，而且它的原始宽度小于容器，图像会被强制拉伸以变大，看起来像素更加明显。如果它的原始宽度大于容器，它则会溢出。两种情形都不是你想要看到的。

如果你使用了 `max-width: 100%`，那么图像可以变得比原始尺寸更小，但是不会大于原始尺寸的 100%。

在下面的示例里，我们使用了两次相同的图片。第一次使用，属性值已设为 `width: 100%`，位于比图片大的容器里，因此图片拉伸到了与容器相同的宽度；第二次的属性值则设为 `max-width: 100%`，因此它并没有拉伸到充满容器；第三个盒子再一次包含了相同的图片，同时设定了 `max-width: 100%` 属性，这时你能看到它是怎样缩小来和盒子大小相适应的。

这个技术是用来让图片**可响应**的，所以在更小的设备上浏览的时候，它们会合适地缩放。你无论怎样都不应该用这个技术先载入大原始尺寸的图片，再对它们在浏览器中进行缩放。图像应该合适地调整尺寸，以使它们不会比预计中展示时所需要的最大尺寸大。下载过大的图像会造成你的网站变慢，如果用户使用按量收费的网络连接，会让用户花更多钱。

>
> \*\*备注：\*\*了解更多关于响应式图片技术的事情。
>
>
>

视口单位
----

视口，即你在浏览器中看到的部分页面，也是有尺寸的。在 CSS 中，我们有与视口尺寸相关的度量单位，即意为视口宽度的 `vw` 单位，以及意为视口高度的 `vh` 单位。使用这些单位，你可以把一些东西做得随用户的视口改变大小。

`1vh` 等于视口高度的 1%，`1vw` 则为视口宽度的 1%。你可以用这些单位约束盒子的大小，还有文字的大小。在下面的示例里，我们有一个大小被设为 20vh 和 20vw 的盒子。这个盒子里面有一个字母 `A`，其 `font-size` 属性被设成了 10vh。

**如果你改变了 `vh` 和 `vw` 的对应值，盒子和字体的大小也会改变；视口大小的变化也会让它们的大小变化，因为它们是依照视口来定大小的。想看到随着你改变视口大小的时候示例的变化的话，你需要在一个新浏览器视窗里面载入此示例，因为你可以控制该视窗的大小，同时上面示例所在的嵌入的 `<iframe>` 的大小即是对上面示例而言的视口。打开此示例，调整浏览器视窗的大小，观察在盒子和文本的大小上所发生的事情。**

在你的设计中，根据视口改变物件的大小是很有用的。例如，如果你想要在你其他内容之前，有一个充满整个视口的视觉宣传段落，让你的页面的那个部分有 100vh 高的话，会把剩下的内容推到视口的下面，只有向下滚动文档的时候它们才会出现。

小结
--

本节课，你已经得到了一个对于你可能在约束网站上的内容大小的时候，会遇到的一些关键问题的详细介绍。当你继续学习 CSS 布局的时候，约束大小会成为掌握不同布局途径的非常重要的基础，所以在继续之前有必要在这里理解这些概念。

* 上一页
* Overview: Building blocks
* 下一页


一个漂亮的盒子 - 学习 Web 开发

一个漂亮的盒子
=======

* 上一页
* Overview: Building blocks

在这个评估里，通过尝试创造一个引人瞩目的盒子，你将得到更多关于如何创造酷炫盒子的练习。

|  |  |
| --- | --- |
| 前提： | 在开始这个评估之前你应该已经学习过这个模块里的所有其他文章。 |
| 目标： | 测试对 CSS 盒模型和其他盒相关特性的掌握程度，比如背景和边框。 |

起点
--

在开始评估之前，你需要：

* 复制一份HTML和CSS代码，并在一个新的目录下把它们保存为`index.html` 和 `style.css`。

**备注：** 或者你也可以用JSBin或Glitch这样的网站来做这个评估，把链接里的 HTML 和 CSS 代码贴到这些在线编辑器里就行。如果你在用的在线编辑器没有独立的 CSS 面板的话，把 CSS 代码放到 HTML 文档头部的`<style>`元素里就好。

项目简介
----

你的任务是创建一个酷炫的盒子，并探索 CSS 的乐趣。

### 一般任务

* 把 CSS 链接到 HTML 里。
### 样式化盒子

给 `<div>` 添加样式：

* 一个对于大按钮来说合理的宽度，200 像素左右。
* 一个对于大按钮来说合理的高度，并使文本纵向居中。
* 居中文本。
* 用 `rem` 使字体稍大一点，大约 17-18 像素，在注释里说说你的值是怎么算出来的。
* 给你的设计定一个基础颜色，把它作为盒子的背景颜色。
* 把字体颜色设为同一个颜色，使用黑色的文字阴影增加可读性。
* 一个精巧的圆角边框。
* 一个跟基础颜色相近、1 像素宽的实线边框，颜色要稍深一点。
* 一个指向右下角的黑色半透明线性渐变，让它在开始的时候完全透明，在 30% 的处渐变到 0.2 的不透明度，然后保持相同颜色到最后。
* 多个盒阴影：一个标准的盒阴影，使它看起来稍微从页面上浮起来；另外两个是内嵌（inset）的盒阴影，一个是左上角附近的白色半透明阴影和另一个是右下角附近的黑色半透明阴影，让盒子有一个漂亮的 3D 外观。
范例
--

完成之后的盒子可能会像下面的截图这样：

![](/zh-CN/docs/Learn/CSS/Building_blocks/A_cool_looking_box/fancy-box2.png)

评估
--

如果这个评估是一系列课程的一部分，你应该可以让你的老师或导师为你批改。如果你是自学，可以很容易地在Learning Area Discourse thread或Mozilla IRC的#mdn IRC 频道回复得到批改指南。请先自己试着做——作弊学不到任何东西！

* 上一页
* Overview: Building blocks


组织 CSS - 学习 Web 开发

组织 CSS
======

* 上一页
* Overview: Building blocks
* 下一页

在开始在更大的样式表和大项目上作业的时候，你会发现维护一个大型的 CSS 文件很有挑战性。在本文中，我们将会简要看一下在编写你的 CSS 时，让它更加易于维护的一些最佳实践，以及你会在其他人那里看到的，用来增强可维护性的解决方案。

|  |  |
| --- | --- |
| 前提： | 电脑的基本操作，安装了必要的软件，处理文件的基本知识，HTML 基础（学习HTML 介绍），了解 CSS 的工作方式（学习CSS 入门。） |
| 目标： |
 学习组织样式表的一些技巧和最佳实践，了解一些命名常规和在组织 CSS
 以及团队协作时广泛使用的工具。
  |

保持你的 CSS 整洁的技巧
--------------

这里有一些关于保持你的样式表整整齐齐的方式的普适性建议。

### 你的项目有代码风格规范吗？

如果你在和一个小组共同协作完成一个已有的项目，需要检查的第一件事是这一项目是否已经有了 CSS 的代码风格规范。小组的代码风格规范应当总是优先于的个人喜好。做事情很多时候没有对错之分，但是统一是很重要的。

例如你可以看下MDN 的 CSS 代码规范的示例。 (en-US).

### 保持统一

如果你开始为项目指定规则或者独自工作，那么最重要的事情是让各方面都保持统一。统一在所有的地方都会起到实际作用，例如对类使用相同的命名常规，选择一种描述颜色的方式，或者维护一个统一的格式化方式（例如你是使用 Tab 还是空格来缩进代码？如果是空格，用多少个？）

一直遵守一系列规则，你会在编写 CSS 的时候省去不少精神上的预负担，因为一些决定已经定型了。

### 将 CSS 格式化成可读的形式

你可以看到很多 CSS 格式化的方式，一些开发者将所有的规则放在一行里面，像是这样：

```css
.box {
  background-color: #567895;
}
h2 {
  background-color: black;
  color: white;
}
```

还有的开发者更喜欢将所有的东西放在新的一行：

```css
.box {
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
```

CSS 不会管你使用哪种方式来进行格式化，我们自己的看法是，将每个属性值对放在新的一行会更好读。

### 为你的 CSS 加注释

在你的 CSS 里加入注释，不仅可以帮任何未来的开发者处理你的 CSS 文件，也可以在你离开项目一段时间后，帮你在回来时重新上手。

```css
/\* 这是一条 CSS 注释，
它可以分成好几行。\*/
```

在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段 CSS 的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是`||`。

```css
/\* || General styles \*/

...

/\* || Typography \*/

...

/\* || Header and Main Navigation \*/

...
```

你不必在你的 CSS 中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。

为了对旧浏览器保持兼容，你用某种特殊方法使用了一种 CSS 属性，示例：

```css
.box {
  background-color: red; /\* fallback for older browsers that don't support gradients \*/
  background-image: linear-gradient(to right, #ff0000, #aa0000);
}
```

或许你是照着一个教程来做事的，CSS 有些不够直观。此时，你应该在注释里面加入教程的 URL。你应该在你一年或者更长时间以后重新审视你的项目，但只是模模糊糊地想起来之前有个优秀的教程，不知道它在哪里的时候，感谢之前加入注释的自己。

### 在你的样式表里面加入逻辑段落

在样式表里面先给一般的东西加上样式是个好想法。这也就是除了你想特定对某个元素做点什么以外，所有将会广泛生效的样式。典型地，你可以为以下的元素设定规则：

* `body`
* `p`
* `h1`, `h2`, `h3`, `h4`, `h5`
* `ul`和`ol`
* `table`属性
* 链接

在这段样式表里面，我们提供了用于站点类型的默认样式，为数据表格、列表等设立了一份默认的样式。

```css
/\* || GENERAL STYLES \*/

body { ... }

h1, h2, h3, h4 { ... }

ul { ... }

blockquote { ... }
```

在这段之后，我们可以定义一些实用类，例如一个用来移除默认列表样式的类，我们打算将其展示为灵活样式或者其他样式。如果你知道你想要在许多不同的元素上应用的东西，那么你可以把它们加到这里。

```css
/\* || UTILITIES \*/

.nobullets {
  list-style: none;
  margin: 0;
  padding: 0;
}

...
```

然后我们可以加上在整个站点都会用到的所有东西，这可能是像基础页面布局、抬头或者导航栏样式之类的东西。

```css
/\* || SITEWIDE \*/

.main-nav { ... }

.logo { ... }
```

最后我们可以在 CSS 里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。

```css
/\* || STORE PAGES \*/

.product-listing { ... }

.product-box { ... }
```

通过使用这种方式排布代码，我们至少能大致了解，我们能在样式表的哪个部分寻找想要更改的东西。

### 避免太特定的选择器

如果你创建了很特定的选择器，你经常会发现，你需要在你的 CSS 中复用一块代码，以将同样的规则应用到其他元素上。例如，你也许会有像是下面的选择器那样的代码，它在带有`main`类的`<article>`里面的带有`box`类的`<p>`上应用了规则。

```css
article.main p.box {
  border: 1px solid #ccc;
}
```

如果你之后想要在`main`外的什么地方上应用相同的规则，或者在`<p>`外的其他地方，你可能必须在这些规则中加入另一个选择器，或者直接新建个规则。或者，你也可以建立一个名为`box`的类，在任何地方应用。

```css
.box {
  border: 1px solid #ccc;
}
```

将东西设置的更为特定，有时也有意义，但是这一般与其说是通常实践，倒不如说是例外。

### 将大样式表分成几个小的样式表

尤其在你对站点的不同部分设置了很不同的样式的时候，你会想要有个包含了所有普适规则的样式表，还有包含了某些段落所需要的特定规则的更小的样式表。你可以将一个页面连接到多个样式表，层叠的一般规则会在这里生效，即连接的靠后的样式表里面的规则会比前面的有更高优先级。

例如我们会将我们站点的一部分作为一个在线商店，许多 CSS 只会用于样式化商店需要的产品列表和表单。将这些东西放在另外一张样式表里面，只在商店页面进行连接，这会是合理的做法。

这可以让你更容易保持 CSS 的组织性，也意味着如果有多人在写 CSS，你会更少遇到有两个人需要同时编写相同的样式表的情况，防止在源代码的控制上产生冲突。

其他能帮上忙的工具
---------

CSS 本身没有什么内置的组织方式，所以你需要自己完成建立编写 CSS 时维持统一性和规则的工作。Web 社区也已经开发了多种工具和方法，帮助你管理大些的 CSS 项目。由于它们对你的研究会有帮助，而且在你和其他人协作的时候，你也很可能会遇到这些东西，我们加入了一个对其中一些工具和方式的简短的指导。

### CSS 方法论

不必需要自己制定编写 CSS 的规则，你可以选择接纳一个已经已经由社群设计、经由诸多项目检验的方法，并从中获益。这些方法论都是有着结构化的编写和组织 CSS 途径的 CSS 代码指南。典型地，与你为你的项目编写和优化每个选择器为自己定义的规则组相比，它们会倾向于产生更多的多余代码。

但是，在接纳了一个方法以后，你的代码会更有条理，而且因为这些体系许多都是被很广泛使用的，其他的开发者更有可能理解你在使用的方式，会以相同的方式编写他们自己的代码，而不需要从头接纳你自己的个人方法论。

#### OOCSS

你会遇到的大多数方式都有一部分归功于面向对象的 CSS（OOCSS）的概念，这是一种因Nicole Sullivan 的努力而流行的方式。OOCSS 的基本理念是将你的 CSS 分解成可复用的对象，于是你可以在你的站点上任何需要的地方使用。OOCSS 的标准示例是在The Media Object中所描述的排布。这一排布一方面让图片、视频或者其他元素保持固定尺寸，而另一方面也让其他内容可伸缩。这是我们在用于评论、列表等网站随处可见的排布。

如果你没有使用一种 OOCSS 的方法，你或许会创建一个用在这种排布所应用的不同地方的自定义 CSS，例如创建一个叫做`comment`的类，用于组件部分的一组规则，然后是叫做`list-item`的类，除了一些细小的区别外，它几乎和`comment`类完全相同。这两个组件之间的不同是列表项有一个底边，在评论里的图像有边框而列表项里面的图像没有。

```css
.comment {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.comment img {
  border: 1px solid grey;
}

.comment .content {
  font-size: 0.8rem;
}

.list-item {
  display: grid;
  grid-template-columns: 1fr 3fr;
  border-bottom: 1px solid grey;
}

.list-item .content {
  font-size: 0.8rem;
}
```

在 OOCSS 中，你可以建立一个叫作`media`的排布，里面包含所有的两种排布所共有的 CSS——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式。

```css
.media {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

.media .content {
  font-size: 0.8rem;
}

.comment img {
  border: 1px solid grey;
}

.list-item {
  border-bottom: 1px solid grey;
}
```

在你的 HTML 里面，评论需要同时应用`media`和`comment`类：

```html
<div class="media comment">
  <img />
  <div class="content"></div>
</div>
```

列表项应用了`media`和`list-item`：

```html
<ul>
  <li class="media list-item">
    <img />
    <div class="content"></div>
  </li>
</ul>
```

Nicole Sullivan 在描述这种方式和推广上所做的工作导致，即使是那些不严格遵守 OOCSS 方式的人，今天也可以大致以这种方式复用 CSS，它已经普遍地进入到我们的理解当中，成为了与事物交互的好办法。

#### BEM

BEM 即为块级元素修饰字符（Block Element Modifier）。在 BEM 中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用 BEM 的代码，因为代码中在 CSS 的类里使用了多余的一个下划线和连字符。例如看看这个来自关于BEM 命名常规的页面里面的 HTML 所应用的类：

```html
<form class="form form--theme-xmas form--simple">
  <input class="form\_\_input" type="text" />
  <input class="form\_\_submit form\_\_submit--disabled" type="submit" />
</form>
```

增加的类和应用到 OOCSS 例子里面的相似，但是它们遵守了 BEM 严格的命名常规。

BEM 在大些的 Web 项目中被广泛使用，许多人用这种方式写他们的 CSS。你可能会在没有提及为何 CSS 如此布局的时候，遇到 BEM 语法的例子，甚至是在教程中

阅读BEM 101 中关于 CSS Tricks 的段落以了解更多和这个系统相关的信息。

#### 其他常见体系

应用中，有很多这样的体系。其他流行的方式包括 Jonathan Snook 创造的Scalable and Modular Architecture for CSS (SMACSS)、Harry Roberts 的ITCSS以及原本由 Yahoo! 创造的Atomic CSS (ACSS)。如果你遇到了使用这几种方式之一的项目，那么好处就是你可以搜索到许多文章和指导，帮你理解如何以同种方式写代码。

使用这样的体系的缺点是，它们会看起来过于复杂，尤其是对于小项目。

### CSS 的构建体系

另一种组织 CSS 的方法是利用一些对于前端开发者可用的工具，它们让你可以稍微更程式化地编写 CSS。有很多工具，我们将它们分成**预处理工具**和**后处理工具**。预处理工具以你的原文件为基础运行，将它们转化为样式表；后处理工具使用你已完成的样式表，然后对它做点手脚——也许是优化它以使它加载得更快。

使用这些工具的任何一部分都需要你的开发环境能运行进行处理工作的脚本。许多代码编辑器能为你做这项工作，或者你也可以安装一个命令行工具来辅助工作。

最为流行的预处理工具是Sass，这里不是 Sass 的教程，所以我只会简要地解释一些 Sass 能做的事情，在组织的时候真的会帮到你，即使你没有用到 Sass 的任何其他的独特功能。

#### 定义变量

CSS 现在有原生的自定义属性，所以这个功能越来越没那么重要了，但是你使用 Sass 的可能原因之一为，能够作为设置定义用于一个项目的所有颜色和字体，之后这些变量在项目中可用。这意味着如果你意识到你用了错误的蓝色阴影，你只需要在一个地方修改。

如果我们创建了在下面的第一行里面叫做`$base-color`的变量，我们之后可以在样式表的任何需要这一颜色的地方使用它。

```css
$base-color: #c6538c;

.alert {
  border: 1px solid $base-color;
}
```

编译完 CSS 后，你会在最终的样式表里面得到下面的 CSS：

```css
.alert {
  border: 1px solid #c6538c;
}
```

#### 编译组件样式表

我在上面提到了，一种组织 CSS 的方式是将样式表分成小的样式表。在使用 Sass 时，你可以在另一个层次上理解，然后得到许多小样式表——甚至到了每个组件都有一个独立样式表的地步。使用 Sass 中的 include 功能，这些都可以被编译为一个、或者少数几个真正链接到你的网站的样式表。

在这篇博文里面，你可以看下一个开发者是如何处理这个问题的。

**备注：** 一个简单的尝试 Sass 的方式是使用 CodePen，你可以为一个 Pen 在设置中启用用于你的 CSS 的 Sass，CodePen 将会为你运行 Sass 语法分析功能，这样你就能看到应用了普通 CSS 的生成网页。有时你会发现 CSS 教程在它们的 CodePen 演示里面使用了 Sass 而不是普通 CSS，所以了解一点点关于 Sass 的事情是有用的。

#### 后处理以进行优化

如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化 CSS。后处理解决方案中，通过这种方式实现的一个例子是cssnano。

结语
--

这是我们学习 CSS 的指导的最后一部分，正如你所见，你可以通过许多方式从这里继续对 CSS 的探索。

欲了解更多关于 CSS 布局的事情，查看学习 CSS 布局这节课。

你应该也有了探索MDN CSS学习材料的剩余部分的技能。你可以查阅属性和值，探索我们的CSS Cookbook来了解可用的排布，在诸如Guide to CSS Grid Layout的一些更加专门的指导里阅读更多。.

* 上一页
* Overview: Building blocks
* 下一页


背景与边框 - 学习 Web 开发

背景与边框
=====

* 上一页
* Overview: Building blocks
* 下一页

在本课程中，我们将看看可以用 CSS 背景和边框做的一些创造性事情。从添加渐变、背景图像到圆角，背景和边框可以解决 CSS 中的许多样式问题。

|  |  |
| --- | --- |
| 前提： | 基础的计算机知识，安装了基本的软件，了解基本的文件处理知识和 HTML 基础（已经学习了 HTML 介绍)，以及 CSS 如何工作的基本常识（已经学习了 CSS 入门概述）。 |
| 目标： | 学习如何为盒子的背景和边框添加样式。 |

CSS 的背景样式
---------

CSS `background` 属性是本课程中我们将遇到的一些普通背景属性的简写表示。如果你在样式表中发现了一个复杂的背景属性，可能会觉得有点难以理解，因为可以同时传入这么多的值。

```css
.box {
  background:
    linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.2) 39%,
        rgba(51, 56, 57, 1) 96%
      ) center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat,
    rebeccapurple;
}
```

我们将在本教程的后半部分回到这个简写表示的工作原理，但首先让我们通过查看各个背景属性来了解在 CSS 中可以对背景做哪些不同的事情。

### 背景颜色

`background-color` 属性定义了 CSS 中任何元素的背景颜色。属性接受任何有效的 `<color>` 值。`background-color` 可以延伸至元素的内容和内边距盒子的下面。

在下面的例子中，我们用各种颜色值为盒子、标题和 `<span>` 元素添加背景色。

**尝试修改为任何可用的 <color> 值。**

### 背景图像

`background-image` 属性可以在一个元素的背景中显示一个图像。在下面的例子中，我们有两个盒子，其中一个盒子具有比盒子大的背景图像（balloons.jpg），另一个盒子具有较小的单个星星的图像（star.png）。

这个示例演示了关于背景图像的两种情形。默认情况下，大图不会缩小以适应盒子，因此我们只能看到它的一个小角，而小图则是平铺以填充方框。在

**如果除了背景图像外，还指定了背景颜色，则图像将显示在颜色的顶部。尝试向上面的示例添加 `background-color` 属性，看看效果如何。**

#### 控制背景平铺行为

`background-repeat` 属性用于控制图像的平铺行为。可用的值是：

* `no-repeat`——阻止背景重复平铺。
* `repeat-x`——仅水平方向上重复平铺。
* `repeat-y`——仅垂直方向上重复平铺。
* `repeat`——默认值，在水平和垂直两个方向重复平铺。

**在下面的示例中尝试这些值。我们已经将值设置为 `no-repeat`，因此你将只能看到一个星星。尝试不同的值（`repeat-x` 和 `repeat-y`），看看它们的效果如何。**

#### 调整背景图像的大小

在上面的例子中，我们有一个很大的图像（*ballons.jpg*），由于它比作为背景的元素大，所以最后被裁剪掉了。在这种情况下，我们可以使用 `background-size` 属性，它可以设置长度或百分比值，来调整图像的大小以适应背景。

你也可以使用关键字：

* `cover`：浏览器将使图像足够大，使它完全覆盖了盒子区域，同时仍然保持其宽高比。在这种情况下，图像的部分区域可能会跳出盒子外。
* `contain`：浏览器会将图像调整到适合框内的尺寸。在这种情况下，如果图像的长宽比与盒子的长宽比不同，你可能会在图像的两边或顶部和底部出现空隙。

在下面的示例中，我使用了上面示例中的 *balloons.jpg* 图片，并使用长度单位来调整方框内的大小。你可以看到这扭曲了图像。

试试这些：

* 改变用于修改背景大小的长度单位。
* 去掉长度单位，看看使用 `background-size: cover` 或 `background-size: contain` 时会发生什么。
* 如果你的图像小于盒子，可以更改 `background-repeat` 的值来重复平铺图像。

#### 背景图像定位

`background-position` 属性允许你选择背景图片出现在它所应用的盒子上的位置。这使用了一个坐标系统，其中方框的左上角是 `(0,0)`，方框沿水平（`x`）和垂直（`y`）轴定位。

**备注：** 默认的 `background-position` 值是 `(0,0)`。

最常见的 `background-position` 值有两个单独的值——一个水平值后面跟着一个垂直值。

你可以使用像 `top` 和 `right` 这样的关键字（在 `background-image` 页面上查找其他的关键字）：

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top center;
}
```

或者使用长度和百分比值：

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px 10%;
}
```

你也可以将关键字与长度或百分比混合在一起，在这种情况下，第一个值必须指水平位置或偏移，第二个值指垂直位置。例如：

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: 20px top;
}
```

最后，你还可以使用四值语法来指示到盒子的某些边的距离——在本例中，长度单位是与其前面的值的偏移量。所以在下面的 CSS 中，我们将背景定位在距顶部 20px 和右侧 10px 处：

```css
.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}
```

**使用下面的示例来处理这些值并在框内移动星星。**

**备注：** `background-position` 是 `background-position-x` 和 `background-position-y` 的简写，它们允许用户分别设置不同的坐标轴的值。

### 渐变背景

当渐变用于背景时，也可以使用像图像一样的 `background-image` 属性设置。

你可以在 MDN 的 `<gradient>` 数据类型页面上，了解更多关于渐变的不同类型，以及使用它们可以做的事情。使用渐变的一个有趣的方法是使用网络上许多 CSS 渐变生成器中的一个，比如这个。你可以创建一个渐变，然后复制和粘贴生成它的源代码。

在下面的示例中尝试一些不同的渐变。在这两个盒子里，我们分别有一个线性渐变，它延伸到整个盒子上，还有一个径向渐变，它有一个固定的大小，因此会重复。

### 多个背景图像

也可以有多个背景图像——在单个属性值中指定多个 `background-image` 值，用逗号分隔每个值。

当你这样做时，你可能会出现背景图片相互重叠的情况。背景将分层，最后列出的背景图片位于最下层，而之前的每张图片都堆在代码中紧随其后的那张图片之上。

**备注：** 渐变可以与常规的背景图像很好地混合在一起。

其他 `background-*` 属性也可以像 `background-image` 一样使用逗号分隔的方式设置：

```css
background-image: url(image1.png), url(image2.png), url(image3.png),
  url(image4.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;
```

不同属性的每个值，将与其他属性中相同位置的值匹配。例如，上面的 `image1` 的 `background-repeat` 值将是 `no-repeat`。但是，当不同的属性具有不同数量的值时，会发生什么情况呢？答案是较小数量的值会循环——在上面的例子中有四个背景图像，但是只有两个背景位置值。前两个位置值将应用于前两个图像，然后它们将再次循环——`image3` 将被赋予第一个位置值，`image4` 将被赋予第二个位置值。

**我们来试一试。在下面的示例中包含了两个图像。为了演示叠加顺序，请尝试切换哪个背景图像在列表中最先出现。或使用其他属性更改位置、大小或重复值。**

### 背景附加

我们为背景提供的另一个选项是指定内容滚动时的滚动方式。这是用 `background-attachment` 属性控制的，它可以取以下值：

* `scroll`：使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。实际上，背景被固定在页面的相同位置，所以它会随着页面的滚动而滚动。
* `fixed`：使元素的背景固定在视口上，这样当页面或元素内容滚动时，它就不会滚动。它将始终保持在屏幕上相同的位置。
* `local`：将背景固定在它所设置的元素上，所以当你滚动该元素时，背景也随之滚动。

`background-attachment` 属性只有在有内容要滚动时才会有效果，所以我们做了一个示例来演示这三个值之间的区别——看看 background-attachment.html（或者看看这里的源代码）。

### 使用 background 简写属性

正如我在本课开始时提到的，你将经常看到使用 `background` 属性指定的背景。这种简写形式允许你一次设置所有不同的属性。

如果使用多个背景，则需要为第一个背景指定所有普通属性，然后在逗号后面添加下一个背景。在下面的示例中，我们有一个渐变，它指定大小和位置，然后是指定为 `no-repeat` 的图像背景，它指定位置，然后是颜色。

这里有一些规则，需要在简写背景图像属性时遵循，例如：

* `background-color` 只能在最后一个逗号之后指定。
* `background-size` 值只能立即包含在 `background-position` 之后，用“/”字符分隔，例如：`center/80%`。

查看 `background` 的 MDN 页面，以查看所有的注意事项。

### 背景的无障碍考虑

当你把文字放在背景图片或颜色上面时，你应该注意你有足够的对比度让文字对你的访客来说是清晰易读的。如果指定了一个图像，并且文本将被放置在该图像的顶部，你还应该指定一个 `background-color`，以便在图像未加载时文本也足够清晰。

屏幕阅读器不能解析背景图像，因此背景图片应该只是纯粹的装饰；任何重要的内容都应该是 HTML 页面的一部分，而不是包含在背景中。

边框
--

在学习盒子模型时，我们发现了边框如何影响盒子的大小。在这节课中，我们将看看如何创造性地使用边框。通常，当我们使用 CSS 向元素添加边框时，我们使用一个简写属性在一行 CSS 中设置边框的颜色、宽度和样式。

我们可以使用 `border` 为一个框的所有四条边设置边框。

```css
.box {
  border: 1px solid black;
}
```

或者我们可以只设置盒子的一条边，例如：

```css
.box {
  border-top: 1px solid black;
}
```

这些简写等价于：

```css
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}
```

也可以使用更加细粒度的属性：

```css
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}
```

**备注：** 这些顶部、右侧、底部和左侧边框属性还具有与文档写入模式相关的映射逻辑属性（例如，从左到右或从右到左的文本，或从上到下）。在下一课中，我们将探讨这些问题，这包括处理不同的文本方向。

有各种各样的样式可以用于边框。在下面的例子中，我们为框的四个边使用了不同的边框样式。调整边框样式、宽度和颜色，看看边框是如何工作的。

### 圆角

盒子上的圆角是通过使用 `border-radius` 属性和与盒子的每个角相关的普通属性来实现的。两个长度或百分比可以作为一个值，第一个值定义水平半径，第二个值定义垂直半径。在很多情况下，你只会传入一个值，这个值会被用于这两个。

例如，要使一个盒子的四个角都有 10px 的圆角半径：

```css
.box {
  border-radius: 10px;
}
```

或使右上角的水平半径为 1em，垂直半径为 10％：

```css
.box {
  border-top-right-radius: 1em 10%;
}
```

我们在下面的示例中设置了所有四个角，然后更改右上角的值使之不同。你可以使用这些值来更改圆角样式。查看 `border-radius` 的属性页，查看可用的语法选项。

技能测试！
-----

你已经到了本文的结尾，还能记住最重要的信息吗？你可以在继续之前找到一些进一步的测试来验证你是否记住了这些重要知识——参见技能测试：背景和边框。

总结
--

我们在这里涵盖了相当多的内容，你可以看到为一个盒子添加背景或边框有相当多的内容。如果你想进一步了解我们所讨论的任何功能，请浏览不同的属性页面。MDN 上的每一个页面都有更多的使用实例，供你玩耍和增强你的知识。

在下一篇文章中，我们将了解文档的书写模式如何与 CSS 交互。当文本不是从左到右流动时会发生什么？

* 上一页
* Overview: Building blocks
* 下一页


图像、媒体和表单元素 - 学习 Web 开发

图像、媒体和表单元素
==========

* 上一页
* Overview: Building blocks
* 下一页

在这节课里，我们来看一下，CSS 是如何处理某些特殊元素的。图像、其他媒体和表格元素的表现和普通的盒子有些不同，这取决于你使用 CSS 格式化它们的能力。理解什么可能做到，什么不可能做到能够省些力气，本节课将会聚焦于一些你需要知道的主要的事情上。

|  |  |
| --- | --- |
| 前提： |
 计算机基础知识、安装基础软件、处理文件的基本知识、HTML 基础（学习
 HTML 介绍）和对 CSS 工作原理的大致理解（学习
 CSS 第一步）
  |
| 学习目标： | 理解某些元素经 CSS 样式化后的非常规表现。 |

替换元素
----

图像和视频被描述为\*\*替换元素\*\*。这意味着 CSS 不能影响它们的内部布局——而仅影响它们在页面上相对于其他元素的位置。但是，正如我们将看到的，CSS 可以对图像执行多种操作。

某些替换元素（例如图像和视频）也具有**宽高比**。这意味着它在水平（x）和垂直（y）方向上均具有大小，并且默认情况下将使用文件的固有尺寸进行显示。

调整图像大小
------

正如你从之前的几节课中所学到的那样，CSS 中万物皆盒。如果你把一张图片放在一个盒子里，而这张图片的原始长和宽比盒子的小或大，那么这张图要么缩在盒子里，要么就从盒子里面溢出。你需要决定如何处理这样的溢出。

下面的示例中有两个盒子，长宽均为 200 像素：

* 一个包含了一张小于 200 像素的图像，它比盒子小，并且不会自动拉伸来充满盒子。
* 另一张图像大于 200 像素，溢出了盒子。

那么该如何处理溢出问题呢？

正如我们在之前的课程 所学的那样，一个常用的方法是将一张图片的 `max-width` 设为 100%。这将会使图片的尺寸小于等于盒子。这个技术也会对其他替换元素（例如 `<video>`，或者 `<iframe>` 起作用。

**尝试向上面的示例中的 `<img>` 元素加入 `max-width: 100%`，你会看到，左边那张小的图像没有变化，而大的图像变小了，恰好装在了盒子里。**

你可以选择对容器内的图像作其他方式的处理。例如，你可能想把一张图像调整到能够完全盖住一个盒子的大小。

`object-fit` 属性可以在这里帮助你。当使用 `object-fit` 时，替换元素可以以多种方式被调整到合乎盒子的大小。

下面的示例中我们使用了值 `cover` 来缩小图像，同时维持了图像的原始比例。这样图像就可以充满盒子。但由于比例保持不变，图像多余的一部分将会被盒子裁切掉。

如果我们使用值 `contain`，图像就会被缩放到足以完整地放到盒子里面的大小。如果它和盒子的比例不同，将会出现“开天窗”的结果。

你可能也想试试 `fill` 值，它可以让图像充满盒子，但是不会维持比例。

布局中的替换元素
--------

在对替换元素使用各种 CSS 布局时，你可能会发现他们的表现方式与其他元素有一些细节上的差异。例如，flex 或者 grid 布局中，默认情况下元素会被拉伸到充满整块区域。但是图像不会被拉伸，而会对齐到网格区域或者弹性容器的起始处。

你可以在下面的示例中看到这一现象。该示例有一个两列两行的网格容器，里面有四个物件。所有的 `<div>` 元素有自己的背景色，被拉伸到充满了行和列。但是，图像并没有被拉伸。

如果你是按序阅读这些课程的，那么你可能还没有看到布局的部分。不过没关系，只要记住替换元素在成为网格或者弹性布局的一部分时，有不同的默认行为就好了。这一默认行为很有必要，因为它避免了替换元素被布局拉伸成奇怪的样子。

为了强制图像拉伸，以充满其所在的网格单元，你必须做类似于下面的事情：

```css
img {
  width: 100%;
  height: 100%;
}
```

这将会无条件地拉伸图像，所以很可能不会是你想要的。

form 元素
-------

用 CSS 格式化表单元素是一个需要技巧的工作，HTML 表单指南包含了详细的格式化表单元素的指导，我不会在这里复述。本节需要介绍的是一些值得关注的关键基础内容。

很多表单控件是通过 `<input>` 元素添加到网页上的。该元素定义了简单的表单区域，例如文字输入。更进一步还有 HTML5 新加入的更加复杂的区域，例如颜色和日期撷取器。另外还有一些其他元素，例如用于多行文本输入的 `<textarea>`，以及那些用来包含和标记表单特定部分的元素，例如 `<fieldset>` 和 `<legend>` 。

HTML5 还包含了允许 Web 开发者指定必填区域的特性，甚至还能检验填入内容的类型。如果用户输入了一些不符合要求的内容，或者未填写必填区域，浏览器会显示错误提示。不同的浏览器在给此类元素样式化和自定义方面不尽相同。

### 样式化文本输入元素

允许文本输入的元素有很多，例如 `<input type="text">`，及其指定特定类型的元素，如 `<input type="email">` 以及 `<textarea>` 元素，这些都是相当容易样式化的，它们和页面上其他盒子的表现相同。只不过在不同的操作系统和浏览器上访问时这些元素默认的样式化方式可能不同。

在下面的示例中，我们已经将一些文本输入元素用 CSS 样式化了。可以看到，边框、内外边距之类的东西都如期生效了。现在，我们使用属性选择器来指向不同的输入类型，尝试通过改变边框、添加输入区域背景色、改变字体和内边距的方式来改变表单的外观。

**警告：** 你应该谨慎改变表单样式，确保用户仍然能轻松辨认表单元素。原则上，你可以创建一个没有边框和背景的，几乎无法与周围的内容区分开来的输入表单，但这会使辨认和填写变得非常困难。

正如在本教程的 HTML 部分的样式化表单里解释的那样，许多更加复杂的输入类型是由操作系统渲染的，无法进行样式化。因而你应该总是留意到表单在不同的用户看来差异很大，并在许多浏览器上测试复杂的表单。

### 继承和表单元素

在一些浏览器中，表单元素默认不会继承字体样式，因此如果你想要确保你的表单填入区域使用 body 中或者一个父元素中定义的字体，你需要向你的 CSS 中加入这条规则。

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
}
```

### form 元素与 box-sizing

跨浏览器的 form 元素对于不同的挂件使用不同的盒子约束规则。你已经在我们的盒模型课中学习了 `box-sizing` 属性，在样式化表单时候，你可以使用这一知识，确保在给 form 元素设定宽度和高度时可以有统一的体验。

为了保证统一，最好将所有元素的内外边距都设为 `0`，然后在单独进行样式化控制的时候将这些加回来。

```css
button,
input,
select,
textarea {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
```

### 其他有用的设置

除了上面提到的规则以外，你也应该在 `<textarea>` 上设置 `overflow: auto` 以避免 IE 在不需要滚动条的时候显示滚动条：

```css
textarea {
  overflow: auto;
}
```

### 将一切都放在一起“重置”

作为最后一步，我们可以将上面讨论过的各式属性包起来，成为以下的“表单重置”，以提供一个统一的在其上继续进行工作的地基，这包含了前三节提到的所有东西：

```css
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

textarea {
  overflow: auto;
}
```

**备注：** 通用样式表被许多开发者用作所有项目的一系列基础样式，典型就是那些做了和以上提到相似的事情的那些，在你开始自己的 CSS 作业前，它确保了跨浏览器的任何事情都被默认设定为统一样式。它们不像以往那么重要了，因为浏览器显著地要比以往更加统一。但是，如果你想要看一个例子，可以看看这个Normalize.css，它被许多项目用作基础，是非常流行的样式表。

至于样式化表单的更加深入的信息，可以看下这些教程的 HTML 一节的这两篇文章：

* Styling HTML Forms
* Advanced Styling for HTML Forms
技能测试
----

我们在本文中介绍了很多内容，但是你记住最重要的内容了么？在继续之前，你可以通过一些其他测试来验证你是否真正学习到了这些知识，参见技能测试

小结
--

这节课致力于说明在你用 CSS 处理图像、媒体和其他不普通的元素时，你会遇到的不同之处。在下篇文章中，我们将会了解一些在你样式化 HTMl 表格时有用的技巧。

* 上一页
* Overview: Building blocks
* 下一页


盒模型 - 学习 Web 开发

盒模型
===

* 上一页
* Overview: Building blocks
* 下一页

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

本文围绕“盒模型”为主题展开。旨在于完成学习后，你能够在“理解盒装模型原理”的基础上，完成更加复杂的布局任务。

|  |  |
| --- | --- |
| 前提： |
 基本的计算机知识，安装基本的软件，文件处理基本知识，HTML 基础知识 (如果不了解 HTML，请移步
 学习 HTML 入门)，以及 CSS 如何工作的基本常识 (如果不了解 CSS，请移步
 学习 CSS 第一步.)
  |
| 目标： | 学习盒模型的基本理论，了解盒装模型的工作原理，了解盒模型与替代模型的区别以及如何进行切换。 |

块级盒子（Block box）和 内联盒子（Inline box）
---------------------------------

在 CSS 中我们广泛地使用两种“盒子”——**块级盒子**（block box）和**内联盒子**（inline box）。这两种盒子会在**页面流**（page flow）和元素之间的关系方面表现出不同的行为：

一个被定义成块级的（block）盒子会表现出以下行为：

* 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
* 每个盒子都会换行
* `width` 和 `height` 属性可以发挥作用
* 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题 (`<h1>`等) 和段落 (`<p>`) 默认情况下都是块级的盒子。

如果一个盒子对外显示为 `inline`，那么他的行为如下：

* 盒子不会产生换行。
* `width` 和 `height` 属性将不起作用。
* 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 `inline` 状态的盒子推开。
* 水平方向的内边距、外边距以及边框会被应用且会把其他处于 `inline` 状态的盒子推开。

用做链接的 `<a>` 元素、 `<span>`、 `<em>` 以及 `<strong>` 都是默认处于 `inline` 状态的。

我们通过对盒子`display` 属性的设置，比如 `inline` 或者 `block` ，来控制盒子的外部显示类型。

补充：内部和外部显示类型
------------

在这里最好也解释下**内部** 和 **外部** 显示类型。如上所述，css 的 box 模型有一个外部显示类型，来决定盒子是块级还是内联。

同样盒模型还有内部显示类型，它决定了盒子内部元素是如何布局的。默认情况下是按照 \*\*正常文档流 \*\*布局，也意味着它们和其他块元素以及内联元素一样 (如上所述).

但是，我们可以通过使用类似 `flex` 的 `display` 属性值来更改内部显示类型。如果设置 `display: flex`，在一个元素上，外部显示类型是 `block`，但是内部显示类型修改为 `flex`。该盒子的所有直接子元素都会成为 flex 元素，会根据弹性盒子（Flexbox）规则进行布局，稍后你将了解这些规则。

**备注：** 想要了解更多有关显示值以及盒子在块和内联布局中的工作原理，请参阅常规流中的块和内联布局。

当你进一步了解 css 布局的更多细节的时候，你会了解到 `flex`，和其他内部显示类型会用到的值，例如 `grid` 。

块级和内联布局是 web 上默认的行为——正如上面所述，它有时候被称为 *正常文档流*，因为如果没有其他说明，我们的盒子布局默认是块级或者内联。

不同显示类型的例子
---------

让我们继续看看别的例子。下面三个 html 元素，都有一个外部显示类型 `block`。第一个是一个段落，在 CSS 中加了边框。浏览器把它渲染成一个块级盒子，所以段落从新的一行开始，而且宽度占满一行。

第二个是一个列表，布局属性是 `display: flex`。将在容器中建立一个 flex 布局，但是每个列表是一个块级元素——像段落一样——会充满整个容器的宽度并且换行。

下面有个块级段落，里面有两个 `<span>` 元素。正常情况下是 `inline`，但是其中一个加了 block 类，设置属性 `display: block`。

我们可以看到 `inline` 元素在下面例子中的表现。 `<span>` 在第一段默认是内联元素所以不换行。

还有一个 `<ul>` 设置为 `display: inline-flex`，使得在一些 flex 元素外创建一个内联框。

最后设置两个段落为 `display: inline`。inline flex 容器和段落在一行上而不是像块级元素一样换行。

**你可以修改 `display: inline` 为 `display: block` 或者 `display: inline-flex` 改为 `display: flex` 来观察显示模式切换。**

在后面的内容中会遇到诸如弹性盒子布局的内容；现在需要记住的是， `display` 属性可以改变盒子的外部显示类型是块级还是内联，这将会改变它与布局中的其他元素的显示方式。

剩下的内容，我们会专注于外部显示类型。

什么是 CSS 盒模型？
------------

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分——margin、border、padding 和 content——合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。

### 盒模型的各个部分

CSS 中组成一个块级盒子需要：

* **Content box**: 这个区域是用来显示内容，大小可以通过设置 `width` 和 `height`.
* **Padding box**: 包围在内容区域外部的空白区域；大小通过 `padding` 相关属性设置。
* **Border box**: 边框盒包裹内容和内边距。大小通过 `border` 相关属性设置。
* **Margin box**: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 `margin` 相关属性设置。

如下图：

![Diagram of the box model](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model/box-model.png)

### 标准盒模型

在标准模型中，如果你给盒设置 `width` 和 `height`，实际设置的是 *content box*。padding 和 border 再加上设置的宽高一起决定整个盒子的大小。见下图。

假设定义了 `width`, `height`, `margin`, `border`, and `padding`:

```css
.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
```

如果使用标准模型，实际占用空间的宽高分别为：宽度 = 410px (350 + 25 + 25 + 5 + 5)，高度 = 210px (150 + 25 + 25 + 5 + 5)。

![Showing the size of the box when the standard box model is being used.](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model/standard-box-model.png)

**备注：** margin 不计入实际大小——当然，它会影响盒子在页面所占空间，但是影响的是盒子外部空间。盒子的范围到边框为止——不会延伸到 margin。

### 替代（IE）盒模型

你可能会认为盒子的大小还要加上边框和内边距，这样很麻烦，而且你的想法是对的 ! 因为这个原因，css 还有一个替代盒模型。使用这个模型，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分。使用上面相同的样式得到 (width = 350px, height = 150px).

![Showing the size of the box when the alternate box model is being used.](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model/alternate-box-model.png)

默认浏览器会使用标准模型。如果需要使用替代模型，你可以通过为其设置 `box-sizing: border-box` 来实现。这样就可以告诉浏览器使用 `border-box` 来定义区域，从而设定你想要的大小。

```css
.box {
  box-sizing: border-box;
}
```

如果你希望所有元素都使用替代模式，而且确实很常用，设置 `box-sizing` 在 `<html>` 元素上，然后设置所有元素继承该属性，正如下面的例子。如果想要深入理解，请看 the CSS Tricks article on box-sizing。

```css
html {
  box-sizing: border-box;
}
\*,
\*::before,
\*::after {
  box-sizing: inherit;
}
```

**备注：** 一个有趣的历史记录——Internet Explorer 默认使用替代盒模型，没有可用的机制来切换。（译者注：IE8+ 支持使用 `box-sizing` 进行切换）

玩转盒模型
-----

下面的例子中，你可以看到两个盒子。都有类 `.box`，给了相同的 `width`, `height`, `margin`, `border`, and `padding`。唯一区别是第二个设置了替代模型。

**你能改变第二个盒子的大小 (通过添加 CSS 到 `.alternate` 类中) 让它和第一个盒子宽高一样吗？**

**备注：** 单击此处查看答案。

### 使用调试工具来查看盒模型

浏览器开发者工具可以使你更容易地理解 box 模型。如果你在 Firefox 的 DevTools 中查看一个元素，你可以看到元素的大小以及它的外边距、内边距和边框。这是一个很好的检查元素大小的方式，可以便捷的判断你的盒子大小是否符合预期 !

![Inspecting the box model of an element using Firefox DevTools](/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model/box-model-devtools.png)

外边距，内边距，边框
----------

你已经在上面的示例中看到了`margin`、`padding`和`border`属性。该示例中使用的是属性的**简写**，允许我们一次设置盒子的四个边。这些简写等价于分别控制盒子的不同边的普通写法。

接下来，我们更详细地研究这些属性：

### 外边距

外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。无论使用标准模型还是替代模型，外边距总是在计算可见部分后额外添加。

我们可以使用`margin`属性一次控制一个元素的所有边距，或者每边单独使用等价的普通属性控制：

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`

**在下面的示例中，尝试更改外边距的值，来查看当前元素和其包含元素，在外边距设置为正时是如何推开周边元素，以及设置为负时，是如何收缩空间的。**

#### 外边距折叠

理解外边距的一个关键是外边距折叠的概念。如果你有两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距的大小。

在下面的例子中，我们有两个段落。顶部段落的页 `margin-bottom`为 50px。第二段的`margin-top` 为 30px。因为外边距折叠的概念，所以框之间的实际外边距是 50px，而不是两个外边距的总和。

**你可以通过将第 2 段的 `margin-top` 设置为 0 来测试它。两个段落之间的可见边距不会改变——它保留了第一个段落 `margin-bottom`设置的 50 像素。**

有许多规则规定了什么时候外边距会折叠，什么时候不会折叠。相关更多信息，请参阅外边距重叠。现在首先要记住的事情是，外边距会折叠这个事情。如果你用外边距创建空间而没有得到你想要的效果，那这可能就是这个原因。

### 边框

边框是在边距和填充框之间绘制的。如果你正在使用标准的盒模型，边框的大小将添加到框的宽度和高度。如果你使用的是替代盒模型，边框越大会使内容框越小，因为它会占用一些可用的宽度和高度。

为边框设置样式时，有大量的属性可以使用——有四个边框，每个边框都有样式、宽度和颜色，我们可能需要对它们进行操作。

可以使用`border`属性一次设置所有四个边框的宽度、颜色和样式。

分别设置每边的宽度、颜色和样式，可以使用：

* `border-top`
* `border-right`
* `border-bottom`
* `border-left`

设置所有边的颜色、样式或宽度，请使用以下属性：

* `border-width`
* `border-style`
* `border-color`

设置单边的颜色、样式或宽度，可以使用最细粒度的普通属性之一：

* `border-top-width`
* `border-top-style`
* `border-top-color`
* `border-right-width`
* `border-right-style`
* `border-right-color`
* `border-bottom-width`
* `border-bottom-style`
* `border-bottom-color`
* `border-left-width`
* `border-left-style`
* `border-left-color`

**设置边框的颜色、样式或宽度，可以使用最细粒度的普通属性或者简写属性。在下面的示例中，我们使用了各种普通属性或者简写属性来创建边框。尝试一下不同的属性，以检查你是否理解它们是如何工作的。MDN 中的边框属性页面为你提供可用的不同边框样式的信息。**

### 内边距

内边距位于边框和内容区域之间。与外边距不同，你不能有负数量的内边距，所以值必须是 0 或正的值。应用于元素的任何背景都将显示在内边距后面，内边距通常用于将内容推离边框。

我们可以使用`padding`简写属性控制元素所有边，或者每边单独使用等价的普通属性：

* `padding-top`
* `padding-right`
* `padding-bottom`
* `padding-left`

**如果在下面的示例中更改类`.box`的内边距值，你可以看到，这将更改文本开始的位置。**

**你还可以更改类`.container`的内边距，这将在容器和方框之间留出空间。任何元素上的内边距都可以更改，并在其边界和元素内部的任何内容之间留出空间。**

盒子模型和内联盒子
---------

以上所有的方法都完全适用于块级盒子。有些属性也可以应用于内联盒子，例如由`<span>`元素创建的那些内联盒子。

在下面的示例中，我们在一个段落中使用了`<span>`，并对其应用了宽度、高度、边距、边框和内边距。可以看到，宽度和高度被忽略了。外边距、内边距和边框是生效的，但它们不会改变其他内容与内联盒子的关系，因此内边距和边框会与段落中的其他单词重叠。

使用 display: inline-block
------------------------

display 有一个特殊的值，它在内联和块之间提供了一个中间状态。这对于以下情况非常有用：你不希望一个项切换到新行，但希望它可以设定宽度和高度，并避免上面看到的重叠。

一个元素使用 `display: inline-block`，实现我们需要的块级的部分效果：

* 设置`width` 和`height` 属性会生效。
* `padding`, `margin`, 以及`border` 会推开其他元素。

但是，它不会跳转到新行，如果显式添加 `width` 和 `height` 属性，它只会变得比其内容更大。

**在下一个示例中，我们将 `display: inline-block` 添加到 `<span>` 元素中。尝试将此更改为 `display: block` 或完全删除行，以查看显示模型中的差异**。

当你想要通过添加内边距使链接具有更大的命中区域时，这是很有用的。`<a>` 是像 `<span>` 一样的内联元素；你可以使用 `display: inline-block` 来设置内边距，让用户更容易点击链接。

这种情况在导航栏中很常见。下面的导航使用 flexbox 显示在一行中，我们为 `<a>` 元素添加了内边距，因为我们希望能够在 `<a>` 在鼠标移动到上面时改变背景色。内边距似乎覆盖了 `<ul>` 元素上的边框。这是因为 `<a>` 是一个内联元素。

使用 `.links-list a` 选择器将 `display: inline-block` 添加到样式规则中，你将看到它是如何通过内边距推开其他元素来修复这个问题的。

总结
--

这就是你需要了解的关于盒子模型的大部分内容。如果以后你发现对于盒模型的布局仍有困惑，你将会回来温故这些内容。

在下一节课中，我们将看看如何使用背景和边框来使你的普通盒子看起来更有趣。

* 上一页
* Overview: Building blocks
* 下一页