CSS-Cascading Style Sheet_层叠样式表_用法详解

最新推荐文章于 2022-03-24 23:11:08 发布

I believe I can fly~

最新推荐文章于 2022-03-24 23:11:08 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css html5

本文链接：https://blog.csdn.net/qq_31455841/article/details/108811894

CSS Cascading Style Sheet

1. CSS 介绍

1. CSS 概念介绍

CSS 全称 Cascading Style Sheet 层叠样式表
	
	1. 专门用来为HTML标签添加样式
	2. 样式指的是HTML标签的显示效果,比如换行、宽高、颜色等等
	3. 层叠属于CSS的三大特性之一
	4. 表指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里

2. CSS 使用目的

1. CSS 之前

在没有CSS之前,我们想要修改HTML标签的样式则需要为每个HTML标签单独定义样式属性,如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<h1 align="center">
    <font color="pink" size="5">天净沙·秋思</font>
</h1>
<p align="center">
    <font color="pink" size="5">锦瑟无端五十弦,一弦一柱思华年。</font>
</p>
<p align="center">
    <font color="pink" size="5">庄生晓梦迷蝴蝶,望帝春心托杜鹃。</font>
</p>
<p align="center">
    <font color="pink" size="5">沧海月明珠有泪,蓝田日暖玉生烟。</font>
</p>
<p align="center">
    <font color="pink" size="5">此情可待成追忆,只是当时已惘然。</font>
</p>
</body>
</html>

缺点
	1. 记忆困难：需要记忆每个标签的所有样式相关属性
	   如果标签没有某个样式相关的属性,那么设置了也没有效果
	2. 代码耦合度高：HTML语义与样式耦合到一起
	3. 扩展性差：当某一类样式需要修改时,我们需要找到所有设置了该样式标签进行修改

2. CSS 之后

CSS 应运而生 很好地解决了html添加标签样式的三个缺点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        h1,p {
    
            color: pink;
            font-size: 24px;
            text-align: center;
        }
    </style>
</head>
<body>
<h1>天净沙·秋思</h1>
<p>锦瑟无端五十弦,一弦一柱思华年。</p>
<p>庄生晓梦迷蝴蝶,望帝春心托杜鹃。</p>
<p>沧海月明珠有泪,蓝田日暖玉生烟。</p>
<p>此情可待成追忆,只是当时已惘然。</p>
</body>
</html>

3. CSS 使用方法

1. CSS 语法

CSS语法分为两部分：
    1. 选择器
    2. 声明
	声明由属性和值组成,多个声明之间用分号分隔,如下图

CSS注释
	/*这是注释*/

在这里插入图片描述

2. CSS 四种引入方式

1. 内联式
	行内式是在标签的style属性中设定CSS样式,这种方式没有体现出CSS的优势,不推荐使用
	<p style="color: red;font-size: 50px;text-align: center">我是内联式</p>

2. 嵌入式
	嵌入式是将CSS样式写在网页<head></head>标签内的<style></style>标签对中 格式如下
    <!DOCTYPE html>
    <html>    
    <head>
        <style>
            p {
    
                color: red;
                font-size: 50px;
                text-align: center
            }
        </style>
    </head>
    <body>
    <p>十年寒窗为哪般</p>
    </body>
    </html>

# 新建外部样式表,然后使用导入式和链接式引入
首先在与html文件同级目录下有一个css文件夹,该文件夹下新建一个外部样式表mystyle.css,内容为
p {
    color: red;
    font-size: 50px;
    text-align: center
}

3. 导入式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        /*形式一：*/
        @import "css/mystyle.css";
        /*形式二：*/
        @import url("css/mystyle.css");
    </style>
</head>
<body>
<p>一支穿云箭</p>
<p>千军万马来相见</p>
</body>
</html>

4. 链接式（推荐使用）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/mystyle.css">
</head>
<body>
<p>草原最美的花</p>
<p>火红的萨日朗</p>
</body>
</html>

