CSS三：CSS的三种引⼊⽅式CSS的引⼊⽅式共有三种：⾏内样式、内部样式表、外部样式表。
⼀、⾏内样式
使⽤style属性引⼊CSS样式。
⽰例：
<h1 >style属性的应⽤</h1>
<p  >直接在HTML标签中设置的样式</p>
实际在写页⾯时不提倡使⽤，在测试的时候可以使⽤。
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>⾏内样式</title>
</head>
<body>
<!--使⽤⾏内样式引⼊CSS-->
<h1 >Leaping Above The Water</h1>
<p >我是p标签</p>
</body>
</html>
⼆、内部样式表
在style标签中书写CSS代码。style标签写在head标签中。
⽰例：
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<!--使⽤内部样式表引⼊CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
css样式表优先级最高
<div>我是DIV</div>
</body>
</html>
三、外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML⽂件引⽤扩展名为.css的样式表，有两种⽅式：链接式、导⼊式。
语法：
1、链接式
<link type="text/css" rel="styleSheet"  href="CSS⽂件路径" />
2、导⼊式
<style type="text/css">
@import url("css⽂件路径");
</style>
例如：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表</title>
<!--链接式：推荐使⽤-->
<link rel="stylesheet" type="text/css" href="css/style.css" />  <!--导⼊式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
链接式和导⼊式的区别
<link>
1、属于XHTML
2、优先加载CSS⽂件到页⾯
@import
1、属于CSS2.1
2、先加载HTML结构在加载CSS⽂件。
四、CSS中的优先级
1、样式优先级
⾏内样式>内部样式>外部样式(后两者是就近原则)
例如：
⾏内样式和内部样式⽐较优先级：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>⾏内样式和内部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<!--⾏内样式-->
<p >我是p段落</p>
</html>
浏览器运⾏效果：
结论：⾏内样式优先级⾼于内部样式表。
内部样式表和外部样式表⽐较优先级：
a、内部样式表在外部样式表上⾯
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表和外部样式表的优先级</title>
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" /> </head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<li>1111</li>
<li>2222</li>
</ol>
</html>
浏览器运⾏效果：
b、外部样式表在内部样式表上⾯
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表和外部样式表的优先级</title>
<!--外部样式表-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--内部部样式表-->
<style type="text/css">
p{
color: blue;
}
</style>
</head>
<body>
<p>我是p段落</p>
<div>我是div</div>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>
浏览器运⾏效果：
结论：内部样式表和外部样式表使⽤就近原则，即谁写在下⾯以谁为准。注意：导⼊式和链接式的优先级也是使⽤就近原则。
2、选择器优先级
优先级：ID选择器>类选择器>标签选择器
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>选择器的优先级</title>
<style type="text/css">
#a{
color: green;
}
.b{
color: yellow;
}
h2{
color: red;
}
</head>
<body>
<h2>111</h2> <!--红⾊-->
<h2 id="a" class="b">222</h2> <!--绿⾊-->    <h2 class="b">333</h2><!--黄⾊-->
</html>
浏览器运⾏效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。