如何使用HTML5和CSS3编程的外部样式表 - 傻瓜

CSS3支持 外部样式表。 这项技术可以让您将样式表定义为单独的文档并将其导入到您的网页中。看看为什么这可能是有吸引力的，看看这个例子。

当您查看externalStyle的代码时。 html，你可能会惊讶地发现没有明显的风格信息！

<！ --1 - >

externalStyle。 html

外部样式
此页面为段落，正文和标题1设置样式。
样式在外部样式表中定义。

在平时看到样式标签（在标题中）的地方，没有样式。相反，你看到一个标签。这个特殊的标签用于连接当前文档和另一个文档。

如何定义外部样式

使用外部样式时，样式元素不会嵌入页面标题中，而会嵌入到完全独立的文档中。

在这种情况下，页面连接到一个名为myStyle的特殊文件。 CSS。这个文件包含了所有的CSS规则：

/ * myStyle。 css * / body {background-color：#333300;颜色：#FFFFFF;} h1 {color：#FFFF33; text-align：center;字体：斜体200％幻想;} p {background-color：#FFFF33;颜色：#333300; text-align：right; border：3px groove#FFFF33;}

样式表看起来就像一个页面级样式，除了几个关键区别：

• 样式表规则包含在一个单独的文件中。 样式不再是HTML页面的一部分，而是存储在服务器上的完全独立的文件。 CSS文件通常以。 CSS扩展。

• 没有 标签。 这些都不需要，因为样式不再嵌入在HTML中。代码以评论开头。

• / * * /对在CSS中表示注释。说实话，你可以把注释放在页面级的CSS中。外部CSS文件经常有评论。 样式文件没有HTML。

• CSS文件只包含CSS。这更接近于分离样式（在CSS文档中）和内容（在HTML文档中）的目标。 文档不受限于任何特定的页面。

• 外部CSS的巨大优势是重用。 CSS文档不是任何特定页面的一部分，但任何页面都可以使用它。 如何重用外部CSS样式

当您有多个需要相同样式的页面时，外部样式表非常有趣。今天大多数网站使用多个页面，他们应该共享一个共同的样式表来保持一致性。

代码显示了如何轻松完成：

SecondPage。html

第二页

此页面使用与externalStyle相同的样式。 HTML。
外部样式表具有一些巨大的优势：

一个样式表可以控制多个页面：

• 通常，网站中的大量不同页面都具有相同的总体样式。您可以在一个文档中定义样式表，并将所有HTML文件引用到CSS文件中。 全局更改更简单：

• 如果使用外部样式，则在一个位置进行更改，并自动传播到系统中的所有页面。 内容和设计的分离：

• 使用外部CSS，所有设计都放置在CSS中，数据是HTML。 轻松升级：

• 由于整个站点的设计参数都是在一个文件中定义的，因此您可以轻松更改站点，而不必混淆各个HTML文件。 链接标签

标签是将CSS引用添加到HTML文档的关键。该标签具有以下特征：

• 标签是HTML页面的一部分。 在HTML文档中使用标签来指定HTML页面将使用哪个CSS文档。

• 标签只出现在标题中。 与标签不同，标签只能出现在标题中。 标签没有视觉存在。

• 用户不能看到标签，只能看到它的效果。 使用

• 链接 标记将文档与其他文档相关联。 您使用标签来描述文档之间的关系。

• 标记具有 rel 属性， 定义了关系的类型。 现在，您将使用的唯一关系是样式表属性。

• 标签还具有 href 属性，该属性描述了其他文档的位置。链接标签通常用于将页面连接到外部定义的样式文档。大多数人将由anchor（）标签创建的超链接称为超链接或链接。这可能会导致一些混淆，因为在这个意义上，链接标记不会创建这种类型的链接。 如何指定外部链接

要使用标签指定外部样式表，请执行以下步骤：

定义样式表。

外部样式表与您已经知道的非常相似。只需将所有样式放在不带和标签的单独文本文档中即可。

在HTML页面的头部区域创建一个链接元素来定义HTML和CSS页面之间的链接。

1. 我的link元素如下所示：

   通过设置rel =“stylesheet”属性来设置链接的关系。老实说，样式表几乎是你将要使用的唯一的关系，所以这应该是自动的。

2. 通过设置type =“text / css”来指定样式的类型。

   使用href属性确定样式表的位置。