前端——CSS的引入方式、选择器

时间：2019-12-26 21:19:47 阅读：136 评论：0 收藏：0 [点我收藏+]

前端——CSS的引入方式、选择器

什么是CSS？

层叠样式表（就是用来调节标签的样式）

CSS注释

/*单行注释*/

/*多行注释1
多行注释2
多行注释3
*/

注释的使用

css应该是一个独立的文件

/*页面通用样式*/
/*顶部导航栏样式*/
/*侧边菜单栏样式*/
……

css语法结构

选择器 {属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;……}

css三种引入方式

外部css文件（最正规的书写方式）

/*mycss*/
/*这是一个非常牛逼的页面的css样式文件*/
/*公共样式*/
p {
    color: aquamarine;
}
/*外部引用css文件*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="mycss.css">
</head>
<body>
<p>秦时明月汉时关</p>
</body>
</html>

head内style标签内部直接书写css代码

/*head内style标签内部直接书写css代码*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
<p>秦时明月汉时关</p>
</body>
</html>

标签内部通过style属性直接书写对应的样式（不推荐）

/*标签内部通过style属性直接书写对应的样式*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="color: red">秦时明月汉时关</p>
</body>
</html>

css选择器

基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {   /*将页面中所有的div标签内的文本变成红色*/
            color: red;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1       /*---> 变红色*/
    <span>我是div内部的span</span>     /*---> 变红色*/
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>
<div>我是div</div>      /*---> 变红色*/
<span class="c1">我是span我的class为c1</span>
<p>我是p</p>
<span id="d2">我是span我的id为d2</span>
</body>
</html>

类选择器：. 属性值 {css样式} 重点：一定记住是.号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*类选择器*/
        .c1 {   /*将页面中具有c1类属性值的标签内部文本全部变成蓝色*/
            color: blue;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1       /*---> 变蓝色*/
    <br>
    <span>我是div内部的span</span>     /*---> 变蓝色*/
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>        /*---> 变蓝色*/
<div>我是div</div>
<span class="c1">我是span我的class为c1</span>      /*---> 变蓝色*/
<p>我是p</p>
<span id="d2">我是span我的id为d2</span>
</body>
</html>

id选择器：#id值{css样式} 重点：一定记住是#号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {       /*将页面中id为d1的标签内所有文本变成黄色*/
            color: yellow;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1
    <br>
    <span>我是div内部的span</span>
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>        /*---> 变黄色*/
<div>我是div</div>
<span class="c1">我是span我的class为c1</span>
<p>我是p</p>
<span id="d2">我是span我的id为d2</span>
</body>
</html>

通用选择器：{css样式} 重点：**** 号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通用选择器*/
        * {     /*将当前页面内的所有标签内所有内容改为绿色*/
            color: green;
        }
    </style>
</head>
<body>
<div class="c1">我是div我的class为c1       /*---> 变绿色*/
    <br>
    <span>我是div内部的span</span>     /*---> 变绿色*/
</div>
<p id="d1" class="c1">我是p我的id为d1我的class为c1</p>    /*---> 变绿色*/
<div>我是div</div>      /*---> 变绿色*/
<span class="c1">我是span我的class为c1</span>      /*---> 变绿色*/
<p>我是p</p>        /*---> 变绿色*/
<span id="d2">我是span我的id为d2</span>        /*---> 绿色*/
</body>
</html>

组合选择器(重点记住特殊符号)

后代选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器*/
        div span {      /*空格表示div内部的  没有层级限制*/
            color: red;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>     /*---> 变红色*/
    <p>div内部的p
        <br>
        <span>div内部的p的span</span> /*---> 变红色*/
    </p>
    <span>div内部最后一个span</span>        /*---> 变红色*/
</div>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>
</body>
</html>

儿子选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*儿子选择器*/
        div > span {    /*> 表示div内部的儿子  有层级限制*/
            color: blue;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>     /*---> 变蓝色*/
    <p>div内部的p
        <br>
        <span>div内部的p的span</span>
    </p>
    <span>div内部最后一个span</span>        /*---> 变蓝色*/
</div>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>
</body>
</html>

毗邻选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*毗邻选择器*/
        div + span {
            color: green;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>
    <p>div内部的p
        <br>
        <span>div内部的p的span</span>
    </p>
    <span>div内部最后一个span</span>
</div>
<span>div下面的span</span>       /*---> 变绿色*/
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<span>div下面的span</span>
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>       /*---> 变绿色*/
</body>
</html>

弟弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*弟弟选择器*/
        div ~ span {        /*同级别下的所有标签*/
            color: yellow;
        }
    </style>
</head>
<body>
<span>div上面的span</span>
<br>
<span>div上面的span</span>
<div>
    <span>div内部第一个span</span>
    <p>div内部的p
        <br>
        <span>div内部的p的span</span>
    </p>
    <span>div内部最后一个span</span>
</div>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<span>div下面的span</span>       /*---> 变黄色*/
<br>
<div>弟弟舔她
    <p>放开那个女孩，让我来！</p>
</div>
<span>我会把你活活sao死</span>       /*---> 变黄色*/
</body>
</html>

属性选择器（根据属性或属性值来选择标签）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        /*属性选择器*/
        [username] {    /*找到页面上所有具有username属性名的标签*/
            color: green;
        }

        [username='kang'] {     /*找到页面上所有具有username属性名并且属性值为kang的标签*/
            color: red;
        }

        input[username='a'] {       /*找到页面上所有具有username属性名并且属性值为kang的input标签*/
            background-color: yellow;
        }
    </style>
</head>
<body>
<input type="text" username="a">
<input type="text" username="b">
<input type="text" username="c">
<p username="kang">秦时明月汉时关，万里长征人未还</p>
<div username="zhao">秦时明月汉时关，万里长征人未还</div>
<span username="li">秦时明月汉时关，万里长征人未还</span>
</body>
</html>

分组与嵌套

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分组与嵌套</title>
    <style>
        /*div, span, p {*/
            /*color: blue;*/
        /*}*/

        /*.c1, #d1, p {*/
            /*color: red;*/
        /*}*/

        .c1 h2 {    /*找具有c1属性值标签的后代h2*/
            color: aquamarine;
        }
    </style>
</head>
<body>
<div class="c1">找工作，拿高薪，牛皮~~
    <h2>我是h标签</h2>
</div>
<span id="d1">找工作，拿高薪，牛皮~~</span>
<p>你好骚啊~~</p>
</body>
</html>

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link {    /*未点击过为红色*/
            color: red;
        }

        a:hover {   /*鼠标悬浮在上面是绿色*/
            color: green;
        }

        a:active {  /*点击过后为黄色*/
            color: yellow;
        }

        input:focus {   /*聚焦时 背景为粉色*/
            background-color: deeppink;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">百度</a>
<a href="https://lcxy.sougou.com/">搜狗</a>
<a href="https://www.LOL.com">撸啊撸</a>

<input type="text">
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <style>
        div:before {    /*在div标签内容前添加*/
            content: '瞬间爆炸';
            color: red;
        }

        div:after {     /*在div标签内容后添加*/
            content: '啊啊啊我死了！';
            color: yellow;
        }
    </style>
</head>
<body>
<div>奥术大师大所大大所大所大所大</div>
</body>
</html>

前端——CSS的引入方式、选择器

标签：ugo pre epp 基本选择器 https -- span 重点属性

原文地址：https://www.cnblogs.com/aheng/p/12104002.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行