前端学习（三）——CSS的三种写法与优先级

最新推荐文章于 2023-04-28 12:35:54 发布

stcode

最新推荐文章于 2023-04-28 12:35:54 发布

阅读量1k

点赞数

分类专栏：初学者

本文链接：https://blog.csdn.net/tjq980303/article/details/52479758

版权

初学者专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.style属性中写CSS

样例：

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
</head>
<body>
<p style="color:red;font-size:30px;">CSS写法优先级测试</p>
</body>
</html>

2.在<style>标签中写CSS

样例：

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
	<style type="text/css">
		p{
			color: green;
			font-size: 50px;
		}
	</style>
</head>
<body>
<p>CSS写法优先级测试</p>
</body>
</html>

3.link标签外联样式表

创建文件如下

test.html

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="./test.css">
</head>
<body>
<p>CSS写法优先级测试</p>
</body>
</html>

test.css

p{
	color: blue;
	font-size: 10px;
}

。

三种写法的优先级优先级

第一种>第二种>第三种

样例

<!DOCTYPE html>
<html>
<head>
	<title>CSS写法优先级测试</title>
	<meta charset="utf-8"/>
	<link rel="stylesheet" type="text/css" href="./test.css">
	<style type="text/css">
		p{
			color: blue;
			font-size: 50px;
		}
	</style>
</head>
<body>
<p style="color:red;font-size:30px;">CSS写法优先级测试</p>
</body>
</html>

test.css如上

结果

stcode

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习（三）——CSS的三种写法与优先级

1.style属性中写CSS 样例： CSS写法优先级测试 CSS写法优先级测试 2.在标签中写CSS 样例： CSS写法优先级测试 p{ color: green; font-size: 50px; } CSS写法优先级测试 3.link标签外联样式表创建文件如下test.html
复制链接

扫一扫

专栏目录