css部分内容(选择器)

叁叶

已于 2023-03-29 16:49:09 修改

阅读量143

点赞数

文章标签： css html 前端

于 2023-03-29 16:48:27 首次发布

本文链接：https://blog.csdn.net/2302_76637343/article/details/129836639

版权

1、css:又叫做层叠样式表

2、css的引入方式

行内样式：通过style属性

内嵌样式：style标签

外链样式：link标签进行导入

导入样式：@import url（""）放在style标签内

四种方式的优先级：就近原则，离修饰的标签越近优先级越高

1.行类样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="color: red; font-size: 18px;">这是我的第一个css文件</h1>
</body>
</html>

2.内嵌样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
       h1 {
            color:blue;
            font-size: 18px;
        }

    </style>
</head>
<body>
    <h1>这是我的第一个css文件</h1>
</body>
</html>

3.外链样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./1.css">
</head>
<body>
    <h1>这是我的第一个css文件</h1>
</body>
</html>

4.导入样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        @import url(./1.css);
    </style>
</head>
<body>
    <h1>这是我的第一个css文件</h1>
</body>
</html>

2、选择器

1.基本选择器：包括标签选择器（根据标签的名称获取）、类选择器（获取处理class属性）、id选择器（获取id属性）、通用选择器（通配符）

优先级:id>class>标签>通配符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /*标签选择器*/
        /*div{
            color: pink;
            font-size: 10px;
        }*/
        /*类选择器*/
        .one{
            color: red;
            font-size: 12px;
        }
        /*id选择器*/
        #first{
            color: yellow;
            font-size: 14px;
        }
        /*通用选择器*/
        /**{
            color:blue;
            font-size: 16px;
        }*/

    </style>
</head>
<body>
    <div class="one">这是第一个div</div>
    <div id="first">这是第二个div</div>
</body>
</html>

3.包含选择器

子代选择器：获取的是某个标签的第一级子标签

后代选择器：获取的是某个标签里面所以的子标签

分组选择：逗号选择器，可以同时设置多个标签，使用逗号进行分割

属性：

border：表示边框 solid：表示实线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /*子代选择器*/
        div.list>ul{
            border:1px solid rgb(21, 209, 49);
        }
        /*后代选择器*/
        .list li{
            border:1px solid blue;
        }
        /*逗号选择器*/
        .one,.two,#first{
            color:aqua;
            width:200px;
            height:200px;
            background-color: beige;
            border:1px solid pink;
        }
        
    </style>
</head>
<body>
    <div class="one">这是第一个div</div>
    <div class="two">这是第二个div</div>
    <p id="first">这是一个段落标签</p>
    <div class="list">
    <ul >
        <li>列表1</li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul>
</div>
</body>
</html>

4.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style  type="text/css">
        /*选择选中的额标签中存在的某个属性*/
    div[title]{
        border: 1px solid blue;
    }
    /*确切的等于某个值*/
    input[type="text"]{
        background: red;
    }
    /*属性值包含某个值*/
    input[type*="e"]{
        background: blue;
    }
    /*属性值以某个值开头*/
    input[type^="e"]{
        background-color: purple;
    }
    /*属性值以某个值结尾*/
    input[type$="rl"]{
        background-color: yellow;
    }
    .game{
        color: pink;
        font-size: 12px;
    }
    /*+表示下一个标签*/
    .game +p{
        border:3px solid green ;
    }
    /*属性等于某个属性值*/
    [title="这是一个标题"]{
        color: gray;
    }
</style>
</head>
<body>
    <div class="container">这是一个div容器</div>
    <div title="这是一个标题" >这是第一个div</div>
    <input type="text" name="" value="张三"><br>
    <input type="email" name="" value="李四"><br>
    <input type="url" name="" value="王五"><br>
    <hr>
    <div class="game">玩游戏</div>
    <p id="music">听音乐</p>

</body>
</html>

5.伪类选择器：同一个标签，根据不同的状态，有不同的样式，叫做伪类，通过：进行设置不同的样式（实现伪类选择器）

：link----链接点击之前

：visited----链接点击之后

：hover----悬停

：active----“激活” 鼠标点击的时候但不松手

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        a:link{
            color: red;
        }
        a:visited{
            color: pink;
        }
        a:hover{
            color: purple;
        }
        a:active{
            color: blue;
        }

    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点击</a>
</body>
</html>

6.伪元素选择器

：before----css2
：after----css2
：：before
：：after

注：使用伪元素选择器一定要加上content属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before{
            content: "江苏";
            color:blue;
        }
        div::after{
            content:"江南";
            color: red;
        }
        </style>
</head>
<body>
    <div>城市</div>
</body>
</html>

叁叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css部分内容(选择器)

分组选择：逗号选择器，可以同时设置多个标签，使用逗号进行分割。四种方式的优先级：就近原则，离修饰的标签越近优先级越高。：active----“激活” 鼠标点击的时候但不松手。border：表示边框 solid：表示实线。后代选择器：获取的是某个标签里面所以的子标签。子代选择器：获取的是某个标签的第一级子标签。：visited----链接点击之后。外链样式：link标签进行导入。：link----链接点击之前。行内样式：通过style属性。内嵌样式：style标签。：hover----悬停。
复制链接

扫一扫