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

69 阅读 0 评论 46 点赞

我是靠谱客的博主魁梧季节，最近开发中收集的这篇文章主要介绍CSS — 外部、内部、内联及它们的优先级顺序，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

一丶外部样式

首先先在相对与网页同一个路径下建立一个扩展名以.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>