CSS引入

有哪些引入方式？通过link和@import引入有什么区别？（* ）

• CSS引入方式有4种 内联、内嵌、外链、导入
• 外链 link 除了可以加载css之外,还可以定义rss、rel等属性，没有兼容性问题，支持使用javascript改变样式
• 导入@import 是css提供的，只能用于加载css，不支持通过javascript修改样式
• 页面被加载的时候，link会被同时加载，而@import则需等到页面加载完后再加载，可能出现无样式网页

Style 标签写在 body 后和 body 前有什么区别？

• 一般情况下，页面加载时自上而下的。将style标签至于body之前，为的是先加载样式。
• 若是写在body标签之后，由于浏览器以逐行方式对html文档进行解析，当解析到写在写在文档尾部的样式表时，会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后会重新渲染，在windows的IE下可能会出现FOUC现象（页面闪烁）。、

什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC

• 当使用@import导入CSS时，会导致某些页面在IE出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象被称为“文档样式暂时失效”，简称FOUC。
• 产生原因： 当样式表晚于结构性html加载时，加载到此样式表时，页面将会停止之前的渲染。等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。
• 解决办法： 只要在之间加入一个或者元素即可。

CSS选择器

CSS选择器的解析是从上到下，从右向左解析，为了避免对所有元素进行解析

• 可继承的样式：font-size, font-family, color，ul，li，dl，dt，dd；
• 不可继承的样式：border, padding, margin, width, height

CSS选择器种类

• id选择器
  • 根据提供的唯一id号快速获取标签对象
  • 用于充当label标签for属性的值：用户名：，表示单击此label标签时，id为userid的标签获得焦点
• 类选择器 (class )
• 标签选择器 (h1)
• 相邻选择器
  • 直接相邻元素选择器 (h1+p)
  • 普通相邻元素选择器 （h2 ~ h2）
• 子选择器(ul>li)
• 后代选择器(li a)
• 通配符选择器(*)
• 属性选择器（a[rel = “XXX”]）
• 伪类选择器( :hover :first-child ···)
• 伪元素选择器( :before :after ···)
• 分组选择器

CSS选择器优先级

• 优先级由高到低 !important > 内联style > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器>继承
• 优先级算法(权重)
  • 元素标签（派生选择器）：1
  • class选择符：10
  • id选择符：100
  • 内联样式最大：1000
  • 元素选择符的权值
  • 继承得到的样式的优先级最低
  • 比较多个权重相同的CSS选择器优先级，定义的位置决定一切。从位置上由高到低分为六级：

      1. 位于标签里的