CSS的3种插⼊形式及其优先级
当我们使⽤HTML制作⽹页时，是否觉得不够好看？这时，我们就需要css的帮助啦！
css--⼜称层叠样式表，简单来说，就是⽤来修饰你的html代码，给你的⽹页穿上好看的⾐服。
从CSS 样式代码插⼊的形式来看基本可以分为以下3种：内联式、嵌⼊式和外部式三种。
⾸先来看内联式：
内联式就是把css代码直接写在现有的HTML标签中，如下⾯代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内联样式</title>
</head>
<body>
<p>css分为三种样式：css简单网页代码
<span >内联式</span>、
嵌⼊式和外部式三种</p>
</body>
</html>
运⾏结果如下：
再来看嵌⼊式：
嵌⼊式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下⾯代码实现把三个<span>标签中的⽂字设置为红⾊：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>嵌⼊式css样式</title>
<style type="text/css">
span {
color:blue;
}
</style>
</head>
<body>
<p>css举例：<span>这⾥要蓝⾊，</span>这⾥不要蓝⾊，<span>这⾥要蓝⾊，</span>这⾥不要蓝⾊，<span>这⾥要蓝⾊，</span>嵌⼊式！</p>
</body>
</html>
运⾏结果如下：
（注：嵌⼊式css样式必须写在<style></style>之间，并且⼀般情况下嵌⼊式css样式写在<head></head>之间。）
最重要的--外部式！
外部式css样式(也可称为外联式)就是把css代码写⼀个单独的外部⽂件中，这个css样式⽂件以“.css”为扩展名，在<head>内（不是在<style>标签内）使⽤<link>标签将css样式⽂件链接到HTML⽂件内。
⾸先写⼀个index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>外部式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>css分为三种样式：<span>内联式，</span>嵌⼊式，<span>外部式。</span></p>
</body>
</html>
再写出它的style.css代码：
span{
color:red;
font-size:15px;
}
看⼀下运⾏结果：
这时如果我们把style.css中的“font-size：15px”改为“font-size：30px”，即：
span{
color:red;
font-size:30px;
}
再来看⼀下运⾏结果：
外部式css是最好⽤的⼀种插⼊形式，只需要改动外部链接即可完成对整篇代码的修饰。
注意：
1、css样式⽂件名称以有意义的英⽂字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置⼀般写在<head>标签之内。
看到这⾥可能我们会产⽣⼀个疑问，就是如果我同时⽤这三种形式修饰⼀个语句，那么电脑会优先采⽤哪种形式呢？
以上我们说了三种css的插⼊形式，接下来我们说⼀下这三种形式的优先级。
⾸先我们给出⼀段代码，并且在这段代码中
1、使⽤内联式CSS设置“内联式”⽂字为粉⾊。
2、然后使⽤嵌⼊式CSS来设置⽂字为红⾊。
3、最后⼜使⽤外部式设置⽂字为蓝⾊（style.css⽂件中设置）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优先级</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<p>css的三种插⼊⽅式：<span >内联式，</span>嵌⼊式，外部式。</p>
</body>
</html>
style.css:
span{
color:blue;
}
看⼀下运⾏结果：
这时我们看到，我们⽤了三种不同的⽅式修饰“内联式”这段⽂字，但最终它以粉⾊呈现。
这是因为这三种样式是有优先级的，他们的优先级是：内联式 > 嵌⼊式 > 外部式（相同权值的情况下）
但是嵌⼊式>外部式有⼀个前提：嵌⼊式css样式的位置⼀定在外部式的后⾯。
如上⾯给出的代码，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前⾯（实际开发中也是这么写的）。其实计算机就是按照就近原则，谁离被修饰⽂本近，就优先执⾏谁。

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