码迷,mamicode.com
首页 > Web开发 > 详细

CSS的三大特性

时间:2017-11-26 12:43:04      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:标签设置   oct   add   back   cad   one   文字   多个   body   

继承性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    * {
        margin:0;
        padding:0;
        font-family: "Microsoft YaHei";
    }
    div {
        color:red;
        font-size:30px;
        background:skyblue;
        text-decoration: none;
    }
</style>
</head>
<body>
<!--
1:什么是继承性?给父元素设置一些属性,子元素也可以使用
注意点:
1:并不是所有的属性都可以继承,只有以color/font-/text-/line开头的才可以继承
2:在CSS的继承中不仅仅是儿子可以继承,只要是后代都可以继承
3:CSS继承性中的特殊性:
    a标签的文字颜色和下划线是不能继承的
    h标签的文字大小是不能继承的
-->

<div>
    <p>CSS的继承性(继承DIV属性,但不继承background属性)</p>
</div>
<div>
    <ul>
        <li>
            <p>这是一个段落(继承DIV属性,但不继承background属性)</p>
        </li>
    </ul>
</div>
<div>
    <a href="#">这是一个超链接(不继承DIV属性)</a>
</div>
<div>
    <h1>这是一个标题(不继承DIV文字大小的属性)</h1>
</div>
</body>
</html>

层叠性

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    * {
        margin:0;
        padding:0;
        font-family: "Microsoft YaHei";
    }
    p {
        color:red;
    }
    .para {
        color:blue;
    }
</style>
</head>
<body>
<!--
1:什么是层叠性?层叠性就是CSS处理冲突的一种能力
注意点:
层叠性只有在多个选择器选中“同一标签”,然后又设置了“相同的属性”,才会发生层叠性
CSS全称:Cascading StyleSheet
-->

<p id="identity" class="para">这是段落</p>

</body>
</html>

优先级

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    * {
        margin:0;
        padding:0;
        font-family: "Microsoft YaHei";
    }
    /*
    ul {
        color:red;
    }
    li {
        color:blue;
    }*/

</style>
</head>
<body>
<!--
1:什么是优先级?当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定
2:优先级判断的三种方式
    2.1 是否是直接选中(间接选中就是指继承);如果是间接选中,那么就是谁离目标近就继承谁
    2.2 是否是相同的选择器,如果都是直接选中并且都是同类型的选择器,那么就是谁写在后面就听谁的
    2.3 不同选择器:如果都是直接选中,并且不是相同类型的选择器,那么就会按照选择器的优先级来层叠
    id > 类 > 标签  > 通配符 > 继承 > 浏览器默认
-->
<ul>
    <li>
<p id="identity" class="para">这是段落</p>
    </li>
</ul>
</body>
</html>

  

CSS的三大特性

标签:标签设置   oct   add   back   cad   one   文字   多个   body   

原文地址:http://www.cnblogs.com/ginvip/p/7898547.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!