1.继承性:
CSS样式表继承指的是,特定的CSS属性向下传递到子孙元素 ,是可以被子孙元素所继承的。
<p>
p的内容
<span>span的内容</span>
</p>
当设置p{ color: red; }时,发现span的内容也变红了.
但是也有不一样的例外:如设置p { border: 1px solod red: } 发现span的内容并没有边框样式出现
那么css中那些属性是可以继承的呢?
azimuth, border-collapse, border-spacing,
caption-side, color, cursor, direction, elevation,
empty-cells, font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height, list-style-image, list-style-position,
list-style-type, list-style, orphans, pitch-range,
pitch, quotes, richness, speak-header, speaknumeral,
speak-punctuation, speak, speechrate,
stress, text-align, text-indent, texttransform,
visibility, voice-family, volume, whitespace,
widows, word-spacing
2.层叠性
为同一个元素定义多个样式规则,多个样式规则同时存在时不冲突,多个样式规则会合并成一个,属性重复时以最后一个出现为准
如body中有一个p元素: <p> p的内容 </p>
html引入了1.css和2.css
1.css中设置p{ color:red ;font-size:14px; }
2.css中设置p{ border:1px;margin-top:;20px }
此时就相当于层叠为p{ color:red ;font-size:14px;border:1px;margin-top:;20px }
如果1.css和2.css都设置了padding时,以哪个css文件引入顺序在下面的为准,即假设先引入的1.css,后引入的2.css,那么同时出现设置p的padding属性时,以2.css中设置的为准。
3.优先级
各级样式表冲突时(行内、内部、外部),会按照不同的优先级来应用样式
0 :浏览器缺省设置
1 : 内部样式表 或 外部样式表
冲突时 :就近原则,谁在下,以谁为主
2 :行内样式(内联样式)
优先级可以以样式表权重来实现,
1:内联样式,如: style=””,权值为1000。
2:ID选择器,如:#content,权值为100。
3:类,伪类和属性选择器,如.content,权值为10。
4:类型选择器和伪元素选择器,如div p,权值为1。
例如#slh p.logo{ ... } --权重值为:100+1+10=111;当出现样式冲突时,以权重值高的为准。
4.!important 规则
通过!important 显示调整样式规则的优先级
放在属性值之后, 用 空格 来区分
由!important标识的属性值,优先级最高
注意点:ie6不完全支持!important
IE支持重定义中的!important,例如:
.yuanxin {color:#e00!important;}
.yuanxin {color:#000;}
你将会发现定义了样式class="yuanxin"时,在IE下,字体显示为红色(#e00)。
但不支持同一定义中的!important。例如:
.yuanxin {color:#e00!important;color:#000;}
此时在IE6下不支持,你将会发现定义了样式class="yuanxin"时,字体显示为黑色(#000)。