导入式与链接式的区别
	1. <link/>标签属于XHTML,@import是属于CSS2.1特有的,对于不兼容CSS2.1的浏览器来说是无效的
	2. 导入式的缺点：
	   导入式会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题
	   如果网页比较大则会儿出现先显示无样式的页面,闪烁一下之后,再出现网页的样式
	   这是导入式固有的一个缺陷,用户体验差
	3. 链接式的优点：
	   使用链接式与导入式不同的是它会在网页文件主体装载前装载CSS文件
	   因此显示出来的网页从一开始就是带样式效果的
	   它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点

注意
	1. style标签必须放到head内,type="text/css" text指对象为网页中的文本 css是指定的文本类型
	2. type属性其实可以不用写,默认就是type="text/css"
	3. 设置样式时必须按照固定的格式来设置,key:value;

在这里插入图片描述

2. CSS 选择器

1. 基本选择器

1. id选择器

1. 作用
	根据指定的id名称,在当前界面中找到对应的唯一一个标签,设置属性

2. 格式
    #id名称 {
        属性：值;
    }

3. 注意点
    1. 在企业开发中如果仅仅只是为了设置样式,通常不会使用id,在前端开发中id通常是留给js使用的
    2. 每个标签都可以设置唯一一个id,id就相当于人/标签的身份证,因此在同一界面内id绝不能重复
    3. 引用id一定要加#
    4. id的命名只能由字符、数字、下划线组成,且不能以数字开头,更不能是html关键字如p,a,img

4. 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>id选择器</title>
    <style>
        #p1 {
    
            color: red;
        }
        #p2 {
    
            color: green;
        }
        #p3 {
    
            color: blue;
        }
    </style>
</head>
<body>
<p id="p1">山谷里的小溪</p>
<p id="p2">哗啦啦的流</p>
<p id="p3">让我轻轻的告诉你</p>
</body>
</html>

2. 类选择器

1. 作用
	根据指定的类名称,在当前界面中找到对应的标签,设置属性

2. 格式
    .类名称 {
        属性：值;
    }

3. 注意点
    1. 类名就是专门用来给某个特定的标签设置样式的
    2. 每个标签都可以设置一个或多个class
	   class就相当于人/标签的名称,因此同一界面内class可以重复
    3. 引用class一定要加点.
    4. 类名的命名规则与id的命名规则相同

4. 案例1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>class选择器</title>
    <style>
        .p1 {
    
            color: red;
        }
        .p2 {
    
            color: green;
        }
        .p3 {
    
            color: blue;
        }
    </style>
</head>
<body>
<p class="p1">My heart will go on</p>
<p class="p2">shape of you</p>
<p class="p3">Something just like this</p>
</body>
</html>

5. 案例2
    第一行与第三行的颜色都是红色
    第一行与第二行的字体大小都是50px
    第二行与第三行内容有个下划线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>class选择器</title>
    <style>
        .p1 {
    
            color: red;
        }
        .p2 {
    
            font-size: 50px;
        }
        .p3 {
    
            text-decoration: underline;
        }
    </style>
</head>
<body>
<p class="p1 p2">第一行内容</p>
<p class="p2 p3">第二行内容</p>
<p class="p1 p3">第三行内容</p>
</body>
</html>

3. 标签选择器

1. 作用
	根据指定的标签名称,在当前界面中找到所有该名称的标签,设置属性

2. 格式
    标签名称 {
        属性：值;
    }

3. 注意点：
    1. 只要是HTML的标签都能当做标签选择器
    2. 标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
    3. 标签选择器,无论嵌套多少层都能选中

4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style type="text/css">
        p {
    
            color: red;
        }
    </style>
</head>
<body>
    <p>I see your monsters</p>
    <ul>
        <li>
            <ul>
                <li>
                    <ul>
                        <li>
                            <p>I see your pain</p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

4. 通配符选择器

1. 作用
	选择所有标签

2. 格式
    * {
        属性：值；
    }

