CSS的三大特性

时间 2019-12-12

标签 css 三大特性栏目 CSS 繁體版

原文原文链接

继承性

<!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>

!important

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
    * {
        margin:0;
        padding:0;
        font-family: "Microsoft YaHei";
    }
    #identity {
        color:purple;
    }
    p {
        color:green !important;
    }
</style>
</head>
<body>
<!--
1：什么是important
做用：用于提高某个直接选中标签的选择器中的某个属性的优先级的，能够将被指定的属性的优先级提高为最高
注意点：
1：important只能用于直接选中，不能用于间接选中
2：通配符选择器选中的标签也是直接选中的
3：!important只能提高被指定的属性的优先级，其它的属性的优先级不会被提高 
4：!important必需要写到分号的前面且感叹号不能省略
-->
<ul>
    <li>
<p id="identity" class="para">这是段落</p>
    </li>
</ul>
</body>
</html>