css的样式可分为三类 —-外部样式,嵌套样式,内联样式。
外部样式表的引用*有 @import外部引用和link引用两种*。
两者的区别,
@import出现在嵌套样式表(style标签)中,而 link是直接在其属性中引用;
@import无http请求,而link有。
@import未与文档分离,不利于维护,后者反之。
ps:link标签基本目的是允许html创作人员将包含link标签的文档与其他文档关联,一个文档中可以使用多个link,但为了区别其优先顺序,可以使用title属性,有title属性的优先于为使用的;还可以使用rel属性(有两个值 stylesheet和候选样式表alternate stylesheet,前者优于后者);type属性用来描述使用了link标记加载的数据类型,便于WEB浏览器与预其的处理;href属性的值是样式表的url,指定路径;media属性用于为不同的媒介类型规定不同的样式(all所有媒体,print打印页面,sereen计算机屏幕)。
样式重叠可分为三类
1. 样式表同时作用在一个元素上,
重叠时其优先级为 外部样式>嵌套样式>内联样式
2 外部样式重叠
@import 大于 link
3 内部样式重叠
内部样式重叠时, 声明了important标志的规则会覆盖未声明importint的规则,都没有声明important标志-----元素会根据其 选择器的特殊性 来决定哪个声明优先,如果特殊性相等则还会根据声明顺序来决定优先权,后出现的规则覆盖前出现的规则。
特殊性的确定
- 对于选择器给定的各个ID选择器的属性值, (0,1,0,0)
- 对于选择器给定的各个类属性值 ,属性选择,伪类 (0,0,1,0)
- 对于选择器给定的各个元素和伪元素,(0,0,0,1)
- 结合符和通配选择器的特殊性为(0,0,0,0)
- 继承的值 没有任何特殊性,即最后考虑。
ps 选择器的种类
- 通配选择器:*
- 元素原则器:html元素
- 类选择器:class所声明的值。例 “.xuanze {color:red;}”
- 多类选择器:class声明的值可以包含多个类选择器的值,各个值之间用空格隔开,例 “ .xuanze.q {color:red} “ 。类选择器的规则可以运用到多类当中,但多类声明的规则无法运用到单类所对应的元素当中。(ie7之前的版本不支持多类选择器)
- id选择器:id声明的值。例 id=“xuanzeqi”
- 属性选择器
简单属性选择:在body当中设置的 “属性(值不限)+元素”,例 h1[class] {color:red;}
根据具体属性值选择:元素+属性+值;例 p [class="one two"] {color:blue;}
根据部分属性选择:元素+属性+部分值 ;例 p [class~="one"] {color:blue;}
特定属性选择:元素+属性+不分值 ;例 p[class|="on"] {color:red;};所有class属性等于on 或以one 开头的p元素。
- 后代选择器:“祖宗元素 子元素”;例 body p.one {color:red;}
- 父子选择器:“父元素 > 子元素”;例 div >  p{color:red;}
- 兄弟元素选择器:“同一父元素下的元素 + 其后紧跟的元素”;例 ol +  ul {color:red;}
- 伪类选择器: "a:link;a:visited;a:hover;a:ative",顺序为lvha。
- 伪元素选择器:”:first-letter和:first-line“
-