3. 注意点
	在企业开发中一般不会使用通配符选择器
    原因:
        由于通配符选择器是设置界面上所有的标签的属性
        所以在设置之前会遍历所有的标签
        如果当前界面上的标签比较多,那么性能就会比较差

4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通配符选择器</title>
    <style type="text/css">
        * {
    
            color: red;
        }
    </style>
</head>
<body>
    <h1 >我是标题</h1>
    <p >我是段落</p>
    <a href="#">我是超链接</a>
</body>
</html>

2. 组合选择器

1. 后代选择器

1. 作用
	找到指定标签的所有后代（儿子,孙子,重孙子、、、）标签,设置属性

2. 格式
    标签名1 xxx {
        属性：值;
    }

3. 注意
    1. 后代选择器必须用空格隔开
    2. 后代不仅仅是儿子,也包括孙子、重孙子
    3. 后代选择器不仅仅可以使用标签名称,还可以使用其他选择器比如id或class
    4. 后代选择器可以通过空格一直延续下去

4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        div p {
    
            color: red;
        }
        #id1 li p {
    
            font-size: 50px;
        }
        div ul li a {
    
            font-size: 100px;
            color: green;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <!--如果想为div内所有标签都设置属性,无论用id还是class都不合理,因为当div内的标签过多,我们无法加那么多id或者class-->
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

2. 子元素选择器

1. 作用
	找到制定标签的所有特定的直接子元素,设置属性

2. 格式
    标签名1>标签名2 {
        属性：值;
    }
# 先找到名称叫做"标签名1"的标签,然后在这个标签中查找所有直接子元素名称叫做"标签名2"的元素

3. 注意
    1. 子元素选择器之间需要用>符号链接,并且不能有空格
          比如div >p会找div标签的所有后代标签,标签名为">p"
    2. 子元素选择器只会查找儿子,不会查找其他嵌套的标签
    3. 子元素选择器不仅可以用标签名称,还可以使用其他选择器,比如id或class
    4. 子元素选择器可以通过>符号一直延续下去

4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素选择器</title>
    <style type="text/css">
        body>p {
    
            color: green;
        }
        div>p {
    
            color: red;
        }
        .aaa>a {
    
            font-size: 100px;
        }
        div>ul>li>.ddd {
    
            color: blue;
        }
    </style>
</head>
<body>
    <p>我是body下的段落1</p>
    <div id="id1" class="part1">
        <p>我是div下的段落1</p>
        <p>我是div下的段落2</p>
        <ul>
            <li class="aaa">
                <p class="ccc">我是ul>li下的段落1</p>
                <p class="ddd">我是ul>li下的段落2</p>
                <a href="">点我啊1</a>
            </li>
            <li>
                <a href="#">点我啊2</a>
            </li>
        </ul>
    </div>
    <p>我是body下的段落2</p>
</body>
</html>

3. 毗邻选择器

CSS2 推出又称相邻兄弟选择器

1. 作用
	选定紧跟其后的那个标签

2. 格式
    选择器1+选择器2 {
        属性：值;
    }

3. 注意点：
    1. 毗邻选择器必须通过+号链接
    2. 毗邻选择器只能选中紧跟其后的那个标签,不能选中被隔开的标签

4. 弟弟选择器

CSS3 推出又称通用兄弟选择器

1. 作用
	给指定选择器后面的所有选择器中的所有标签设置属性

2. 格式	
    选择器1~选择器2 {
        属性：值;
    }

3. 注意点
    1. 通用兄弟选择器必须用~来链接
    2. 通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签
       无论有没有被隔开,都可以被选中

4. 案例 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟选择器</title>

    <style type="text/css">
        h1+p {
    
            font-size: 50px;
        }
        h1~p {
    
            color: red;
        }
    </style>
</head>
<body>
    <h1>我是标题1</h1>
    <a href="">有了这个标签,p就不再是紧跟h1标签了,但通用兄弟选择器仍然能选中</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <h1>我是标题2</h1>
    <p>我是段落</p>
</body>
</html>

3. 交集/并集选择器

1. 交集选择器

1. 作用
	给所有选择器选中的标签中,相交的那部分标签设置属性

2. 格式
    选择器1选择器2 {
        属性：值;
    }

3. 注意
    1. 选择器与选择器之间没有任何链接符号
    2. 选择器可以使用标签名称、id、class
    3. 交集选择器在企业开发中并不多见,了解即可
       原因: p.part1 完全可以用.part1取代

4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交集选择器</title>
    <style type="text/css">
        p.part1 {
    
            color: red;
        }
        p#p1{
    
            font-size: 100px;
        }
    </style>
