CSS的特性

CSS具有两个特性：层叠性和继承性


								1.层叠性

层叠性是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS怎样处理？

CSS的处理原则是：

1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式。如：

<head>
    <title>CSS层叠性</title>
    <style type="text/css">

p{    /* 标记选择器 */

									          color:blue;

									          font-size:18px;

									       }

									       .special{    /* 类别选择器 */

									          font-weight: bold;    /* 粗体 */

									       }

									       #underline{   /* id选择器 */

									          text-decoration: underline;    /*
									有下划线 */

									       }

    </style>
</head>
<body>
    <p>标记选择器1</p>
    <p>标记选择器2</p>
    <p class="special">受到标记、类两种选择器作用</p>
    <p id="underline" class="special">受到标记、类和id三种选择器作用</p>
</body>

2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。

CSS规定选择器的优先级从高到低为：行内样式 > ID样式 > 类别样式 > 标记样式。总的原则是：越特殊的样式，优先级越高。如：

<head>
    <title>CSS层叠性</title>
    <style type="text/css">

p{    /* 标记选择器 */

									          color:blue; 

									          font-style: italic;

									        }

									       .green{     /* 类选择器 */

									          color:green; 

									       }

									       .purple{

									          color:purple; 

									       }

									       #red1,#red2{     /* ID选择器 */

									          color:red;

									       }

    </style>
</head>
<body>
    <p>这是第1行文本</p>
    <p class="green">这是第2行文本</p>
    <p class="green" id="red1">这是第3行文本</p>
    <p id="red2" style="color:orange;">这是第4行文本</p>
    <p class="purple green">这是第5行文本</p>
</body>


								2.继承性

CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。如：

<head>
    <title>CSS继承性</title>
    <style type="text/css">

body {

									          text-align: center;

									       }

									       p {

									          font-size: 24px;

									          text-decoration: underline;

									       }

									       em {

									          color: #FF0000;

									       }

									       .right{

									          text-align: right;

									       }

    </style>
</head>
<body>
    <div style="width:65%; border:1px solid blue;">
       <p><em>淮阴</em>工学院</p>
       <p class="right"><em>计算机</em>工程学院</p>
    </div>
</body>

CSS继承关系如下图：

CSS的继承贯穿整个CSS设计的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复杂的情况下。

例如，如果网页中大部分文字的字体大小都是12px，我们可以对body或td标记定义样式为12像素。这样由于其他标记都是body的子标记，会继承这一样式，就不需要对这么多子标记去定义样式了，有些特殊的地方如果字体大小要求是14px，我们可以再利用类选择器或id选择器单独定义。

需要注意的是并不是所有的CSS属性都具有继承性，一般是CSS的文本属性具有继承性，而其他属性（如背景属性、盒子属性等）则不具有继承性。

具有继承性的属性：color, font-类，text-indent, text-align, text-decoration, line-height, letter-spacing, border-collapse等

无继承性的属性：text-decoration:none, 所有背景属性，所有盒子属性,布局属性等

CSS的两个特性