HTML - 样式表

CSS 或级联样式表是一种工具，用于定义 Web 文档在屏幕或打印中的外观。自 1994 年推出以来，W3C 一直鼓励在网页设计中使用样式表。CSS 可让您控制内容的呈现，无论是在屏幕上、印刷品上还是可访问性，使网页设计更加灵活和高效。

级联样式表（CSS）为指定 HTML 标记的各种属性提供了简单有效的替代方法。使用 CSS，您可以为给定的 HTML 元素指定多个样式属性。

每个属性都有一个名称和一个值，用冒号（:).每个属性声明都用分号（;) 分隔。

HTML 文档上的 CSS 示例

首先，让我们考虑一个 HTML 文档的示例，该文档使用 <font> 标签和关联的属性来指定文本颜色和字体大小。


<!DOCTYPE html>
<html><head>
   <title>HTML CSS</title></head>
<body>
   <p>
      <font color="green" size="5">Hello, World!</font>
   </p>
</body>
</html>

我们可以在CSS的帮助下重写上面的例子，如下所示。


<!DOCTYPE html>
<html>
<head>
   <title>HTML CSS</title>
</head>
   
<body>
   <p style="color:green;font-size:24px;">
      Hello, World!   </p>
</body>
</html>

级联意味着应用于父元素的样式也将应用于父元素中的所有子元素。因此，当你将任何样式应用于一个元素时，你必须对子元素有所了解。您也可以将不同的样式应用于子元素。

CSS 的类型

CSS 中没有类型或种类，实际上有三种方法可以将 CSS 包含在 HTML 文档中。

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

使用样式表的示例

让我们借助合适的示例一一查看所有三种方法。

外部 CSS

如果需要将样式表用于各种页面，则始终建议在单独的文件中定义通用样式表。级联样式表文件的扩展名为.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>

内部 CSS

如果只想将样式表规则应用于单个文档，则可以使用 <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>

内联 CSS

您可以使用相关标记的 style 属性将样式表规则直接应用于任何 HTML 元素。仅当您有兴趣对任何 HTML 元素进行特定更改时，才应执行此操作。与元素内联定义的规则将覆盖外部 CSS 文件中定义的规则以及 <style> 元素中定义的规则。

让我们再次重写上面的例子，但在这里我们将使用这些元素的 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>

打印本页