HTML - 样式表

CSS，或层叠样式表，是一种定义网页文档在屏幕或打印输出中外观的工具。自从1994年推出以来，W3C 一直鼓励使用样式表进行网页设计。CSS 允许您控制内容的呈现方式，无论是在屏幕上、打印输出中还是为了辅助功能，从而使网页设计更加灵活高效。

层叠样式表 (CSS) 提供简单有效的替代方案来指定 HTML 标签的各种属性。使用 CSS，您可以为给定的 HTML 元素指定许多样式属性。

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

HTML 文档中 CSS 的示例

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

<!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>

层叠意味着应用于父元素的样式也将应用于父元素内的所有子元素。因此，当您将任何样式应用于元素时，必须注意子元素。您也可以为子元素应用不同的样式。

在 HTML 中使用 CSS（样式表）的方法

有三种方法可以在 HTML 文档中包含 CSS

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

在 HTML 中使用样式表的示例

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

使用外部 CSS

如果您需要在多个页面上使用样式表 (CSS)，则始终建议在一个单独的文件中定义一个公共样式表。CSS 文件的扩展名为“.css”，它将使用 <link> 标签包含在 HTML 文件中。

假设我们定义了一个样式表文件style.css，其中包含以下规则

style.css

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

这里我们定义了三个 CSS 规则，这些规则将适用于为 HTML 标签定义的三个不同的类。我建议您不必担心这些规则是如何定义的，因为您将在学习 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

如果您只想将样式表规则应用于单个文档，则可以使用<style>标签在 HTML 文档的头部部分包含这些规则。内部样式表中定义的规则会覆盖外部 CSS 文件中定义的规则。

在 HTML 中使用内部 CSS 的示例

让我们再次重写上面的示例，但是在这里我们将在同一个 HTML 文档中使用 <style> 标签编写样式表规则。

<!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>

使用内联 CSS

您可以使用相关标签的 style 属性直接将样式表规则应用于任何 HTML 元素。这应该只在您有兴趣对任何 HTML 元素进行特定更改时才执行。内联元素中定义的规则会覆盖外部 CSS 文件中定义的规则以及 <style> 元素中定义的规则。

在 HTML 中使用内联 CSS 的示例

让我们再次重写上面的示例，但是在这里我们将在 HTML 元素中使用这些元素的style属性编写样式表规则。

<!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>

打印页面