HTML5 & CSS3 入门指南 - 第 3/12 部分：为你的第一个网页设置样式
为你的第一个网页添加样式
引言
使用 HTML 代码，你可以定义网页的结构和数据。通常，你希望通过使用不同的字体和颜色等方式，让你的信息对读者更具吸引力。这意味着你想为文本和图像设置样式。这里的样式指的是 HTML 元素在网页上的外观。
你可以在以下位置定义样式：
- 外部样式表文件
- HTML 文件开头
- 特定 HTML 元素内
当样式在外部样式表文件中定义时，这个样式表文件可以被多个 HTML 文件使用，以获得相同的样式。当只需要在单个 HTML 文件中拥有特定样式时，可以在 HTML 页面开头定义样式。相应地，当只想让某个特定元素拥有特定样式时，可以在该 HTML 元素中定义。
样式表文件称为 CSS 文件。CSS 来自 Cascading Style Sheets（层叠样式表）。层叠意味着可以组合一个或多个样式表，形成所需的输出所需要的全部样式。样式表名称的扩展名为 css，例如 mystyles.css。
设置 CSS 文档
HTML 文件需要知道样式表的名称。在 HTML 文件的 head 元素中有一个指向样式表文件的引用。引用的语法是：
<link rel="stylesheet" type="text/css" href="path and name of css file" >
假设 CSS 文件名为 mystyles.css，并且与 HTML 文件位于同一文件夹中。HTML 文件的 head 元素将是：
<!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Styles example</title> <link rel="stylesheet" type="text/css" href="mystyles.css"> </head>
第一行表明该文档是 HTML5 标准文档。第二行启动了 html 元素，即整个 HTML 文档。lang 属性的值用于指示该文档是用英语编写的。然后是 head 元素。head 元素中的第一行定义了文档中使用的字符集。UTF-8 是拉丁字母中最常用的字符集。然后是页面的标题。最后，你看到了对样式表文件的引用以及 head 元素的结束。
基本CSS语法
在 CSS 文件开头没有定义它是一个样式表。你只需开始编写样式定义。下面是一个定义示例及其在网页上的效果：
样式定义的语法是： 选择器 { 属性: 值; }。例如： p { color: red; }
选择器是你想要定义样式的元素，在上面的例子中是 **p**。声明块由花括号 **{ }** 包围。在声明块中，有一个或多个属性-值对。属性，在上面的例子中是 **color**，值，在上面的例子中是 **red**，由冒号 **:** 分隔。每个属性-值对都以分号 **;** 结束。
在设置网页样式时，有很多属性可以使用。你可以在 w3school.com 的 CSS 参考页面 上阅读属性及其值的完整列表。
示例 1
你可以为选择器编写一个或多个属性-值对。请注意，不同的属性-值对写在不同的行上，以便于阅读和区分。
HTML 代码
<p>An example text.</p>
样式表代码：此处定义了字体颜色、字体系列和字体粗细。
p {
color: red;
font-family: "Courier New";
font-weight: bold;
}
结果
示例 2
有时需要为多个元素设置相同的定义。这些元素作为选择器列出，并用逗号分隔。
HTML 代码
<h2>h2 heading</h2> <h3>h3 heading</h3> <h4>h4 heading</h4>
样式表代码：标题具有相同的字体，标题背景为灰色，所有标题的行高也相同，但标题的字体颜色不同。
h2, h3, h4 {
font-family: Calibri;
line-height: 30px;
background-color: gray;
}
h2 { color: white; }
h3, h4 { color: yellow; }
结果
在前面的示例中，你看到 HTML 元素占据了一个矩形区域。默认情况下，元素周围有一些空间（外边距）。
类和 ID 选择器
假设你的 HTML 页面中有多个段落。奇数段落和偶数段落应该有不同的样式。怎么办？
HTML 元素可以有一个名为 **class** 的 **属性**，用于区分不同的元素。class 属性对元素进行分类。在样式表中，使用 class 属性值。在样式表中，属性值前面有一个点。
示例 4
HTML 文件代码
<!-- paragraphs have a class attribute --> <p class="rowA">The longest journey starts with a single step.</p> <p class="rowB">The shoemaker's son always goes barefoot.</p> <p class="rowA">The way to a man's heart is through his stomach.</p> <p class="rowB">There's always more fish in the sea.</p>
样式表文件代码。注意在样式表中编写注释的方式。
/* this definition is for all paragraphs with or without class attribute */
p {
font-family: Cambria;
line-height: 30px;
}
/* different style definitions for paragrapsh having class attribute, note the dot between p and attribute value */
p.rowA {
color: blue;
background-color: #CCFFFF;
}
p.rowB {
color: red;
background-color: #FFCCFF;
}
页面上的结果。在定义颜色（字体颜色或背景颜色）时，可以使用颜色名称或十六进制值。在 HTML 编辑器中通常有一个选择颜色的工具。如果你没有这样的编辑器，可以在 w3schools.com 网站上找到颜色名称和十六进制值： CSS 颜色、 CSS 颜色名称、 CSS 颜色十六进制。颜色也可以用 RGB 颜色定义。RGB 代表红、绿、蓝。
在上面的示例中，样式表中通过选择器 p.rowA 和 p.rowB 将类 'rowA' 和 'rowB' 附加到了段落。这个定义意味着这些仅用于段落。
示例 5
你可以使用 HTML 类作为选择器，而不带 HTML 元素。在这种情况下，选择器以一个点开头。
样式表定义
/* these definitions can be used with any html element */
.rowA {
color: blue;
background-color: #CCFFFF;
}
.rowB {
color: red;
background-color: #FFCCFF;
}
它们在 HTML 页面中的使用。
<h3 class="rowA">Some animals</h3> <p class="rowB">cats</p> <p>dogs</p> <p class="rowB">horses</p>
结果。
示例 6
**ID 选择器** 在样式表中表示存在一个具有该值的 **id 属性** 的 HTML 元素。ID 选择器在样式表中前面有一个 #。在单个 HTML 文件中，id 应该是唯一的。这意味着每个 id 属性值在单个 HTML 文件中都应该是唯一的。同一个 id 值可以在不同的 HTML 文件中再次使用。
HTML 文件代码
<p id="mytext">Paragraph with an id.</p> <p>Paragraph without an id.</p>
样式表文件代码
/* this definition is for all paragraphs with or without class or id attribute */
p {
font-family: Cambria;
line-height: 30px;
}
/* id selector in use */
#mytext {
background-color: #9999FF;
}
ID 选择器与类选择器类似：你可以定义它，也可以不定义它，取决于你是否想将 id 属性的使用限制在特定的 HTML 元素。
背景、文本和字体
背景样式
在之前的示例中，我使用了 background-color 属性。HTML 元素也可以将图像作为背景元素。你可以在 w3schools.com 网站上阅读有关 背景 的详细说明。
要设置背景图像，有很多属性。默认情况下，图像会重复填充区域，但你可以限制此行为。
示例 7
HTML 代码
<p class="flower"> </p>
样式表代码：url 来自单词 uniform resource locator（统一资源定位符），意为图像的路径和名称。这里图像与 HTML 文件位于同一文件夹中。请注意，图像名称用单引号括起来，你也可以使用普通引号。
p.flower {
background-image: url('daisy_tn2.jpg');
height: 100px;
}
结果：图像填充了整个区域。图像的高度为 50px。段落的高度为 100px。这就是为什么有两行花的原因。
示例 8
HTML 代码相同，但样式表代码不同。
p.flower {
background-image:url('daisy_tn2.jpg');
background-repeat: no-repeat;
background-color:#339933;
height: 100px;
}
结果
p.flower {
background-image:url('daisy_tn2.jpg');
background-repeat: repeat-x;
background-color:#339933;
height: 100px;
}
结果
你可以将图像放置在区域的不同位置。这是一个将其放置在右下角的示例。
p.flower {
background-image:url('daisy_tn2.jpg');
background-repeat: no-repeat;
background-color:#339933;
background-position: right bottom;
height: 100px;
}
结果
你可以在一个属性中编写背景属性。
p.flower {
background:url('daisy_tn2.jpg') center bottom no-repeat #339933;
height: 100p}
结果
文本样式
标题、段落、列表等的文本样式可以对齐（左、右、中），可以定义行高（文本在垂直方向上位于行中央），文本可以被装饰（文本阴影、波浪线）。并非所有浏览器都支持所有文本装饰。你可以在 w3schools.com 网站上阅读有关 文本样式 的更详细信息，查看文本属性和文本装饰属性。
示例 9
段落文本的一些样式。文本位于行中央，在彩色行中，文本上方和下方的空间相同。文本在行中居中。字母之间的间距略大，并且有一个红色阴影。
p {
font-family: Cambria;
line-height: 30px;
text-align:center;
text-shadow: 2px 2px #ff0000;
letter-spacing: 2px;
background-color: aqua;
}
查看 line-height 和包含文本的元素的 height 之间的区别。使用 line-height，文本位于行中央；使用 height，文本位于行上方。
p {
font-family: Cambria;
height: 30px;
text-align:center;
text-shadow: 2px 2px #ff0000;
letter-spacing: 2px;
background-color: aqua;
}
字体
每个浏览器都有一个默认字体，通常是 Times New Roman。在样式表中，你可以为文本定义字体。对于浏览器文本，建议使用无衬线字体，因为它更容易在屏幕上阅读。此文本为 Verdana，是一种无衬线字体。Times New Roman 是一种衬线字体。你可以在 Wikipedia 上阅读有关 衬线和无衬线字体 的更多信息。
基础字体在 body 选择器中定义。这使得字体可用于 body 元素内的所有元素，即整个页面。
浏览器从读者计算机获取字体。这就是为什么你应该使用通用字体，这些字体已安装并在大多数计算机上使用。
由于你无法确定读者计算机上安装了哪些字体，因此你应该定义多种字体。字体的使用顺序与你编写的顺序相同。如果找不到第一个字体，则使用第二个字体，依此类推。
body { font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif; }
在哪里以及如何使用CSS
最常见的方法是将样式定义写在外部 CSS 文件中，并在 HTML head 元素中引用它，请参阅 设置 CSS 文档。这样，相同的样式就可以在多个 HTML 文件中使用。如果需要更改样式，只需在一个 CSS 文件中进行更改，即可在所有引用该 CSS 文件的 HTML 文件中看到结果。
你也可以在 HTML 文件的 head 元素中编写样式定义。这种方法的缺点是定义仅在编写它们的 HTML 文件中使用。如果需要文件特定的定义，则使用此方法。样式定义写在 <style> 元素中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Styles in html file</title>
<style type="text/css">
/* style definitions here */
</style>
</head>
有时，你可能需要在 HTML 文件中的单个 HTML 元素上进行样式定义。这些定义写在 style 属性中。
<p style="color: red; font-family: Georgia;">This is a special paragraph.</p>
如果你的网站非常大，并且有大量的样式定义，你可能希望将不同类型的定义写到不同的文件中。这有助于你管理样式。下面是一个使用两个样式表的示例。
<!DOCTYPE html> <html lang="en"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Large site</title> <link rel="stylesheet" type="text/css" href="layoutstyles.css" > <link rel="stylesheet" type="text/css" href="textstyles.css" > </head>
最终示例
这是一个带有样式表的页面，供你了解样式设置。
页面的 HTML 代码
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Page Example</title> <link href="mystyles.css" rel="stylesheet" type="text/css"> </head> <body> <h1> My flowers</h1> <h2>Wild Thyme</h2> <p><img alt="wild thyme" src="wildthyme.jpg"></p> <p>Easily grown in average, dry to medium, well-drained soils in full sun. Tolerates drought and poor soils of somewhat low fertility. Loose, sandy or rocky soils with excellent drainage are best. Dislikes moist to wet soils where it tends to rot. Cut back stems as necessary to maintain plant appearance or to control growth/spread or limit unsightly woody stem growth. Plants are evergreen in mild winters.</p> <h2>Daisy</h2> <p><img alt="daisy" src="daisy.jpg" ></p> <p>Modern cultivated chrysanthemums are showier than their wild relatives. The flower heads occur in various forms, and can be daisy-like or decorative, like pompons or buttons. This genus contains many hybrids and thousands of cultivars developed for horticultural purposes. In addition to the traditional yellow, other colors are available, such as white, purple, and red. The most important hybrid is Chrysanthemum × morifolium (syn. C. × grandiflorum), derived primarily from C. indicum, but also involving other species.</p> <p class="link">You can read more about<a href="http://en.wikipedia.org/wiki/List_of_garden_plants" target="_blank"> garden plants</a> in Wikipedia.</p> </body> </html>
样式表代码
body {
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
background-color:#FFFFCC;
}
h1, h2 {
font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
h1 {
background-image:url('daisy_tn2.jpg');
background-repeat:no-repeat;
height: 80px;
line-height: 80px;
background-position: right center;
background-color: #99DD99;
color:#666666;
}
h2 {
text-shadow: 2px 2px #C0C0C0;
text-decoration:overline;
}
p.link {
text-align:right;
}