层叠样式管理

最新推荐文章于 2024-07-09 22:33:51 发布

weixin_30852451

最新推荐文章于 2024-07-09 22:33:51 发布

阅读量70

点赞数

原文链接：http://www.cnblogs.com/molingfeng/archive/2013/03/02/2941111.html

版权

层叠管理

　　因为CSS的继承特性，标签的派生标签会受到css的继承产生冲突，例如：body应用的样式，与下面的p标签样式有相同属性但值有区别，导致冲突。

最近的祖先样式优先

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <style type="text/css">
 5 body {
 6     font-family:Verdana, Geneva, sans-serif;
 7     color:red;
 8 }
 9 p {
10     color:black;
11 }
12 </style>
13 </head>
14 
15 <body>
16 <h1>层叠管理</h1>
17 <p>因为CSS的继承特性，标签的派生标签会受到css的继承<strong>产生冲突</strong>，例如：body应用的样式，与下面的p标签样式有相同属性但值有区别，导致冲突。</p>
18 </body>
19 </html>

　　<body>标签的字体样式是红色；<p>标签的字体样式是黑色。
　　<strong>继承的是<p>标签的字体样式而不是<body>的，是黑色。最近的祖先更明确，更优先。

直接应用的样式优先

　　任何直接应用与指定标签的样式，优先于任何继承来的属性
　　当然一个标签应用了多个样式，只要它们的属性不冲突，浏览器会合并所有的样式。

一个标签，多个样式

　　当一标签，有多个样式，但属性产生冲突时，浏览器就必须决定哪一个样式的属性会优先。

　　利用权重值：
　　　　一个标签样式：1分
　　　　一个类选择器值：10分
　　　　一个ID选择器值：100分
　　　　一个内建样式值：1000分
　　　　派生选择器则是总和计算

　　权重值相同的，最后一个样式优先

重新创建样式

　　浏览器有自己的样式，各个浏览器均有差异，例如：常见问题是，浏览器中均是margin和pading属性混用，导致布局各有不同，为了避免这种情况，需要删除浏览器样式，新建样式CSS reset。

　　最简单的CSS reset：

 1 html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote { /* 一条非常长的群选择器，挑选了最常见的标签，并将原来的属性剔除出去 */
 2  padding: 0;
 3  margin: 0;
 4  font-size: 100%;
 5  font-weight: normal;
 6 }
 7 ol {   /* 统一了的左边距和样式 */
 8     margin-left:1.4em;
 9     list-style:decimal
10 }
11 ul {  /* 统一了的左边距和样式 */
12     margin-left:1.4em;
13     list-style:decimal;
14 }
15 img{    /* 删除了有些浏览器添加到链接图片上的边框线 */
16     border:0;
17 }