CSS03——样式继承与层叠

CSS03样式继承与层叠

原创作品,允许转载,转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。http://blog.csdn.net/taotaoyouarebaby/article/details/8764521

继承:

指应用在一个标签上的CSS属性被传到嵌套标签上的过程。

body{

  font-family: Arial, Serif;

}

body的子标签就能够继承body的字体属性。

继承的优先级:

最近的祖先样式胜出。

直接应用的样式胜出。

//html结构

<body>

  <p>

    <strong></strong>  

  </p>

</body>

//css内容

body{font-family: Arial; color:#FF99BA;}

p{color: #616161; font-size:18px;}

strong{font-size: 24px; font-family:Times;}

p将只会继承bodyfont-family属性;strong只会继承pcolor属性。

层叠:

样式的属性就用规则。指定浏览器如何处理同一标签中应用的多个样式(样式冲突)。

属性冲突规则(同一标签的多个样式):优先级

1. 权重大的胜出。

2. 相同权重:后导入的样式>先导入的样式。

权重:www.w3.org/TR/CSS21/cascade.html#specificity

样式类别

权重

标签样式、伪元素(eg:first-line)

1

类样式、伪类(eg:link)

10

ID样式

100

派生样式

所涉及样式的权重总和。

内联样式(行内样式)

1000

属性后加!importantIE6不支持。

在该属性上忽略权重值。利用此处的属性值。

内联样式:

A<span id="demo" style="color:red "></span>
BJS控制的内联样式style对象,

document.getElementById("demo").style.color="red";这两者属于同一级别,不过一般情况是JS控制的内联样式优先级高,这与先后顺序申明有关系与本质无关,因为往往DOM操作是在DOM树加载完毕之后。

important

#nav a{color:red;}       /*权重本大于下面的标签选择器*/

a{color:blue !important;} /*则所有a元素都为blue.*/

示例:

selector

id

class

tag

total权重

p

0

0

1

1

.byline

0

1

0

10

p.byline

0

1

1

11

#banner

1

0

0

100

#banner p

1

0

1

101

#banner .byline

1

1

0

110

a:link

0

1

1

11

p:first-line

0

0

2

2

h2 strong

0

0

2

2

#wrapper #content .byline a:hover

2

2

1

221

工具:Firefox扩展:View Formatted Source(https://addons.mozilla.org/zh-cn/firefox/

addon/view-formatted-source-format-s/).

,继承来的属性没有权重,或者说是权重为0

选择性覆盖

网站全局样式(global.css)设置了h1,但在主页想修改h1(home.css)

<link rel=”stylesheet” type=”text/css” href=”global.css” />

<link rel=”stylesheet” type=”text/css” href=”home.css” />

原理:规则2.

CSS reset(浏览器内建样式重置)

//reset.css

/* reset browser styles */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {

 padding: 0;

 margin: 0;

 font-size: 100%;

 font-weight: normal;

}

ol { 

  margin-left: 1.4em; 

  list-style: decimal; 

}

ul { 

  margin-left: 1.4em; 

  list-style:square; 

}

img {

  border: 0;

}

/* end reset browser styles */

你可能感兴趣的:(继承,css,层叠)