CSS内联、外联及内嵌
1. 内联式CSS（⾏内式），直接把CSS代码写⼊到HTML标签中。例如：
```
<p ;font-size:12px>这⾥是12px红⾊的p标签。</p>
```
优点是⼗分的便捷、⾼效；但是同时也造成了不能够重⽤样式的缺点，如果代码⾏数到达⼀定长度不建议采⽤。
2.嵌⼊式CSS样式，（内页式）就是把css样式代码写在<style type="text/css">XXX</style>标签之间。例如：
css样式表优先级最高```
<head>
<style type="text/css">
span{
color:red;
}
</style>
</head>
```
在style标签⾥边定义样式，作⽤范围和字⾯意思相同，仅限于本页⾯的元素；如果你写的代码超过了⼏百⾏，想想每次把代码页拉到最上边都很烦，所以它在可维护性⽅⾯较差。
3. 外联CSS样式。外联式css样式就是把css代码写⼀个单独的外部⽂件中，这个css样式⽂件以“.css”为扩展名，在`<head>`内（不是在`<style>`标签内）使⽤`<link>`标签将css样式⽂件链接到HTML⽂件内。例如：
```
<link href="base.css" rel="stylesheet" type="text/css" />
```
外联CSS是⼀个单独的⽂件，可以作⽤于多个页⾯，在修改的时候可以针对性地修改某⼀块区域，达到多个页⾯样式同时变更，相较于内联CSS和页级CSS，可维护性好，省去了到每个页⾯修改的步骤，提⾼了开发效率，同时⼀定程度提⾼了性能。
----------
这三种样式是有优先级的。内联式、嵌⼊式、外联式样式表中css样式是在的相同权值的情况下，优先级：内联式 > 嵌⼊式 > 外联式，但是嵌⼊式>外联式有⼀个前提：嵌⼊式css样式的位置⼀定在外联式的后⾯。总之就是--就近原则（离被设置元素越近优先级别越⾼）。

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