HTML5/CSS3 入门指南 - 第 3 部分（共 12 部分）
5.00/5 (13投票s)
为你的第一个网页添加样式
系列文章列表
引言
在上一部分中，您学习了如何根据内容的角色标记不同的部分。现在我们将开始学习如何使用 CSS 来视觉化格式化这些内容。不过，在我们开始之前，我想让您记住关于 HTML 最重要的一点。HTML 是为了内容！我为什么如此强调这一点？因为我不是唯一教您 HTML 的人，市面上有大量的 HTML 教程，虽然很多教程会教您一些非常方便的快捷方式，但它们也可能非常麻烦。因此，在您整个 HTML 之旅中，我希望您记住 HTML 的作用并坚持下去。从长远来看，如果您这样做，您的（作为开发者的）生活会更好。
再多一些 HTML
本列表中的 HTML 文档是我们今天学习的基础。我将在文章中不断使用此文档，并向您展示如何仅使用 CSS 使其看起来更好。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Me Blog</title>
</head>
<body>
<header>
<img src="me.jpg" alt="me" width="150" height="150">
<aside>Kornfeld Eliyahu Peter</aside>
<h1>Me Blog</h1>
</header>
<article>
<h2>Fusce vel dolor sollicitudin</h2>
<p class="publish-date">12-03-2014</p>
<section>
<h3>Praesent sit amet</h3>
<p>Nam faucibus mi nec mauris pharetra iaculis. Integer quis facilisis velit. Donec aliquet purus a ante convallis sodales. Aliquam erat volutpat. Morbi sed lacus ullamcorper, ultrices lectus ac, suscipit mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus scelerisque dolor id facilisis. Integer a vestibulum sapien. Vestibulum rutrum quam ultrices suscipit facilisis.</p>
<p>Pellentesque id bibendum dolor. Donec id ipsum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec rutrum pellentesque velit, sit amet cursus quam interdum non. Aliquam erat volutpat. Vestibulum accumsan ante quis lorem dictum, non posuere massa commodo. Praesent eu urna eget ligula viverra tempor. Duis porttitor quam eu dictum tristique. Morbi convallis sapien lacus, sit amet fermentum ipsum ultrices sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In ut dolor pharetra magna ullamcorper dictum. Praesent sed nisl laoreet, convallis diam id, ultricies arcu. Donec non tellus lobortis, placerat nibh eu, tempor nisi.</p>
</section>
<section>
<h3>Vestibulum vestibulum</h3>
<p>Integer tempus metus sed tortor lacinia, et posuere risus feugiat. Donec dignissim eu libero id blandit. Quisque tristique faucibus elit nec sodales. Proin pellentesque euismod nisl, ut porta felis euismod commodo. Proin luctus, erat eget rhoncus elementum, est lectus accumsan nulla, id gravida tellus dui vitae nisi. Integer adipiscing placerat mi, in placerat erat consequat bibendum. Donec facilisis, felis eget dignissim accumsan, nisl turpis tempus purus, et faucibus est libero quis massa. Morbi vitae nibh convallis, varius est vestibulum, hendrerit ligula. Vestibulum at euismod dui. Duis nec ornare lectus. Nulla id lobortis turpis. Duis in lacus turpis. Suspendisse at tortor a lorem ornare tincidunt nec id nibh. In facilisis, est ac scelerisque ultrices, odio metus sollicitudin mi, non venenatis nulla nunc sed erat.</p>
</section>
</article>
<article>
<h2>Fusce aliquet augue</h2>
<p class="publish-date">01-01-2014</p>
<section>
<h3>Phasellus in erat </h3>
<p>Proin ultrices massa nec arcu ultrices hendrerit. Cras facilisis rhoncus risus, vitae dapibus tellus laoreet sed. Quisque in diam aliquam nulla accumsan fringilla. Vestibulum non imperdiet turpis. Cras lacinia enim diam, vel porta lorem malesuada eget. Nullam condimentum facilisis est non consectetur. Vestibulum interdum erat vitae facilisis luctus. Curabitur feugiat velit non lacus accumsan, quis vulputate elit ultricies. Maecenas eu orci mauris. Phasellus at vehicula odio, in accumsan diam. Nam luctus pellentesque tortor quis volutpat. Suspendisse non dolor libero. Nulla facilisi. Etiam sodales magna in justo fermentum, ut congue nisl tempus. Morbi egestas lorem nibh, auctor interdum erat congue quis. Morbi rutrum orci est.</p>
<p>Integer in dolor nec odio accumsan euismod. Nam adipiscing nisi sed mauris interdum posuere. Sed ullamcorper sollicitudin odio ut malesuada. Praesent euismod ac justo at volutpat. Sed venenatis mauris in imperdiet ullamcorper. Donec id ante sit amet augue iaculis aliquam. Quisque facilisis lorem elit, in pretium felis accumsan nec. Nulla interdum lacinia nunc, eget aliquam quam ultrices nec. Nunc eu leo lectus. Phasellus gravida nibh at elit ullamcorper lacinia. Etiam pretium, dui consectetur suscipit ornare, mauris massa hendrerit enim, ac facilisis ante nulla at dui. Etiam dictum accumsan metus in scelerisque.</p>
<aside>Etiam consequat risus sed lorem sagittis tincidunt. Nulla dolor purus, congue eget.</aside>
</section>
</article>
<footer>
<p id="cpy">Copyright © Me, 2014</p>
</footer>
</body>
</html>
没有任何 CSS 的页面看起来是这样的
将 CSS 添加到 HTML
在上一部分，我写了关于如何将 CSS 链接到 HTML 文档的方法，但我还是来刷新一下您的记忆。
<link rel="stylesheet" type="text/css" href="style.css" />
这一行 - 在 HTML 文档的 head 部分（见上文）告诉浏览器使用 style.css 文件作为视觉渲染的样式表。
HTML 全局属性
您可能已经注意到我使用了以前从未提到过的两个属性。您已经知道 HTML 标签可以有不同的属性 - 比如 IMG 标签的 src 和 alt。每个标签都有自己的一组属性，根据该标签的作用而定。然而，有一组属性称为 HTML 全局属性，可以应用于任何 HTML 标签。
在这个属性组中，有两个属性对 CSS 具有特殊意义
id是一个用于为任何 HTML 标签分配唯一标识符的属性。class是一个用于对 HTML 标签进行分类的属性。任何 HTML 标签都可以拥有零个或多个类名。
Using the Code
附带的代码与我在本文中使用的完全相同。有一个 page.html 和所有图像，唯一的区别是 style.css 是空的（有一个 final.css 包含最终内容）。我希望您根据我们所学的内容来填充 style.css，以确保您更好地理解。
CSS 文件中的内容
CSS 文件可以包含一个或多个 CSS 规则，CSS 规则由选择器和声明体组成。声明体中的每个声明都由一个属性名-值对组成，由冒号（:）分隔。声明之间用分号（;）作为分隔符。
selector {
attribute-name: attribute-value [attribute-value [...]];
[attribute-name: attribute-value [attribute-value [...]];]
}
简单选择器
- * 是通用选择器。此选择器将选择您文档中的所有 HTML 标签。我不建议您使用此选择器。它存在性能问题，而且您会发现实际上没有必要使用它。
- 标签选择器将选择所有匹配的 HTML 标签。例如，
h2选择所有二级标题标签。 - ID 选择器用于选择单个标签（因为 ID 应该是唯一的）。要使用此选择器，您必须在标签的 ID 值前加上哈希（#）字符。ID 选择器区分大小写 - 必须与 HTML 文档中的完全相同。在我们的例子中，#cpy 将选择文档末尾的段落（带有版权信息的段落）。
- 类选择器用于查找所有已用特定类进行分类的 HTML 标签。要使用它，您必须在类名前加上点（.）字符。类选择器区分大小写 - 必须与 HTML 文档中的完全相同。在我们的例子中，
.publish-date将选择包含日期的两个段落。
选择器分组
为了简化 CSS 文件，您可能需要将选择器分组。例如，您想为所有标题标签（H1-H6）分配相同的字体，或者为段落（P）和顶级标题（H1）分配相同的背景颜色，您可以通过分组选择器来创建更短的 CSS。
h1, h2, h2, h3, h4, h5, h6 {
font-family: sans-serif;
}
h1, p {
background-color: #f90;
}
让我们看看所有的分组选项
|
定义 |
解释 |
|
selector1, selector2 |
selector1 和 selector2 |
|
selector1 selector2 |
选择器2 是选择器1 的后代 |
|
selector1 > selector2 |
选择器2 是选择器1 的子元素 |
|
selector1 + selector2 |
选择器2 紧跟在选择器1 之后 |
|
selector1 ~ selector2 |
选择器2 在选择器1 之后 |
属性选择器
这些对选择器的补充可用于检查分配给 HTML 标签的属性的存在和值。
|
定义 |
解释 |
|
selector[attribute-name] |
属性存在 |
|
selector[attribute-name="value"] |
具有精确值的属性 |
|
selector[attribute-name~="value"] |
属性包含空格分隔的列表中的值 |
|
selector[attribute-name|="value"] |
属性以值开头，后跟“–” |
|
selector[attribute-name^="value"] |
属性以值开头 |
|
selector[attribute-name$="value"] |
属性以值结尾 |
|
selector[attribute-name*="value"] |
属性包含值 |
例如，编写 .publish-date 和 [class="publish-date"] 在我们的 HTML 文档中会产生完全相同的结果。
attribute-name 部分是 CSS 支持的 150 多个属性之一。我们稍后会看到其中一些属性。根据所选属性，value 部分可以包含一个或多个由空格分隔的值。
有大量的 CSS 属性，本文将介绍与背景、文本和字体相关的属性。
CSS 规则优先级
我在第一部分中提到过，重复的 CSS 规则是如何被解释的（我的意思是当一个以上的 CSS 规则适合同一个标签时会发生什么）。请记住规则是优先级的，较新的（在 CSS 文件中靠后的）将被使用！例如，在下面的示例中，段落文本将是绿色的……
body p {
color: red;
}
article p {
color: green;
}
背景属性
CSS 中的背景可以通过两种方式定义。一种是颜色，另一种是图像。
颜色属性
要为 HTML 标签的背景着色，我们可以使用 background-color 属性。
CSS 使用 RGB 色彩空间中的颜色，这意味着任何颜色都根据其红色、绿色和蓝色分量来定义。颜色也可以从 HSL 色彩空间中选择，其中颜色由色相、饱和度和亮度定义。有四种方法可以定义实际颜色
- 使用预定义的名称：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、orange、purple、red、silver、teal、white 和 yellow。
transparent关键字。- 使用数字表示法：#rgb 或 #rrggbb。值是十六进制形式，范围可以是从 0 到 f 或 00 到 ff。例如，红色也可以写成 #f00 或 #ff0000，但橙色只能写成 #ffa500。
- 使用 颜色函数
- rgb(r, g, b) 或 rgb(r%, g%, b%)。
- rgba(r, g, b, a) 或 rgb(r%, g%, b%, a%)，其中 a 用于 alpha 混合 - 表示颜色的不透明度
- hsl(h, s, l) 或 hsl(h%, s%, l%)
- hsla(h, s, l, a) 或 hsla(h%, s%, l%, a%)，其中 a 与之前相同
现在让我们为我们的博客页面着色。作为第一步，我们将为博客的三个主要部分着色 - 页眉、文章和页脚。打开 style.css 文件并添加这些行
header {
background-color: #f90;
}
article {
background-color: #fff;
}
footer {
background-color: #b1b1b1;
}
保存文件并在浏览器中打开我们的 HTML 文档。您将看到类似这样的内容
请注意一个非常重要的事情 - 您的 HTML 没有丝毫改变！这是因为我第一部分提到的完全分离关注点。
图像属性
让我们看看如何为我们的博客添加背景图像。用以下代码扩展 CSS 文件
h1 {
background-image: url('green.jpg');
}
使用 background-image 添加图像时，您可以计划如何使用它。通过 background-attachment 这个很棒的选项，您可以设置选定标签和附加背景图像的移动方式。默认的 - scroll - 值告诉浏览器一起移动标签及其背景。但是，将其更改为 fixed 将给您一种标签在其背景图像上移动的效果。现在让我们来看看。
h1 {
background-image: url('green.jpg');
background-attachment: fixed;
}
根据此示例更新您的 CSS 文件。打开（或刷新）HTML 页面并向下滚动页面 - 看到效果了吗？
文本属性
这组属性用于定义文本在浏览器中的渲染方式。使用它们可以帮助使您的 HTML 文档更易于阅读。
在上一个例子中，我们为博客标题添加了一个固定的背景图像。但是，那个标题条看起来有点厚，不太令人印象深刻。现在让我们改变它。
h1 {
background-image: url('green.jpg');
background-attachment: fixed;
line-height: 4em;
}
line-height 设置文本行的行高，4em 值告诉浏览器将原始行高乘以四倍（我们将在下一部分讨论 CSS 单位）。
现在我们的博客看起来好一些了。
现在让我们看看其他文本格式化选项。
|
定义 |
解释 |
|
用于更改字母之间的间距，也可以是负数（会使字母粘在一起） |
|
|
用于更改单词之间的间距，也可以是负数（会使单词粘在一起） |
|
|
指定文本中如何解释空格
|
|
|
指定文本在其容器内的水平对齐方式，值为 center、left 和 right。 |
|
|
用于更改文本第一行的缩进，也可以是负数 |
|
|
指定文本大小写如何更改，值为 capitlize、lowercase 和 uppercase。 |
|
|
指定如何装饰文本，值为 overline、underline 和 line-through。 |
现在让我们看看实际效果。用此代码更新您的 CSS，保存并打开 HTML 文档。
h1 {
background-image: url("green.jpg");
background-attachment: fixed;
line-height: 4em;
text-transform: uppercase;
}
header > aside {
letter-spacing: +0.15em;
white-space: nowrap;
}
您应该在页面标题中看到类似这样的内容
正如您所见，我通过使用 letter-spacing 使我的名字散开一点（实际上增加了原始尺寸的 15%）。通过 text-transformation 将博客标题变成了大写。这里看不到的是，我使用 white-space 属性防止了两种文本的任何换行。
现在再添加这些行
article h2 {
letter-spacing: +0.1em;
word-spacing: +0.1em;
white-space: nowrap;
}
article h3 {
text-decoration: underline;
white-space: nowrap;
}
article p {
text-indent: 1.5em;
}
article p.publish-date {
text-align: right;
}
article aside {
text-decoration: line-through;
}
让我们看看发生了什么。文章标题变得更宽了，使用了 word-spacing 和 letter-spacing。通过 text-decoration 给章节标题添加了下划线。由于 text-align 属性，发布日期显示在最右侧。使用 text-indent 缩进了文章中的每个段落，并且侧边注释（由 ASIDE 标记）上面有一行。
最后，将最后这个规则添加到您的 CSS 文件中，看看它有什么作用。
footer p {
text-align: center;
letter-spacing: +0.05em;
}
最后这部分使用 text-align 将版权信息居中，并使用 letter-spacing 使其稍微宽一点。
现在，我希望您花些时间玩弄这些属性，直到您能够看到它们如何改变内容的视觉呈现。特别是检查我使用的选择器分组，以确保您理解它们。
字体属性
在 CSS 中，字体被选择为字体系列。这意味着同一字体的不同样式，如正常、粗体和斜体，可以一次性选择。CSS 可以直接获取字体名称，或者您可以选择 CSS 定义的一个通用字体系列名称。您可以设置字体大小（我们已经在博客中看到了不同标题的字体大小）和样式。
|
定义 |
解释 |
|
选择要使用的字体，它可以包含一个由逗号（,）分隔的字体名称列表，在这种情况下，系统上找到的第一个字体将被使用。如果没有找到任何字体，浏览器将使用其设置中声明的默认字体。
|
|
|
设置要使用的字体大小。可以是数值（如 2em 或 4cm 或 120%），或者预定义关键字之一：xx-small、x-small、small、medium（默认）、large、x-large、xx-large 或
|
|
|
设置字体的粗细。可以是列表中的数值 100、200、300、400、500、600、700、800、900 或关键字 normal（等同于 400）、bold（等同于 700）或
|
|
|
可以是关键字值之一 - normal、italic 或 oblique |
|
|
只能是 normal 或 small-caps。当设置为 small-caps 时，所有小写字母将转换为小号的大写字母。 |
现在让我们看看更新后的 CSS 文件以及它是如何渲染的……
body {
font-family: serif;
font-size: 1.2em;
}
header {
background-color: #f90;
}
article {
background-color: #fff;
}
footer {
background-color: #b1b1b1;
}
h1 {
background-image: url("green.jpg");
background-attachment: fixed;
line-height: 4em;
text-transform: uppercase;
font-family: fantasy;
font-size: 3em;
font-weight: 900;
}
header > aside {
letter-spacing: +0.15em;
white-space: nowrap;
font-family: monospace;
}
article h2, article h3 {
font-family: sans-serif;
font-weight: 700;
font-variant: small-caps;
}
article h2 {
letter-spacing: +0.1em;
word-spacing: +0.1em;
white-space: nowrap;
font-size: 2.5em;
}
article h3 {
text-decoration: underline;
white-space: nowrap;
font-size: 2em;
}
article p {
text-indent: 1.5em;
}
article p.publish-date {
text-align: right;
font-family: monospace;
font-style: oblique;
font-weight: bold;
}
article aside {
text-decoration: line-through;
}
footer p {
text-align: center;
letter-spacing: +0.05em;
font-family: monospace;
}
博客页眉。
文章正文。
底部。
我现在希望您阅读 CSS，并且不要放过任何细节，直到您理解它所说的内容……
没有我的字体
现在我们了解了所有这些漂亮的字体功能，让我问您一个问题。如果您无法负担使用任何字体替换怎么办？如果您为您的网站使用的字体是必须的（想想为设计师网站，设计就是一切 - 不能改变）？到目前为止我们看到的一切都无法给您解决方案，所以让我向您介绍一个新规则 - @font-face……
@font-face 是 CSS 的众多 at-rules 之一（以其开头的 at - @ - 符号命名）。这类规则不使用我们已知的选择器来选择标签，而是为 CSS 渲染引擎创建可重用的信息块。在我们的例子中，@font-face 用于创建一个新的字体系列，我们以后可以在 font-family 属性中使用。使用 at-rules 时，必须在每个使用 at-rule 信息 的标准选择器之前放置它们。
那么 @font-face 有什么特别之处呢？使用它一次可以加载客户端计算机上没有的字体，从而减轻了设计师找不到本地字体的痛苦。
让我们看看细节
|
定义 |
解释 |
|
font-family |
定义字体名称。以后可以在 font-family 属性中使用。 |
|
src |
定义字体应从何处下载，就像在图像的情况下一样。 |
|
font-stretch |
定义字体的拉伸属性。值可以是以下关键字之一：normal（默认）、condensed、ultra-condensed、extra-condensed、semi-condensed、expanded、semi-expanded、extra-expanded、ultra-expanded。 |
|
font-style |
定义字体的样式属性。值可以是以下关键字之一：normal（默认）、italic、oblique。 |
|
font-weight |
定义字体的粗细属性。可以是列表中的数值 100、200、300、400、500、600、700、800、900 或关键字 normal（等同于 400）、bold（等同于 700）。 |
|
unicode-range |
定义字体支持的 Unicode 字符范围。默认值是 "U+0-10FFFF"，表示全部。 |
让我们来看一个示例，该示例基于 Google 的字体文件定义了一个名为 NothingYouCouldDo 的新字体系列……
@font-face {
font-family: 'NothingYouCouldDo';
font-style: normal;
font-weight: normal;
src: url(http://themes.googleusercontent.com/static/fonts/nothingyoucoulddo/v4/jpk1K3jbJoyoK0XKaSyQAZsYoLsUhJo8DEpooYVMXYU.woff) ;
}
现在您可以在我们的 CSS 中通过引用我们刚刚声明的 family-name 来使用它。因此，将 header > aside 规则更新为如下所示
header > aside {
letter-spacing: +0.15em;
white-space: nowrap;
font-family: NothingYouCouldDo;
}
页眉中的我的名字看起来不同了，无论您是否在您的系统上安装了该字体，它都会看起来像这样！
WOFF 格式
您可能已经注意到，@font-face 声明的 src 指向一个带有 woff 扩展名的文件。这可能不是您熟悉的格式，因为它是专门为 Web 创建的。
要了解 woff 格式，请从这里开始：Web Open Font Format。
如果您想从您的一种字体创建 woff 文件用于学习目的，或者想找到一些现成的 woff 文件，请访问此网站：Font Squirrel。
摘要
我相信通过这一部分，您已经真正感受到了 HTML 和 CSS 的工作方式。您现在知道如何对页面进行一些基本（甚至不那么基本）的视觉格式化，但如果您已经看过一些网站，您就会明白我们还有很长的路要走（提示：下一部分也是关于 CSS 的）。