HTML - 级联样式

HTML - 级联样式 首页 / HTML入门教程 / HTML - 级联样式

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

首先让无涯教程考虑一个HTML文档的示例,该示例利用<font>标签和相关属性来指定文本颜色和字体大小-

注意-不推荐使用 font 标签,并且应该在将来的HTML版本中将其删除。因此,不应该使用它们,建议使用CSS样式来操纵字体。但仍出于学习目的,本章将使用使用font标签的示例。

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

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-style-sheet.html

来源:LearnFk无涯教程网

您可以在HTML文档中以三种方式使用CSS-

  • 外部样式表 - 在单独的.css文件中定义样式表规则,然后使用HTML <link>标签将该文件包含在HTML文档中。

  • 内部样式表 - 使用<style>标签在HTML文档的标题部分中定义样式表规则。

  • 属性样式表 - 使用style属性直接定义样式表规则以及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 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>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-style-sheet.html

来源:LearnFk无涯教程网

内部样式表

如果仅要将样式表规则应用于单个文档,则可以使用<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>

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-style-sheet.html

来源:LearnFk无涯教程网

属性样式表

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

这将产生以下输出-

链接:https://www.learnfk.comhttps://www.learnfk.com/html/html-style-sheet.html

来源:LearnFk无涯教程网

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

Java核心技术面试精讲 -〔杨晓峰〕

趣谈网络协议 -〔刘超〕

如何设计一个秒杀系统 -〔许令波〕

雷蓓蓓的项目管理实战课 -〔雷蓓蓓〕

分布式数据库30讲 -〔王磊〕

深度学习推荐系统实战 -〔王喆〕

程序员的测试课 -〔郑晔〕

业务开发算法50讲 -〔黄清昊〕

徐昊 · TDD项目实战70讲 -〔徐昊〕

好记忆不如烂笔头。留下您的足迹吧 :)