HTML5 和 CSS3 第 3 部分：为您的第一个网页设置样式

引言

在我们这个系列的第一个文章中，我们介绍了 CSS 以及它如何为我们的 HTML 元素设置样式。在第二个文章中，我们通过展示如何对标准页面进行一些基本修改来进一步发展了这个想法。在本文中，我们将更深入地探讨如何为网页设置样式。我们的目标是涵盖 CSS 的广度，以便我们能更好地理解如何使用它。在后续的文章中，我们将深入探讨一些更具体的内容。

CSS 的何处和如何使用

正如我们在本系列的第一篇文章中所说，CSS 几乎在所有网页上都有使用。但您何时创建 CSS 文档？如何使用多个 CSS 文档？您将 CSS 文档放在哪里？在深入研究之前，我们应该回答所有这些基本问题。

何时使用 CSS

在使用 HTML 文档时，可能会出现这样的问题：“我应该为此使用 CSS，还是直接将样式属性添加到我的 HTML 元素中？”这个问题的答案几乎总是应该是“创建一个 CSS 文档”。将样式直接放在 HTML 页面中，一旦网站部署后，将很难更改布局或外观。您应该始终致力于将内容与样式分离开来。

多个 CSS 文档

所以您得到一个很酷的模板，您想使用它。它附带一个修改外观的 CSS 文档。您喜欢它，但您想稍微调整一下外观。您会修改 CSS 文档吗？如果您想添加额外的规则怎么办？好吧，您可以修改现有的 CSS 文档，但这会使它成为您自己的。任何时候您从创建者那里获得升级，您都需要重新应用所有更改。这将很难记住。相反，最好是创建一个您自己的 CSS 文档，并将您的修改放在其中。请记住，CSS 文档是可以堆叠的。如果一个给定的元素可以应用多个规则，则应用最具体的规则。如果两个规则的特异性相同，则后面的规则生效。这意味着如果您想创建一个修改模板 CSS 文档设置的样式的 CSS 文档，您应该在页面上将您的 CSS 文档放在模板 CSS 文档之后。

将 CSS 放在哪里

我们之前已经将一个 CSS 文档添加到了我们的网页中，但最好再深入地回顾一遍。CSS 文档应包含在页面的头部。应按照您希望它们生效的顺序包含它们。如上所述，如果特异性有冲突，最后一个生效。我们之所以将 CSS 页面放在头部，是因为 HTML 页面是从上到下渲染的。如果您将 CSS 文档放在 body 的末尾，HTML 将会显示，而 CSS 在页面滚动到底部并准备渲染 CSS 之前不会应用。这意味着用户会短暂地看到未设置样式的页面。这很糟糕。

设置 CSS 文档

在很大程度上，如何设置 CSS 文档取决于个人偏好。但是，有几个最佳实践可以帮助您以最佳方式配置文档。

首先，将最通用的规则放在前面。例如，将 body 规则放在前面，因为它将在没有其他规则应用时生效。然后，随着您的进行，变得越来越具体。这样，如果您有任何冲突，后面的规则将生效，而这是您可能想要应用的最具体的规则。

其次，使用适当的间距。从技术上讲，您可以将所有内容挤在一起，浏览器仍然可以读取它。但是，这对人类来说可读性不高。如果您真的关心间距，有一些程序可以为您压缩文档。通常您会看到它是一个 .min.css 文件。“普通”版本用于阅读和更新。.min 文件供计算机读取。当我提到使用适当的间距时，我的意思是您应该在规则之间包含换行符，并且每行都应该有一个属性。这是一个例子

.sub-paragraph {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
}

.very-important {
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    color:  red;
    background-color: #00ff21;
}

规则之间的间距可以是一个完整的空行，就像我在这里做的那样，或者只是一个换行符（删除完整的空行）。只要确保它可读即可。

最后，尽可能将相关部分分组。如果您有许多协同工作的规则来创建 CSS 表，请将它们放在 CSS 文档的同一位置。您还可以使用注释（以 /* 开始，以 */ 结束）来标识这些部分的作用。这使得您可以轻松地浏览文档以查找所需的部分。

基本CSS语法

我们在使用中已经了解了一些 CSS 语法，但让我们花点时间检查一下 CSS 语法的规则，这样我们就知道什么是格式正确的，什么不是。每条规则都由几个基本部分组成。首先，我们确定这条规则应用于什么。例如，这条规则应用于 body

body {
   color: green;
}

接下来，我们在规则周围放置花括号，以便我们知道规则的开始和结束。在花括号内，我们包含属性列表。在上面的示例中，我们有一个想要影响的属性：颜色。在指定属性后，我们放置一个冒号，表示属性名的结束和要设置的属性值的开始。在我们的例子中，我们将 color 属性设置为 green。这个值可以是一个项，也可以是一串项。在本系列的文章四中，我们将看到如何像这样设置 margin 属性的每一侧

.standout {
   margin: 0 5px 3px 0;
}

这些是我们使用 CSS 文档时将处理的基本项。没有复杂或困难的东西。只是我们要修改的内容、我们要设置的属性以及我们要设置的值。

ID和Class选择器

