HTML5 & CSS3 新手指南 - 为你的第一个网页添加样式

Peter Leow

4.84/5 (30投票s)

2014年4月8日

CPOL

12分钟阅读

40716

开始 Web 样式设计

引言

我们已经用基本的HTML写了我们的第一个网页，在编写您的第一个代码。我们注意到，仅用HTML代码编写的网页看起来非常、非常普通且没有吸引力。（图 1）

图 1：丑小鸭

我们如何将这些“丑小鸭”变成“哇！”？（图 2）本文将介绍网页的基本样式技术。为此，我们必须调用 **CSS** 的力量。

图 2：哇！

CSS 是 **层叠样式表** (Cascading Style Sheets) 的首字母缩写。它是为网页添加样式的通用语言，并得到所有浏览器的支持。最新标准是 CSS3，它与早期版本完全向后兼容。CSS3 规范仍在由 W3C 开发中，最新版本是层叠样式表 (CSS) 快照 2010。

初步尝试

启动您喜欢的文本编辑器，输入图 3 上半部分所示的 HTML 代码。完成后，将其保存为 .htm 或 .html 文件，在网页浏览器中打开，您应该会看到图 3 下半部分所示的结果。

图 3：没有样式的网页

假设您的客户看到了图 3 中的网页，并要求最大的标题显示为蓝色并居中放置在网页的中央。您能做到吗？单独使用 HTML 是不可能的。别担心！将以下 CSS 代码（在图 4 中以蓝色突出显示）添加到 HTML 代码中，您会让您的客户更满意。

图 4：带有简单样式的网页

基本CSS语法

您刚刚为您的网页添加了一个 CSS 样式。让我们在回顾过程的同时，检查一下基本的 CSS 语法

第一步 - 在 head 部分添加一个开头的 <style> 标签和一个结尾的 </style> 标签，如图 4 上半部分中的蓝色区域所示。这是 CSS 规则集将存在的地方。

    <style>
        /* Add CSS rule set here */
    </style>

请注意，/* 和 */ 用于在 CSS 中包含注释。注释用于解释代码，并且会被浏览器忽略。

第二步 - 选择我们要设置样式的 HTML 元素。在此示例中，它是 <h1> 标签，因此我们将输入 h1，这在 CSS 术语中称为 **选择器**。h1 后面的花括号对 ({ }) 用于包裹 h1 选择器的样式声明。

    <style>
        h1 /* This is the selector */
        {
           /* Add style declarations here */
        }
    </style>

第三步 - 添加 2 个样式声明，一个用于将 <h1> 内容的颜色设置为 blue ，另一个用于将其居中。

    <style>
        h1
        {
             color:blue;        /* This is a declaration */
             text-align:center; /* This is another declaration */
        }
    </style>

每个 **声明** 由一个 **属性** 和一个 **值** 组成，它们由冒号 (:) 分隔，并以分号 (;) 结束。在我们的示例中，color 是属性，blue 是其值。下图说明了这一点

属性		值
color	:	蓝色	;

我们刚刚涵盖了 CSS 的基本语法和过程。让我们盘点一下

    <style> /* Start of CSS block */
        h1  /* This is the selector */
        {
             color:blue;        /* This is a declaration */
             text-align:center; /* This is another declaration */
        }
    </style> /* End of CSS block */

要为另一个 HTML 元素（例如 <p>）添加样式，只需添加 p 作为选择器，并在 h1 块之前或之后带有相应的样式声明，如下所示。顺序无关紧要。

    <style>
        h1
        {
             color:blue;
             text-align:center;
        }
        p
        {
             color:green;
             text-align:right;
        }
    </style>

看到您做得不错，您的客户要求更多：“我希望第二大的文字是红色的，并且左对齐。您能做到吗？”“是的”（还能说什么？）您的客户心中有图 5。我将把它留给您的家庭作业。 ;P

图 5：带有更多样式的网页

CSS 选择器

CSS 选择器允许我们查找、选择和声明 HTML 元素的样式描述。

元素选择器

在之前的示例中，我们通过 HTML 标签名称（即 h1、h3 和 p）使用了 CSS 选择器来为相应的 HTML 元素应用样式。请记住，一个网页可以包含多个这些标签，特别是 <p> 标签。p 选择器将不加区分地将相同的样式应用于整个网页中的所有 <p> 标签。这意味着所有 <p> 标签都将是绿色且右对齐的。这种统一应用样式的方式使得无法自定义不同段落的样式，因为它们都受到 p 选择器的影响。（图 6）

（按照前面章节所述，将以下代码插入 HTML 文档中。）

图 6：元素选择器的效果

为了克服这个限制，我们将引入另外 2 个选择器 - **id** 和 **class**。

id 选择器

