HTML5 CSS选择器与基础

行内样式表：

缺点：代码不整洁，不利于维护 html文件体积大

优点：css样式优先级高，开发具有一定便利性

内部样式表

优点：速度快 直接在html文档中读取样式

适合项目页面不多，css代码也不多的情况

缺点：css代码在多个html文件中无法复用，不适合大型项目，

外部样式表

优点：实现了结构层和表现层的分离 提高了代码可维护性。

import

1 语法

@import url

@import url list-of-media-queries

优缺点：

1.可以在html中定义，定义在style标签中或者在CSS中定义

使用@import引入CSS样式表，跟链接样式相似，但是在老版本的浏览器中（低于ie5）是不支持@import的，也就是说兼容性不好

2.会导致会导致样式表文件逐个下载，导致页面加载时间更久，比如link混合@import。

3.在IE中，如果使用@import和JS混合，还会导致执行顺序混乱，阻碍页面渲染，让人感觉页面比较慢。

4.有模块化思想，与编译配合

尺寸单位：px 百分比（50% 100%） em rem

em对应当前元素的font-size

rem对应根元素的font-size

CSS规定基本选择器的优先级从低到高排序为：

元素（标记）样式 < 类别（class）样式 < ID样式 < 行内样式 < !important。

标签选择器：优先级加权值为 1。

伪元素或伪对象选择器：优先级加权值为 1。

类选择器：优先级加权值为 10。

属性选择器：优先级加权值为 10。

ID选择器：优先级加权值为 100。

其他选择器：优先级加权值为 0，如通配选择器等。

然后，以上面加权值数为起点来计算每个样式中选择器的总加权值数。计算的规则如下：统计选择器中 ID 选择器的个数，然后乘以100。

统计选择器中类选择器的个数，然后乘以 10。

统计选择器中的标签选择器的个数，然后乘以 1。

依此方法类推，最后把所有加权值数相加，即可得到当前选择器的总加权值，最后根据加权值来决定哪个样式的优先级大。

对于由多个选择器组合而成的复合型选择器，首先分别计算每个组成选择器的加权值，

接着相加得出当前选择器的总分，最后根据选择器的分值大小，分值越高则优先级越高，那么就将应用它所设置的样式。