HTML 样式表-之路教程

←HTML 页面头部

HTML JavaScript→

HTML 样式表

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

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

内联样式表

我们可以使用style属性将样式表规则直接应用于任何HTML元素。只有当我们只想对任何HTML元素进行特定更改时，才应该这样做。

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

内联样式表示例

使用这些元素的style属性来编写样式表规则和HTML元素。

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML 内联样式表</title> 
   </head>
 
   <body>
      <p class = "red">这是红色字体</p>
      <p class = "thick">这是粗体字</p>
      <p class = "green">这是绿色字体</p>
      <p class = "thick green">这是粗体绿色字体</p>
   </body>
 
</html>

HTML 样式表示例

指定文本颜色和字体大小:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</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标记定义的三个不同的类。

在下面的HTML文档中使用上面的外部CSS文件:

<!DOCTYPE html>
<html>

   <head>
      <title>HTML使用外部css样式表</title>
      <link rel = "stylesheet" type = "text/css" href = "./src/style.css">
   </head>

   <body>
      <p class = "red">这是红色字体</p>
      <p class = "thick">这是粗体字</p>
      <p class = "green">这是绿色字体</p>
      <p class = "thick green">这是粗体绿色字体</p>
   </body>

</html>

内部样式表

如果只想将样式表规则应用于单个文档，则可以使用<Style>标记将这些规则包含在HTML文档的头部 <head>。

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

内部样式表示例

使用<style>标签将样式表规则写到HTML文档中：

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML 内部CSS样式表</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body>
      <p class = "red">这是红色字体</p>
      <p class = "thick">这是粗体字</p>
      <p class = "green">这是绿色字体</p>
      <p class = "thick green">这是粗体绿色字体</p>
   </body>
	
</html>

日期：2019-06-08 23:19:24 来源：oir作者：oir