CSS层叠样式表（一）——使用CSS样式的方式

最新推荐文章于 2025-05-12 09:14:00 发布

原创最新推荐文章于 2025-05-12 09:14:00 发布 · 6.1k 阅读

5 ·

CC 4.0 BY-SA版权

HTML+CSS基础入门专栏收录该内容

3 篇文章

订阅专栏

本文介绍了HTML文档中CSS样式表的四种使用方式：<!DOCTYPE>声明、内联样式表、嵌入式样式表以及引入式样式表，并通过具体示例展示了如何设置网页背景颜色和字体颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、HTML<!DOTYPE>声明标签

1）<!DOTYPE>声明必须是HTML文档的第一行，位于<html>标签之前

2）<!DOTYPE>声明不是HTML标签；它是web浏览器关于页面使用哪个HTML版本进行编写的指令。

3）HTML5中的声明格式为：<!DOTYPLE html>

其中，字符集的声明为<meta charset="utf-8">

2、内链样式表--如：<body style="background-color:green; margin:0;" >

格式：在标记后加空格，写style=...，属性与属性之间用“；”隔开，属性与属性值之间用“：”隔开

例子：内链样式表设置网页的背景颜色及网页字体颜色

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>CSS的使用方式</title>
   </head>
	<body style="background-color:green;color:#fff">
		<!--用font标记中的color属性可以设置字体的颜色<h1><font color="white">CSS的使用方式 </font></h1>-->
	   <h1 style="color:#fff">CSS的使用方式</h1>
	   <p>CSS的使用方式</p>
	</body>
</html>color:#fff">
		<!--用font标记中的color属性可以设置字体的颜色<h1><font color="white">CSS的使用方式 </font></h1>-->
	   <h1 style="color:#fff">CSS的使用方式</h1>
	   <p>CSS的使用方式</p>
	</body>
</html>

注：#fff表示白色

运行结果：

3、嵌入式样式表--如：<style type="text/css"></style>

格式：该样式表需要放在<head>标记中，属性与属性值之间用“：”隔开

例子：嵌入式样式表设置网页的背景颜色及网页字体颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的使用方式</title>
		<style type="text/css">
	         /*控制全局的样式*/
			body
			{
			background-color:green;
			color:red;
			}
		   /*控制P这一段落的样式*/
			P
			{
			background-color:red;
			color:green; 
			}
		</style>
	</head>
	<body>
	  <h1>CSS的使用方式</h1>
	   <p>CSS的使用方式</p>
	</body>
</html>

注：在CSS代码中进行注解
注释语法：
/* 注解注释内容 */

运行结果：

4、引入式样式表--如：<link rel="stylesheet"type="text/css"href="style.css">

格式：与嵌入式的格式相似，只是样式的设置需要引用一个.css文件，href=“*.css”

例子：嵌入式样式表设置网页的背景颜色及网页字体颜色

主程序：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS的使用方式</title>
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	  <h1>CSS的使用方式</h1>
	   <p>CSS的使用方式</p>
	</body>
</html><link rel="stylesheet" type="text/css" href="style.css">
	</head>
	<body>
	  <h1>CSS的使用方式</h1>
	   <p>CSS的使用方式</p>
	</body>
</html>

style.css程序：

body
{ 
 background-color:red;
 color:#fff;
}

运行结果：