</head>
<body>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

2. 并集选择器

1. 作用
	给所有满足条件的标签设置属性

2. 格式
    选择器1,选择器2 {
        属性：值;
    }

3. 注意
    1. 选择器与选择器之间必须用逗号来链接
    2. 选择器可以使用标签名称、id、class

4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style type="text/css">
        .part1,h1,a {
    
            color: red;
        }
    </style>
</head>
<body>
    <h1>哈哈啊</h1>
    <p class="part1">我是段落</p>
    <p id="p1">我是段落</p>
    <p class="part1">我是段落</p>
    <a href="#">我是我</a>
    <p>我是段落</p>
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

4. 序列选择器

1. 作用
    css3中新推出的选择器中,最具代表性的的9个,又称为序列选择器
	过去的选择器中要选中某个必须加id或class,学习了这9个后
	不用加id或class,想选中同级别的第几个就选第几个

2. 格式
    1. 同级别
        :first-child         同级别的第一个
        :last-child    	     同级别的最后一个
        :nth-child(n)        同级别的第n个
        :nth-last-child(n)   同级别的倒数第n个

    2. 同级别同类型
        :first-of-type       同级别同类型的第一个
        :last-of-type        同级别同类型的最后一个
        :nth-of-type(n)      同级别同类型的第n个
        :nth-last-of-type(n) 同级别同类型的倒数第n个

    3. 唯一
        :only-of-type        同类型的唯一一个
        :only-child          同级别的唯一一个

3. 同级别
    1. 同级别的第一个
    示范一
        p:first-child { 
            color: red;
        }
        代表：同级别的第一个,并且第一个要求是一个p标签
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>我是段落4</p>
        <p>我是段落5</p>
        <div>
            <p>我是段落6</p>
        </div>
        这样的话第一个p和div中的第一个p都变成红色

	示范二
        p:first-child {
            color: red;
        }
        代表：同级别的第一个,并且第一个要求是一个p标签
        <h1>w我是标题</h1>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>我是段落4</p>
        <p>我是段落5</p>
        <div>
            <p>我是段落6</p>
        </div>
        这样的话只有div中的第一个p变红,因为在有在div内同一级别的第一个才是p

    注意点
        :first-child就是第一个孩子,不区分类型

    2. 同级别的最后一个
	示例一
        p:last-child {
            color: red;
        }
        代表：同级别的最后一个,并且最后一个要求是一个p标签
        <h1>我是标题</h1>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>我是段落4</p>
        <p>我是段落5</p>
        <div>
            <p>我是段落6</p>
        </div>
        <p>我是段落7</p>
        这样的话只有6跟7都变红

    3. 同级别的第n个
	示例一
        p:nth-child(3) {
            color: red;
        }
        代表：同级别的第3个,并且第3个要求是一个p标签
        <h1>我是标题</h1>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>我是段落4</p>
        <p>我是段落5</p>
        <div>
            <p>我是段落6.1</p>
            <p>我是段落6.2</p>
            <h1>我是标题</h1>
        </div>
        <p>我是段落7</p>
        这样的话只有“我是段落2”变红

    4. 同级别的倒数第n个
	示例一
        p:nth-last-child(3) {
            color: red;
        }
        代表：同级别的倒数第3个,并且第3个要求是一个p标签
        <h1>我是标题</h1>
        <p>我是段落1</p>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <p>我是段落4</p>
        <p>我是段落5</p>
        <div>
            <p>我是段落6.1</p>
            <p>我是段落6.2</p>
            <h1>我是标题</h1>
        </div>
        <p>我是段落7</p>
        这样的话只有“我是段落6.1”和“我是段落5”被选中

