HTML Style Sheet

原创

admin 4个月前 (08-07) 阅读数 20 #HTML

HTML Style Sheet

CSS，即层叠样式表，是一种定义网页文档在屏幕或打印中外观的工具。自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>

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

在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的示例

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

<!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的示例

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