Html 简明教程

HTML - Style Sheet

CSS 或 Cascading Style Sheets 是一个工具，可以规定网络文档在屏幕上或打印出来时所显示的样子。自 1994 年 W3C 引入该工具以来，一直提倡在网页设计中使用样式表。CSS 使你能够控制内容的表现形式，无论是屏幕上、打印出来还是为了方便阅读，从而使网页设计更加灵活且高效。

层叠样式表 (CSS) 提供了简单有效的替代方法，可用于为 HTML 标记指定各种属性。利用 CSS，你可以为某一给定的 HTML 元素指定许多样式属性。

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

Example of CSS on HTML Document

首先，让我们来看一个使用 * <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>

Types of CSS

CSS 实际上没有类型或种类，有三种方法可以在你的 HTML 文档中加入 CSS。

  1. External CSS: 在一个单独的 .css 文件中定义样式表规则，然后使用 HTML * &lt;link&gt;* 标记将该文件包含在你的 HTML 文档中。

  2. Internal CSS: 在 HTML 文档的头文件部分中使用 &lt;style&gt; 标记定义样式表规则。

  3. Inline CSS: 直接在 HTML 元素中使用样式属性来定义样式表规则。

Examples of using Style Sheet

我们借助合适的示例，逐个来看一下这三种方法。

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

Internal CSS

如果只想要将样式表规则应用到一个文档，那么你可以使用 * <style>* 标记将这些规则包含到 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>

Inline CSS

你可以使用相关标记的样式属性，将样式表规则直接应用到任何 HTML 元素。这仅应在你想要对任何 HTML 元素进行特定更改时执行。与元素内联定义的规则将覆盖在外部 CSS 文件中定义的规则，以及在 <style> 元素中定义的规则。

让我们再次改写上述示例，但这一次，我们将使用这些元素的 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>