在html页面中引用css的方式有3种：分别是内联样式、内部样式和外联样式。
一、 内联样式
内联样式写在html元素标签的style属性内，写法如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
</head>
<body>
<div style="width:100px;height: 100px; border-radius: 50px; background: green;line-height: 100px;color: #FFF;text-align: center;">内联样式</div>
</body>
</html>
效果如下：
image.png
你想要定义什么元素的样式，你就在指定元素的style属性内添加css样式即可。
二、 内部样式
内部样式与内联样式稍有区别，两者均在html文件中写css代码，不同的是内部样式是在head标签下的style标签内来写样式，写法如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style type="text/css">
.Inside{width:100px;height:100px;line-height: 100px;color: #FFF;background: red;text-align: center;}
</style>
</head>
<body>
<div class="Inside">内部样式</div>
</body>
</html>
效果如下：
image.png
三、 外联样式
外联样式则是将css代码单独写到.css后缀的样式表文件中，然后在html页面中用link标签引用或用@import引用。
link标签引用的写法：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="Outside.css" />
</head>
<body>
<div class="Outside">外联样式</div>
</body>
</html>
@import引用的写法：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style type="text/css">
@import url("Outside.css");
</style>
</head>
<body>
<div class="Outside">外联样式</div>
</body>
</html>
Outside.css文件中的css代码如下：
.Outside{width:100px;height: 100px;background: yellow ;line-height: 100px;text-align: center;}
两种方式的效果是一样的：
image.png
四、 css样式引用的优先级
不少学习者会有疑惑既然有那么多的方式可以引用css样式，那么当你同时写了内联样式和外联样式时，哪种样式会生效呢？也有人在实际使用中遇到过这样的问题，为什么明明已经写了样式确又不知道在哪个地方被覆盖。原因就是没搞懂各种方式引用css的优先级是怎样的。
在开始之前先了解下!important，在写样式的时候带上!important表示当前所写的样式将不会被覆盖。
比如你的css代码如下：
width:100px;width:200px;height:100px;
你两次指定了宽度，第一次100px,第二次200px,此时有效的宽度为200px。
image.png
如果你这样写：
width:100px !important;width:200px;height:100px;
效果是这样的
你先定义宽度为100px,定义了该宽度为不能被覆盖，此时你再怎么重新定义宽度，都只会有之前的宽度为100px生效。
带!important的样式的优先级大于不带!important的样式。
再比较内联样式、内部样式和外部样式的优先级。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="test.css" />
<style type="text/css">
.test{background: yellow}
</style>
</head>
<body>
<div class="test" style="background: red">优先级比较</div>
</body>
</html>
test.css中为
.test{background: green}
内联样式定义div背景颜色为红色、内部样式定义背景颜色为黄色、外部样式定义背景颜色为绿色
最终效果：
image.png
得知，内联样式的优先级最高，大于内部样式和外部样式。
再比较内部样式和外联样式的优先级。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="test.css" />
<style type="text/css">
.test{background: yellow}
</style>
</head>
<body>
<div class="test">优先级比较</div>
</body>
</html>
显示效果为：
image.png
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8" />
<style type="text/css">
.test{background: yellow}
</style>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="test">优先级比较</div>
</body>
</html>
显示效果为:
image.png
你可以发现对于内部样式和外联样式来说，优先级是一样。主要得看css的代码位置，如果先在外联样式定义背景颜色为绿色，在内部样式定义背景颜色为黄色，那么浏览器在加载html的时候先将背景颜色置为绿色，再将背景颜色置为黄色，你最终看到的结果就是黄色。
css样式的优先级：
- 带!important的内联样式；
- 不带!important的内联样式；
- 带!important的内部样式或外联样式；
- 不带!important的内部样式或外联样式；
-
同等优先级先引入的样式会被后引入的样式覆盖。
image.png
网友评论