HTML - 样式表 - 前端之家

层叠样式表(CSS)描述了如何在屏幕上，印刷品中显示文档，或者如何将它们发音.自该联盟成立于1994年以来，W3C一直积极推动在网络上使用样式表.

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

示例

首先让我们考虑一个使用&lt的HTML文档示例;字体&GT;标签和相关属性，用于指定文本颜色和字体大小 :

注意 : 不推荐使用 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文档的标题部分定义样式表规则。
内联样式表:使用style属性直接与HTML元素一起定义样式表规则。

让我们在适当的示例的帮助下一一查看所有三种情况。

External Style Sheet

如果需要在各个页面上使用样式表，则始终建议在单独的文件中定义通用样式表。级联样式表文件的扩展名为.css，它将使用<link>标记包含在HTML文件中。

Example

考虑我们定义一个样式表文件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 Style Sheet

如果仅要将样式表规则应用于单个文档，则可以使用<style>标记将这些规则包括在HTML文档的标题部分中。

内部样式表中定义的规则将覆盖外部CSS文件中定义的规则。

Example

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

Inline Style Sheet

您可以使用相关标签的style属性将样式表规则直接应用于任何HTML元素。仅当您只想在任何HTML元素中进行特定更改时才应执行此操作。

与元素内联定义的规则将覆盖外部CSS文件中定义的规则以及<style>元素中定义的规则。

Example

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