正如我们在 past articles 中已经看到的那样，HTML 元素的 id 和 class 属性可用于标识元素，然后使用 CSS 定位该元素。id 在页面上是唯一的，而附加到元素的 class 可以附加到多个元素。从 CSS 的角度来看，当您想创建一个非常具体的规则时，您会使用 id 属性。然而，大多数时候您会想要定位一个 class 而不是一个 id，因为您会想多次重用该规则。让我们看看如何做到这一点。首先，HTML

<img id="benchpic" class="promo dark" src="pic1.jpg" alt="bench" />
<img id="tablepic" class="promo light" src="pic2.jpg" alt="table" />
<img id="chairpic" class="promo light" src="pic3.jpg" alt="chair" />
<img id="phonepic" class="promo dark" src="pic4.jpg" alt="phone" />

该代码片段只是在页面上放置了四个不同的 HTML 图像。每个图像都有一个唯一的 id，但它们也有两个 class。class 属性可以有多个值，用空格分隔。现在，如果我想为这四张图片设置样式，我不会为每个 id 创建一个规则。相反，我会创建一个定位 promo class 的规则，如下所示

.promo {
    width: 240px;
    padding: 0;
    height: 240px;
    float: left;
}

这样，用一个规则，我就可以定位它们（并将在黑暗中束缚它们……muahahaha！）我还为每个图像应用了第二个 class，其中两个带有 dark class，两个带有 light class。我可以利用这一点根据图像的类型（dark 或 light）进一步设置图像样式。也许我想为 dark 图像添加一个浅色边框，为 light 图像添加一个深色边框，如下所示

.dark {
    border:  1px solid white;
}

.light {
    border:  1px solid black;
}

现在，有了这两条规则，我进一步修改了我的图像。然后我可以变得更具体，并说我第一行中的第一个图像应该比其他图像大一点，如下所示

#benchpic {
   width: 280px;
   height: 280px;
}

您可能会说：“但等等，您已经在上面为 promo class 设置了高度和宽度。现在会发生什么？”这是个好问题。现在将是这样的：最具体的规则将应用于高度和宽度，但其他属性将从 promo class 规则应用，因为没有更具体的规则来覆盖它们。

最后一点，我们之前已经讲过，但回顾一下还是好的：class 在 CSS 中用点表示，id 用井号（#）表示。将这两者区分开来，您可以节省大量的调试时间。

字体、文本和背景

修改文本是 CSS 的基础之一。我们已经零散地看到过，但让我们将所有内容整合到一个比标准段落更有趣的段落中。我们将首先在页面上放置一个段落。接下来，我们将使第一个单词的第一个字符变大（就像您会在旧书中看到的那样）。然后我们将使用荧光笔来突出一个关键短语。最后，我们将整个段落的字体更改为比默认字体更庄重的字体。

首先，这是我们需要准备的 HTML

<p class="oldschool">
    <span class="firstchar">T</span>his is my paragraph of really 
    cool text. Right now it seems as though it would
    have been easier to put some lorem ipsum text in here 
    but then how could I write all of these cool messages? 
    If you read this, you win a <span class="highlight">free 
    dinner</span> at the restaurant of your choice, payable by 
    the person reading this.
</p>

请注意，我在我的段落元素上放置了一个 class，并在段落中放置了两个 span 元素。请记住，span 元素是内联元素，所以它们不像段落标签这样的块级元素那样有上下方的空间。

现在，这是我的 CSS

.oldschool {
    font-family: 'Engravers MT', Georgia, serif;
    font-size: 1.2em;
}
.firstchar {
    font-size: 3em;
}
.highlight {
    background-color: #fbef1e;
}

在深入研究我所做的 CSS 之前，让我们看看最终产品

看起来……很有趣。好吧，也许它不是最棒的网络艺术作品，但它确实说明了我们的观点，对吧？看看 CSS，我们看到我首先应用了一个到段落的样式，使用了“oldschool”class。我将字体更改为“Engravers MT”，并设置了 Georgia 作为备用字体，然后是 serif，以确保所有浏览器都能看到我想要的效果。接下来，我将段落的整体字体大小更改为 1.2em（比正常大小大 120%）。

span 元素各自获得了自己的配置，再次通过 class 规则。这使我们可以轻松地以完全相同的方式样式化另一个区域。我知道如果我想突出一段文本，我可能总有一天也会想突出另一段。但首先，让我们看看 firstchar class。我将字体大小设置为 3em（比正常大小大 300%）。这使得第一个字母非常大。它还覆盖了通过段落标签赋予该字母的字体大小（因为这更具体）。

highlight class 只是将 background-color 更改为浅黄色（就像荧光笔一样——很有趣）。我只是在 Web Matrix 中使用颜色选择器选择了这种颜色。有许多网络资源（免费）可以帮助您选择您想要的精确颜色。

结论

好了，这就是一个基本的 CSS 文档的介绍。我们弄清楚了何时使用它们，如何使用最佳实践来设置它们，以及如何配置我们的 HTML 文档以最好地与我们的 CSS 配合使用。在此过程中，我们还使用了一些新的 CSS 属性。请查看本系列的第四部分，深入了解 CSS 更强大的功能，我们将探讨页面布局。在那之前，我希望您有所收获。一步一步地继续前进。