HTML - 样式表( Style Sheet)
级联样式表（CSS）描述了如何在屏幕上，印刷中或者可能如何发音文档。 自该联盟成立于1994年以来，W3C积极推动在网上使用样式表。
层叠样式表（CSS）提供了简单有效的替代方法，可以为HTML标记指定各种属性。 使用CSS，您可以为给定的HTML元素指定许多样式属性。 每个属性都有一个名称和一个值，用冒号（:)分隔。 每个属性声明都用分号（;）分隔。
例子 (Example)
首先让我们考虑HTML文档的一个例子，该文档利用标签和相关属性来指定文本颜色和字体大小 -
Note - 不推荐使用font标记，并且应该在将来的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 -
External Style Sheet - 在单独的.css文件中定义样式表规则，然后使用HTML“link”标记将该文件包含在HTML文档中。
Internal Style Sheet - 使用“样式”标记在HTML文档的标题部分中定义样式表规则。
Inline Style Sheet - 使用style属性直接与HTML元素一起定义样式表规则。
让我们在合适的例子的帮助下逐一看到所有这三个案例。
外部样式表
如果需要将样式表用于各种页面，则始终建议在单独的文件中定义公共样式表。 级联样式表文件的扩展名为.css ，它将使用“link”标记包含在HTML文件中。
例子 (Example)
考虑我们定义样式表文件style.css ，它具有以下规则 -
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
在这里，我们定义了三个CSS规则，这些规则将适用于为HTML标记定义的三个不同的类。 我建议您不要理会如何定义这些规则，因为您将在学习CSS时学习它们。 现在让我们在下面的HTML文档中使用上面的外部CSS文件 -
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
这将产生以下结果 -
新页面打开内部样式表
如果要将样式表规则仅应用于单个文档，则可以使用
内部样式表中定义的规则将覆盖外部CSS文件中定义的规则。
例子 (Example)
让我们再次重写上面的例子，但是在这里我们将使用
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
这将产生以下结果 -
新页面打开内联样式表
您可以使用相关标记的style属性将样式表规则直接应用于任何HTML元素。 只有当您有兴趣在任何HTML元素中进行特定更改时，才应执行此操作。
与元素内联定义的规则将覆盖外部CSS文件中定义的规则以及
例子 (Example)
让我们再次重写上面的例子，但是在这里我们将使用这些元素的style属性来编写样式表规则以及HTML元素。
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>
这将产生以下结果 -
新页面打开