CSS — 外部、内部、内联及它们的优先级顺序

最新推荐文章于 2024-07-10 17:12:07 发布

王睿丶

最新推荐文章于 2024-07-10 17:12:07 发布

阅读量4.9k

点赞数 2

分类专栏： Web 文章标签： Web CSS 外部、内部、内联样式优先级顺序样式

本文链接：https://blog.csdn.net/qq_27494201/article/details/100804182

版权

Web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

一丶外部样式

首先先在相对与网页同一个路径下建立一个扩展名以.css的文件，将它用记事本打开，放入代码：
如图：
在这里插入图片描述
然后利用 link 标签即可导入外部样式文件，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
		
		<link rel="stylesheet" type="text/css" href="index.css">

</head>

<body>
	<p>加油！</p>
</body>
</html>

效果图：
在这里插入图片描述

—————————————————————————————————————————

二丶内部样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>

	<style type="text/css">
		p{
			text-align: center;
			font-size: 30px;
		}
	</style>
	
</head>

<body>

	<p>加油！</p>

</body>
</html>

—————————————————————————————————————————

三丶内联样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>

</head>

<body>

	<p style="text-align: center;font-size: 30px;color: red">加油！</p>

</body>
</html>