srcmini上一章HTML教程请查看：html header元素
层叠样式表(CSS)描述文档如何在屏幕上显示、如何打印等，自从W3C于1994年成立以来，它一直在积极推动在Web上使用样式表。
层叠样式表(CSS)为为HTML标记指定各种属性提供了简单而有效的替代方法。使用CSS，你可以为给定的HTML元素指定许多样式属性，每个属性都有一个名称和一个值，用冒号(:)分隔，每个属性声明由分号(;)分隔。
例子
首先，让我们考虑一个使用<font>标记和相关属性来指定文本颜色和字体大小的HTML文档示例
注意，字体标签已经被弃用，应该在将来的HTML版本中移除。所以不应该使用它们，而是建议使用CSS样式来操作字体。但仍然出于学习目的，本章将使用一个使用字体标记的示例。
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>
我们可以在样式表的帮助下重新编写上面的示例，如下所示：
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</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 = "/html/style.css">
</head>
<body>
<p class = "red">这是红色</p>
<p class = "thick">这是加大字体</p>
<p class = "green">这是绿色</p>
<p class = "thick green">这是加大绿色字体</p>
</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>
<p class = "red">这是红色</p>
<p class = "thick">这是加大字体</p>
<p class = "green">这是绿色</p>
<p class = "thick green">这是加大绿色字体</p>
</body>
</html>
内联样式表
可以使用相关标记的样式属性将样式表规则直接应用于任何HTML元素，只有当你对任何HTML元素有兴趣时，才应该这样做。
元素内联定义的规则覆盖外部CSS文件中定义的规则以及<style>元素中定义的规则。
例子
让我们再次重写上面的示例，但是在这里，我们将使用这些元素的样式属性来编写样式表规则和HTML元素。
<!DOCTYPE html>
<html>
<head>
<title>HTML内联CSS</title>
</head>
<body>
<p style = "color:red;">这是红色</p>
<p style = "font-size:20px;">这是加大字体</p>
<p style = "color:green;">这是绿色字体</p>
<p style = "color:green;font-size:20px;">这是加大绿色字体</p>
</body>
</html>
评论前必须登录！
注册