每个 HTML 标签都有一个 id 属性，它可以包含一个 **唯一区分于其他标签的名称**。例如，如果 HTML 文档中有 2 个 <p> 标签，我们可以给其中一个命名为“para1”，另一个命名为“para2”。要在 CSS 代码中选择它们，请在 id 名称前添加一个 **#**。因此，“para1”和“para2”的选择器名称分别为“#para1”和“#para2”。这样，我们就可以使用它们的 id 名称作为选择器来应用不同的 CSS 样式。（图 7）

图 7：id 选择器的效果

您可能会注意到，具有 id 名称 para1 和 para2 的两个段落仍然居中，即使它们的相应选择器中没有指定 text-align 属性。在这种情况下，它们继承了其通用父级（即由 p 选择器设置了样式的 <p> 标签）的 text-align 属性。

请注意关于 id 选择器的以下几点

id 名称不能以数字开头
id 名称在页面内应该是唯一的
当您想在页面中查找 **单个** 元素时，请使用 id 选择器

class 选择器

类似地，每个 HTML 标签也有一个 class 属性，它可以包含一个 **标识其所属组的名称**。例如，如果 HTML 文档中有 4 个 <p> 标签，我们可以给其中 2 个命名为“group1”。要在 CSS 代码中选择它们，请在其类名（class name）前添加一个点字符 (.)。因此，“group1”的选择器名称是“.group1”。这样，我们就可以通过使用类名作为选择器，将一组具有相同类名的 HTML 元素应用一组 CSS 样式。（图 8）

图 8：class 选择器的效果

请注意关于 class 选择器的以下几点

类名不能以数字开头
当您想在页面中查找 **一组元素** 时，请使用类选择器

选择器链式调用

如果多个元素共享相同的样式，我们可以将它们链接起来以最小化代码。（图 9）

图 9：选择器链式调用

CSS 放置方式

到目前为止，您一直被告知将 CSS 样式表放置在 HTML 文档的 head 部分内部。它们被称为 **内部样式表**。事实上，还有另外 2 种放置 CSS 样式表的方式 - **外部样式表** 和 **内联样式表**。

内部样式表

我们对内部样式表已经非常熟悉了。当单个 HTML 文档具有独特样式时，应该使用它。然而，在许多 HTML 文档共享相同样式的情况下，这非常效率低下。为此，我们应该使用外部样式表。

外部样式表

顾名思义，外部样式表存在于任何 HTML 文档之外。每个文档都将通过 head 部分内的 <link> 标签链接到适当的外部样式表。让我们看看它是如何完成的。

我们将图 9 中的 HTML 文档中的 <style> 和 </style> 标签内的 CSS 代码“复制粘贴”到一个文本编辑器中。将此文本文件保存为“mystyle.css”，并放在与 HTML 文档相同的文件夹中。请注意，.css 是所有外部样式文件的文件扩展名。

    h1,h2,p
    {
       color:red;
       text-align:right;
    }

CSS 样式表已从 HTML 文档中移除。要将您的 HTML 文档链接到“mystyle.css”，请在 HTML 文档的 head 部分添加以下语句

    <link rel="stylesheet" type="text/css" href="mystyle.css">

在浏览器中打开 HTML 文档，您应该会看到与图 9 中显示的相同的网页。

当我们想在网站的多个网页中应用统一的样式时，外部样式表是理想的选择。我们可以通过仅更改一个文件，即外部样式表，来更改整个网站的外观和感觉。这对网站维护来说是一个巨大的解脱。

内联样式表

内联样式表使用 HTML 标签的 style 属性来放置样式声明，如下面的示例所示

    <p style="color:red;text-align=center;">Inline Style Sheet</p>

然而，这种将 CSS 嵌入 HTML 标签的方式重新引发了内容与表示混合的旧噩梦，并消除了引入 CSS 的任何好处。所以您应该尽量避免使用内联样式表。

样式表的优先级

通过混合使用内联、内部和外部样式表，HTML 元素可能为其指定了多个样式，这种情况并非不可能。在这种情况下，哪个样式应该被那个“困惑”的 HTML 元素遵循？这里就涉及到优先级顺序（按优先级降序排列）

内联样式表（在 HTML 元素内部）
内部样式表（在 head 部分内）
外部样式表（在外部 .css 文件中）
浏览器默认（未在任何样式表中指定）

不过有一个例外 - 如果外部样式表的链接放在内部样式表之下，则前者将优先。

很难记住？别担心，记住我的经验法则 - “**离元素最近的获胜**”。明白了吗？

CSS 属性

我们在前面的示例中使用了“color”和“text-align”。它们只是众多 CSS 属性中的两个。CSS 中的属性名称非常直观，即它们与其名称的含义一致。我们将探讨其中的三个类别 - 背景、文本和字体。

CSS 背景

任何网页的背景效果都可以通过以下 CSS 背景属性来定义

background-color
我们使用 background-color 属性来设置任何 HTML 元素（包括 <body> 标签）的背景颜色。