4. 同级别同类型
示例
    <h1>我是标题</h1>
    <p>我是段落1</p>
    <p>我是段落2</p>
    <p>我是段落3</p>
    <p>我是段落4</p>
    <p>我是段落5</p>
    <div>
        <p>我是段落6.1</p>
        <p>我是段落6.2</p>
        <h1>我是标题</h1>
    </div>
    <p>我是段落7</p>

    1. 同级别同类型的第一个
        p:first-of-type {
            color: red;
        }
        “我是段落1”和“我是段落6.1”被选中

    2. 同级别同类型的最后一个
        p:last-of-type {
            color: red;
        }
        “我是段落7”和“我是段落6.2”被选中

    3. 同级别同类型的第n个
        p:nth-of-type(2) {
            color: red;
        }
        “我是段落2”和“我是段落6.2”被选中

    4. 同级别同类型的倒数第n个
        p:nth-last-of-type(2) {
            color: red;
        }
        “我是段落5”和“我是段落6.1”被选中

5. 唯一
    1. 同类型的唯一一个
        p:only-of-type {
            color: red;
        }
        <h1>我是标题</h1>
        <div>
            <p>我是段落6.1</p>
            <p>我是段落6.2</p>
            <h1>我是标题</h1>
        </div>
        <p>我是段落7</p>
        “我是段落7“被选中

    2. 同级别的唯一一个
        p:only-child {
            color: red;
        }
        <h1>我是标题</h1>
        <div>
            <p>我是段落6.1</p>
        </div>
        <p>我是段落7</p>
        “我是段落6.1”被选中

5. 属性选择器

1. 作用
	根据指定的属性名称找到对应的标签,然后设置属性
    该选择器,最常用于input标签
 
2. 格式与具体用法
    1. [属性名]
   	例1：找到所有包含id属性的标签  => [id]

	2. 其他选择器[属性名]
    例2：找到所有包含id属性的p标签 => p[id]

	3. [属性名=值]
    例3：找到所有class属性值为part1的p标签   => p[class="part1"]

	4. [属性名^=值]
    例4：找到所有href属性值以https开头的a标签 => a[href^="https"]
	
	5. [属性名$=值]
    例5：找到所有src属性值以png结果的img标签  => img[src$="png"]
	
	6. [属性名*=值]
    例6：找到所有class属性值中包含part的标签 => [class*="part"] 

3. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        [id] {
    
            color: red;
        }
        p[id] {
    
            font-size: 30px;
        }
        p[class="part1"] {
    
            color: green;
        }
        a[href^="https"] {
    
            font-size: 50px;
        }
        img[src$="png"] {
    
            width: 100px;
        }
        [class*="part"] {
    
            text-decoration: line-through;
        }
    </style>
</head>
<body>
    <h1 id="id1">哈哈啊</h1>
    <p id="id2">我是段落</p>
    <p class="part1">我是段落</p>
    <p class="xxx part2 yyy">我是段落</p>
    <a href="#">我是我</a>
    <a href="http://www.baidu.com">http://www.baidu.com</a>
    <a href="https://www.baidu.com">https://www.baidu.com</a>
    <img src="1.png" alt="">
    <img src="2.jpg" alt="">
    <p>我是段落</p>
    <p>我是段落</p>
</body>
</html>

6. 伪类选择器

