html CSS层叠样式表 – HTML教程 htmlcss层叠样式表|HTML

上一章HTML教程请查看：html header元素
层叠样式表(CSS)描述文档如何在屏幕上显示、如何打印等，自从W3C于1994年成立以来，它一直在积极推动在Web上使用样式表。
层叠样式表(CSS)为为HTML标记指定各种属性提供了简单而有效的替代方法。使用CSS，你可以为给定的HTML元素指定许多样式属性，每个属性都有一个名称和一个值，用冒号(:)分隔，每个属性声明由分号(; )分隔。
例子
首先，让我们考虑一个使用 标记和相关属性来指定文本颜色和字体大小的HTML文档示例
注意，字体标签已经被弃用，应该在将来的HTML版本中移除。所以不应该使用它们，而是建议使用CSS样式来操作字体。但仍然出于学习目的，本章将使用一个使用字体标记的示例。

< !DOCTYPE html> < html>< head> < title>HTML CSS< /title> < /head>< body> Hello, World! < /body>< /html>

我们可以在样式表的帮助下重新编写上面的示例，如下所示：

< !DOCTYPE html> < html>< head> < title>HTML CSS< /title> < /head>< body> Hello, World! < /body>< /html>

你可以在你的HTML文档中以三种方式使用CSS：

外部样式表—在一个单独的.css文件中定义样式表规则，然后使用HTML < link> 标记将该文件包含在HTML文档中。
内部样式表—使用< Style > 标记在HTML文档的标题部分定义样式表规则。
内联样式表——在HTML元素上，使用样式属性直接定义样式表规则。

在适当的例子的帮助下，让我们一个一个地看看这三种情况。
外部样式表如果你需要将样式表用于不同的页面，那么总是建议在单独的文件中定义公共样式表。级联样式表文件的扩展名为.css，它将包含在使用< link> 标记的HTML文件中。
例子
假设我们定义了一个样式表文件style.css，它有以下规则：

.red { color: red; } .thick { font-size:20px; } .green { color:green; }

这里我们定义了三个CSS规则，它们将适用于为HTML标记定义的三个不同的类。我建议你不必费心去了解这些规则是如何定义的，因为你将在学习CSS时学习它们。现在让我们在下面的HTML文档中使用上面的外部CSS文件：

< !DOCTYPE html> < html>< head> < title>HTML外部CSS< /title> < link rel = "stylesheet" type = "text/css" href = "http://www.srcmini.com/html/style.css"> < /head>< body> 这是红色 这是加大字体 这是绿色 这是加大绿色字体 < /body>< /html>

内部样式表如果只想将样式表规则应用于单个文档，则可以使用< Style > 标记将这些规则包含在HTML文档的标题部分中。
内部样式表中定义的规则覆盖外部CSS文件中定义的规则。
例子
让我们再次重写上面的例子，但是在这里我们将使用< style> 标签在相同的HTML文档中编写样式表规则：

< !DOCTYPE html> < html> < head> < title>HTML内部CSS< /title> < style type = "text/css"> .red { color: red; } .thick{ font-size:20px; } .green { color:green; } < /style> < /head>< body> 这是红色 这是加大字体 这是绿色 这是加大绿色字体 < /body>< /html>

内联样式表可以使用相关标记的样式属性将样式表规则直接应用于任何HTML元素，只有当你对任何HTML元素有兴趣时，才应该这样做。
元素内联定义的规则覆盖外部CSS文件中定义的规则以及< style> 元素中定义的规则。
例子
【html CSS层叠样式表 – HTML教程】让我们再次重写上面的示例，但是在这里，我们将使用这些元素的样式属性来编写样式表规则和HTML元素。