css元素样式表的来源

简介

css层叠样式表为HTML或XML等标记语言提供了一种样式描述，定义了其中元素的显示方式。css中的“层叠”表示，css样式单中的样式形成一个层次结构，更具体的样式覆盖通用样式。样式规则的优先级由css根据这个层次结构决定，从而实现级联效果。

CSS样式表的来源

css样式表的来源主要有两大类，分别是用户自定义样式和用户代理样式。
用户自定义样式
顾名思义，就是用户自己定义的样式。在此大类中，样式表的来源又分为3个小项

style=属性，style属性作为元素的属性，直接写在元素标签内。
```
<h1 style="color: red">Hello World!</h1>
```
<style>标签，style标签作为HTML的一个元素，可用于控制其它元素的样式。但是由于，它是写在具体的HTML文档内，因此它只能控制当前文档的样式，因此也称为内部样式。<style>标签一般放在<head>标签内。
```
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
     h1 {
         color: brown;
     }
 </style>
</head>
```
引用外部样式，顾名思义，就是引用外部的样式表。何为外部样式表？就是样式作为一个单独的文件，被保存在.css文件中。保存在此文件中的样式，具有通用性比较强的特点。只要HTML文件中的元素，可以被该样式表中的选择器选中。那么该外部样式，就可以控制相应的元素的样式。引用外部样式，一般使用HTML中的<link>标签。
<link rel="stylesheet" href="style.css">
用户代理样式
还有一种样式来源，被称为用户代理样式。在使用中，用户代理其实就是浏览器。因此也可以理解为浏览器默认样式。既然被称为默认样式，就是浏览器自动添加的样式，无需用户管理。例如，HTML中的h1标签，显示在浏览器时字体自动加大并加粗，a标签默认添加下划线等
CSS优先级冲突的解决方案
css中的优先级一般为 id > class > tag。我们可以将id的权重设为100，class的权重设为10，tag的权重设为1。这样就可以通过选择器的权重，确定选择器的优先级。举例:
```
<style>
     body h1.title{
         color: red;
     }
     h1.title{
         color: yellow;
     }
     #head{
         color: blue;
     }
 </style>
<h1 class="title" id="head">Hello World!</h1>
```
h1.title的权重是 10×1+1=11
body h1.title的权重是 10×1+1×2=12
#head的权重是 100×1=100
那么在这三个选择器中，最后一个选择器的权重是最大的，那么它所设置的各种样式优先级也是最高的,标题的颜色也就被设置成了蓝色。
需要注意的几点：

不同优先级，优先级高的属性有效
同优先级，代码顺序在后面的属性有效
行内样式优先级最高，但在css样式属性后加上!important则该属性优先级最高
使用选择器时，尽量不用!important和id，这样的选择器优先级太高，会使代码失去灵活性和通用性。也要少使用tag选择器，这样的选择器则是优先级太低，让样式表失去了减少代码量，达到样式复用的作用。
最后一点是，id唯一性是靠我们自己保证的。即使有多个相同的id，浏览器也能渲染出正确的结果。但我们要把id当成元素的身份证，确保它的唯一性，减少代码出莫名其妙的错误的概率。

简介

CSS样式表的来源

CSS优先级冲突的解决方案

相关文章