HTML - 样式表

层叠样式表 (CSS) 描述文档如何在屏幕上、打印中呈现，或者它们的发音方式。自 1994 年联盟成立以来，W3C 一直积极推动样式表在 Web 上的使用。

层叠样式表 (CSS) 提供了简单有效的替代方法来指定 HTML 标记的各种属性。使用 CSS，您可以为给定的 HTML 元素指定许多样式属性。每个属性都有一个名称和一个值，以冒号 (:) 分隔。每个属性声明都用分号 (;) 分隔。

例子

首先让我们考虑一个 HTML 文档的示例，它使用 <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 -

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

让我们借助合适的示例一一了解这三种情况。

外部样式表

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

这将产生以下结果 -

内部样式表

如果您只想将样式表规则应用于单个文档，则可以使用 <style> 标记将这些规则包含在 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>

这将产生以下结果 -

内联样式表

您可以使用相关标记的样式属性将样式表规则直接应用于任何 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>

这将产生以下结果 -