1. 常用伪类选择器

    1. 没有访问的超链接a标签样式：
    a:link {
      color: blue;
    }

    2. 访问过的超链接a标签样式：
    a:visited {
      color: gray;
    }

    3. 鼠标悬浮在元素上应用样式：
    a:hover {
      background-color: #eee; 
	  font-size: 50px;
    }

    4. 鼠标点击瞬间的样式：
    a:active {
      color: green;
    }

    5. input输入框获取焦点时样式：
    input:focus {
      outline: none;
      background-color: #eee;
    }

2. 注意
    1. a标签的伪类选择器可以单独出现,也可以一起出现
    2. a标签的伪类选择器如果一起出现,有严格的顺序要求,否则失效
       link,visited,hover,active
    3. hover是所有其他标签都可以使用的
    4. focus只给input标签使用

3. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style type="text/css">
        a:link {
    
            color: #cccccc;
        }
        a:visited {
    
            color: #55BBBB;
        }
        a:hover {
    
            color: green;
        }
        a:active {
    
            color: red;
        }
        input:hover {
    
            outline: none;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">点击我</a>
<input type="text">
</body>
</html>

7. 伪元素选择器

1. 常用伪元素选择器
    1. first-letter: 杂志类文章首字母样式调整
    例如：
        p:first-letter {
          font-size: 48px;
        }

    2. before: 用于在元素的内容前面插入新内容
    例如：
        p:before {
          content: "*";
          color: red;
        }
        在所有p标签的内容前面加上一个红色的*

    3. after: 用于在元素的内容后面插入新内容
    例如：
        p:after {
          content: "?";
          color: blue;
        }
        在所有p标签的内容后面加上一个蓝色的?

2. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style type="text/css">
        p:first-letter {
    
            font-size: 50px;
        }
        /*两个冒号与一个是一样的,老版本用的是一个冒号,考虑到兼容性推荐使用一个冒号*/
        a::after {
    
            content: "?";
            color: red;
        }
        a:before {
    
            content: "-";
            color: green;
        }
        .help {
    
            color: gold;
        }
    </style>
</head>
<body>
<p>英雄不问出处,流氓不论岁数</p>
<a href="#" class="help">板砖破武术</a>
<a href="#" class="help">铁道压过腿</a>
<a href="#" class="help">黄河喝过水</a>
</body>
</html>

8. CSS三大特性

1. 继承性

1. 定义
	给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性

2. 注意
    1. 只有以color、font-、text-、line-开头的属性才可以继承
    2. a标签的文字颜色和下划线是不能继承别人的
    3. h标签的文字大小是不能继承别人的,会变大,但是会在原来字体大小的基础上变大
    ps: 打开浏览器审查元素可以看到一些inherited from ... 的属性

3. 应用场景
    通常基于继承性统一设置网页的文字颜色,字体,文字大小等样式

4. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>继承性</title>
    <style type="text/css">
        div {
    
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
<div>
    <h1>我是标题</h1>
    <p><a href="#">Oh my god!</a></p>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航2</li>
    </ul>
</div>
<div>
    <div>
        <p>aaaa</p>
    </div>
    <div>
        <p>bbbb</p>
    </div>
</div>
</body>
</html>

2. 层叠性

1. 定义
	CSS 全称：Cascading Style Sheet 层叠样式表
	层叠性指的就是CSS处理冲突的一种能力,即如果有多个选择器选中了同一个标签那么会有覆盖效果

2. 注意
	层叠性只有在多个选择器选中了同一个标签,然后设置了相同的属性,才会发生层叠性
	ps：通过谷歌浏览器可以查看到,一些属性被划掉了

3. 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性</title>
    <style type="text/css">
        p1 {
    
            color: red;
        }
        .p2 {
    
            color: green;
        }
    </style>
</head>
<body>
<p class="p2">我是段落</p>
</body>
</html>

3. 优先级

1. 定义
	当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定

2. 优先级
    整体优先级从高到底：行内样式>嵌入样式>外部样式
    行内样式并不推荐使用,所以我们以嵌入为例来介绍优先级

1. 直接选中 >

最低0.47元/天解锁文章