如何在html中应用css

最新推荐文章于 2025-07-21 17:10:38 发布

原创最新推荐文章于 2025-07-21 17:10:38 发布 · 711 阅读

6 ·

CC 4.0 BY-SA版权

本文深入讲解CSS（层叠样式表）的基本概念，包括其在HTML文档中的三种使用方式：外部样式表、内部样式表和行内样式表。同时，文章对比了这三种方式的优先级，帮助读者理解如何有效运用CSS提升网页美观。

文章目录

css定义

CSS（Cascading Style Sheets） 层叠样式表，是一个用于修饰文档（可以是标记语言 HTML，也可以是 XML 或者 SVN）的语言，可以将文档以更优雅的形式呈现给用户。

css 语言的核心功能就是为特定的属性设定特点的值，css 引擎通过计算出声明的每个属性来显示元素。css 的属性和值都是大小写敏感的。属性与值通过 “ : ” 分隔开。并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。

CSS如何作用于HTML

浏览器将 css 规则应用到文档上，使CSS影响文档的显示。css 规则由选择器和一系列的属性对组成。一系列的 css 规则就可以形成一个层叠样式表。

1、外部样式表

将样式定义在 css 文件中，通过 html 中的<link>标签导入进来。

html 代码

      <!DOCTYPE html>
        <html lang="en">
        <head>
        	<meta charset="UTF-8">
        	<title>外部样式表</title>
        	<!-- 通过link标签导入样式 -->
        	<link rel="stylesheet" href="./style.css">
        </head>
        <body>
        	<div>one</div>
        </body>
        </html>

css 代码

	div {
		/*宽*/
		width: 100px;
		/*高*/
		height: 100px;
		/*块元素居中*/
		margin: 0 auto;
		/*背景颜色*/
		background-color: pink;
	}

效果图

2、内部样式表

将样式添加到<style>标签中

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>内部样式表</title>
	<style>
		div {
			/*宽*/
			width: 100px;
			/*高*/
			height: 100px;
			/*块元素居中*/
			margin: 0 auto;
			/*背景颜色*/
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<div>one</div>
</body>
</html>

效果图

3、行内样式表

在元素中添加 style 属性，style 属性值为 css 样式规则。
优点：简单直接，优先级高
缺点：样式与结构杂糅

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内样式表</title>
</head>
<body>
	<div style="width: 100px;height: 100px;margin: 0 auto;background-color: teal;">
		<p style="color:red;">hello world</p>
	</div>
</body>
</html>

效果图片

4、优先级比较

行内样式表与内部样式表优先级比较
行内样式表的优先级较高

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>优先级比较</title>
	<style>
		div {
			width: 100px;
			height: 100px;
			margin: 0 auto;
			background-color: lightblue;
		}
	</style>
</head>
<body>
	<div style="width: 100px;height: 100px;margin: 0 auto;background-color: teal;">
		<p style="color:red;">hello world</p>
	</div>
</body>
</html>