CSS样式类型
CSS样式可以写在哪些地⽅呢？从CSS 样式代码插⼊的形式来看基本可以分为以下3种：内联式、嵌⼊式和外部式三种。这⼀⼩节先来讲解内联式
（⼀）内联式样式
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下⾯代码：
<p >这⾥⽂字是红⾊。</p>css样式表优先级最高
并且css样式代码要写在双引号中，如果有多条css样式代码设置可以写在⼀起，中间⽤分号隔开。如下代码：
<p >这⾥⽂字是红⾊。</p>
（⼆）嵌⼊式样式
现在有⼀任务，把⼀篇⽂章中的的“超酷的互联⽹”、“服务及时贴⼼”、“有趣易学”这三个短词⽂字字号修改为18px。如果⽤上⾯我们学习的内联式css样式的⽅法进⾏设置将是⼀件很头疼的事情（为每⼀个<span>标签加⼊sytle="font-size:18px"语句），本⼩节讲解⼀种新的⽅法嵌⼊式css样式来实现这个任务。
嵌⼊式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下⾯代码实现把三个<span>标签中的⽂字设置为红⾊：
<style type="text/css">
span{
color:red;
}
</style>
嵌⼊式css样式必须写在<style></style>之间，并且⼀般情况下嵌⼊式css样式写在<head></head>之间。
（三）外联式样式
外部式css样式(也可称为外联式)就是把css代码写⼀个单独的外部⽂件中，这个css样式⽂件以“.css”为扩展名，在<head>内（不是在
<style>标签内）使⽤<link>标签将css样式⽂件链接到HTML⽂件内，如下⾯代码：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式⽂件名称以有意义的英⽂字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置⼀般写在<head>标签之内。
三种⽅法的优先级
记住他们的优先级：内联式 > 嵌⼊式 > 外部式
就出现了这种情况
1、使⽤内联式CSS设置“超酷的互联⽹”⽂字为粉⾊。
2、然后使⽤嵌⼊式CSS来设置⽂字为红⾊。
3、最后⼜使⽤外部式设置⽂字为蓝⾊（style.css⽂件中设置）。
但最终你可以观察到“超酷的互联⽹”这个短词的⽂本被设置为了粉⾊。
但是嵌⼊式>外部式有⼀个前提：嵌⼊式css样式的位置⼀定在外部式的后⾯。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前⾯（实际开发中也是这么写的）。感兴趣的⼩伙伴可以试⼀下，把它们调换顺序，再看他们的优先级是否变化（这说明了，⽹页是从上往下加载的，下⾯样式的会覆盖掉上⾯的样式即后加载的样式会覆盖掉先加载的样式）
多重样式优先级深⼊理解
优先级⽤于浏览器是通过判断哪些属性值与元素最相关以决定并应⽤到该元素上的。
优先级仅由选择器组成的匹配规则决定的。
优先级就是分配给指定的CSS声明的⼀个权重，它由匹配的选择器中的每⼀种选择器类型的数值决定。
多重样式优先级顺序
下列是⼀份优先级逐级增加的选择器列表，其中数字 7 拥有最⾼的优先权：
1. 通⽤选择器（*）
2. 元素(类型)选择器
3. 类选择器
4. 属性选择器
5. 伪类
6. ID 选择器
7. 内联样式
8. !important 规则例外
当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪⾥。尽管如此，!important规则还是与优先级毫⽆关系。使⽤ !important 不是⼀个好习惯，因为它改变了你样式表本来的级联规则，从⽽使其难以调试。
⼀些经验法则：
Always 要优化考虑使⽤样式规则的优先级来解决问题⽽不是 !important
Only 只在需要覆盖全站或外部 css（例如引⽤的 ExtJs 或者 YUI ）的特定页⾯中使⽤ !important
Never 永远不要在全站范围的 css 上使⽤ !important
Never 永远不要在你的插件中使⽤ !important

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