图 10：background-color 的效果
background-image
我们使用 background-image 属性将背景图像嵌入任何 HTML 元素。将以下代码片段添加到 HTML 文档中，并修改 url 参数以指向图像文件
```
    body{background-image:url("logo250x135.gif");} 
```
当它在浏览器中显示时，整个网页的背景将以图像平铺。（图 11）

图 11：background-image 的效果
background-repeat
要仅水平重复背景图像，请使用 background-repeat:repeat-x。
```
    body
    {
        background-image:url("logo250x135.gif");
        background-repeat:repeat-x;
    }  
```
效果如图 12 所示。

图 12：background-repeat:repeat-x; 的效果

要仅垂直重复背景图像，请将 background-repeat 属性的值更改为 repeat-y。
```
    background-repeat:repeat-y;
```
要将 background-image 显示在屏幕的左上角而不重复，请将 background-repeat 属性的值更改为 no-repeat。
```
    background-repeat:no-repeat; 
```
background-position
要将背景图像固定在屏幕的某个位置，请将 background-position 属性设置为适当的值，例如“top right”。
```
    body
    {
        background-image:url("logo250x135.gif");
        background-repeat:no-repeat;
        background-position:top right;
    }     
```
效果如图 13 所示。

图 13：background-position:top right; 的效果

CSS 文本

任何网页的文本效果都可以通过以下 CSS 属性来定义

color
color 属性用于设置任何 HTML 元素的文本颜色。我们已经见过它许多例子。
text-align
text-align 属性用于设置文本的水平对齐方式。它可以取 4 个值之一 - center、left、right 或 justified。我们也在许多例子中见过它。

text-decoration

text-decoration 属性用于设置或取消设置任何 HTML 元素的文本内容的装饰。它可以取 4 个值之一 - overline、line-through、underline、none。（图 14）

<!DOCTYPE html>
<html>
<head>
<style>
    #overline{text-decoration:overline;}
    #strikethrough{text-decoration:line-through;}
    #underline{text-decoration:underline;}
</style>
</head>
<body>
    <p id="overline">Under one roof</p>
    <p id="strikethrough">Cancel an appointment</p>
    <p id="underline">On solid footing</p>
</body>
</html>

图 14：text-decoration 的效果

none 值用于删除超链接的默认下划线。

text-transform
text-transform 用于根据其值将任何 HTML 元素的文本内容转换为大写、小写或首字母大写。（图 15）

图 15：text-transform 的效果
text-indent
text-indent 属性用于指定文本第一行的缩进量。（图 16）

图 16：text-indent 的效果

CSS 字体

文本的字体效果可以通过以下 CSS 属性来定义

font-family
font-family 属性用于设置 HTML 文档中某些文本的字体。font-family 名称有两种类型
- 单个字体族，如“Times New Roman”、“Verdana”、“arial”等。
- 字体族集合，如“sans-serif”、“Serif”、“fantasy”、“monospace”等。
（参见 CSS Font Stack）
通常为 font-family 属性定义几个字体名称。字体名称列表用逗号分隔。对于名称中包含空格的字体，请使用引号将名称括起来，例如下面的示例中的“Times New Roman”
```
font-family:"Times New Roman",Cambria,Serif;
```
如果浏览器不支持第一个字体，它将回退到第二个字体。经验法则是，您应该始终从您想要的单个字体族名称开始，并以指定前一个字体所属字体族的名称结束。这样，如果所有前一个字体都不可用，浏览器就可以选择同一字体族中的类似字体。
尝试以下示例，并在浏览器中查看结果。

图 17：font-family 的效果

font-style

font-style 属性接受以下三种值之一 - normal、italic 或 oblique。通过将以下 CSS 代码添加到图 17 的先前示例中，查看它们各自的效果。

    .serif
    {
        font-family:"Times New Roman",Georgia,serif;
        font-style:normal;
    }
    .sansserif
    {
        font-family:Arial,"Century Gothic",sans-serif;
        font-style:italic;
    }
    .monospace
    {
        font-family:"Courier New",Monaco,monospace;
        font-style:oblique;
    }

图 18：font-style 的效果

font-size
我们可以使用 font-size 属性，使用 3 种测量单位之一 - pixel、em 或 percentage - 来设置文本的大小。（图 19）

图 19：font-size 的效果

让我们在浏览器中查看图 19 的输出。第一个段落显示为 100% 的字体大小，因为它已经在 CSS 中使用 body 选择器设置为默认值。相比之下，第二个段落的字体大小设置为 50%。对于第三和第四段，它们在字体大小上看起来相同。查看它们各自的 CSS 声明，前者设置为 16 像素，后者设置为 1 em。换句话说，1 em 的测量值等于 16 像素。

注意事项

是时候通过注意这些要点来盘点今天的学习了

CSS 不区分大小写
选择器名称不能以数字开头
尽量避免使用内联样式表

我们将暂停休息一下。

参考

层叠样式表 (CSS) 快照 2010