1.从其他样式表中导入样式,估计很多人都没用过
如下图,一看就懂:

2.声明样式表的字符编码
@charset 要写在@import上面,如果没有写则默认为HTML声明的字符编码,如果没有默认情况下为UTF-8

3.1 样式的方式
要想掌握样式表,弄清楚层叠和继承是关键。除了常见的元素内嵌、文档内嵌、外部样式表三种定义样式方式,还有另外两种方式。
3.1.1 浏览器样式
浏览器样式,也成为用户代理样式。是元素未设置样式的情况下浏览器默认的样式,因为浏览器有所差异,不过大体一致。
3.1.2 用户样式
大多数浏览器允许用户自定义样式,这类样式成为用户样式。用户可以设置自己的样式,这样在浏览器访问网页时都会应用该样式。
了解了样式五种方式后,下面了解下浏览器渲染元素时获取样式的顺序:
1.元素内嵌样式
2.文档内嵌样式
3.外部样式
4.用户样式
5.浏览器样式
3.3 调整层叠次序
通过设置重要样式标志(!important) 可以调整样式层叠次序,如下图,浏览器会优先考虑有该标志的样式。

如果浏览器在相关的样式中找不到属性的值则会借助于浏览器的继承机制,使用父元素的属性值。
4. CSS样式长度
绝对长度:
in 英尺
cm 厘米
mm 毫米
pt 磅
pc pica(1pc 等于12磅)
相对长度:
em 与元素字号挂钩
ex 与元素字体的‘X高度’挂钩
rem 与根元素字号挂钩
px css像素(假设设备分辨率为96dpi)
% 另一属性值的百分比
5. 像素单位的问题
CSS中的像素恐怕不是你想象的那样,像素一般指的是显示设备上可寻址的最小单元-图像的基本元素。但是CSS确实另辟蹊径,其定义如下:参考像素是距读者一臂之遥的像素密度为96dpi的设备上的一个像素的视角。令人头疼含糊的定义,竟然靠用户臂长来规范。好在主流浏览器都没有理会CSS的定义,他们将1像素视为一英寸的1/96(即时不同设备有所不同,浏览器也会通过转换,尽量让1像素大约登陆1英寸的1/96)。