css样式表有三种类型，分别是外部样式表、内部样式表和内联样式表。
外部样式表
在设计HTML网页时，首先要对整个外观定义一个CSS文件（扩展名为.css），然后通过链接来使用，一个外部的样式表可以在HTML网页头部通过link元素（<link rel="stylesheet" type="text/css" href="相对路径">）连接到HTML文档中。一个外部样式表可以连接到多个网页中。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/wbysb.css">
</head>
<body>
<div></div>
</body>
</html>*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 100px;
height: 100px;
background-color: tomato;
margin: 50px;
}效果如图：
内部样式表
内部样式表是通过<style></style>写在HTML的头部里面，只对所在的网页有效。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/wbysb.css">
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
margin: 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>效果如图：
可以看到外部样式表依然连接在该网页中，但是显示的样式确是由内部样式表设置的。所以我们能够得出结论：内部样式表的优先级高于外部样式表。
内联样式表
内联样式表直接在元素开始标签中定义style。通常可以用在版块样式大部分相同，只有个别与其他不同时。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/wbysb.css">
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
margin: 30px;
}
</style>
</head>
<body>
<div style="width: 50px;height: 50px;background-color: darkgreen;margin: 10px;"></div>
</body>
</html>效果如图：
代码段中并没有把外部样式表、内部样式表去掉，但是最终显示出的效果还是以内联样式表为准的，所以内联样式表的优先级最高。
总结
三种css样式表的优先级排序：
内联样式表>内部样式表>外部样式表
版权声明：本文为m0_50947589原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。