css（层叠样式表）笔记

无聊的烤苕皮

已于 2024-07-13 19:16:39 修改

阅读量72

点赞数 2

分类专栏： CSS 文章标签： css 前端 html

于 2023-03-31 16:48:58 首次发布

本文链接：https://blog.csdn.net/tt19123657188/article/details/129882547

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、css的引入方式

1、行内样式

是通过style属性现实的

<!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: 12px">这是我的第一个css文件</h1>
</body>
</html>

2、内嵌样式

是通过style标签实现的
style标签严格来说要写在head里面

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <!-- 内嵌样式 -->
    <!-- 严格来说要放在head里面 -->
    <style type="text/css">
        h1{
            color: blue;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <h1>这是我的第一个css文件</h1>
</body>
</html>

3、外链样式

通过link标签实现
link标签要写在head里面
href要引入地址

<!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>外链样式</title>
    <!-- stylesheet该单词意思是样式表 -->
    <link rel="stylesheet" type="text/css" href="D:\qianduan.css\1.css\层叠外链.css">
</head>
<body>
    <!-- 外链样式 -->
    <h1 >这是我的第一个css文件</h1>
</body>
</html>

4、导入样式

通过@import url（“此处填写地址”）实现
@import url（“此处填写地址”）要写在style标签中

<!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\层叠外链.css")
    </style>
</head>
<body>
    <!-- 导入样式 -->
    <h1 >这是我的第一个css文件</h1>
</body>
</html>

5、样式优先级

就近原则，距离修饰的标签越近优先级越高

二、选择器

1、基本选择器

- a、标签选择器（根据标签的名称获取）

<!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> 选择器</title>
    <style type="text/css">
       div{
            color: aqua;
        }
        </style>
</head>
<body>
     <div id="one" class="two">这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
</body>
</html>

- b、ID选择器（获取的是ID属性）
注：one前面要加#号

<!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> 选择器</title>
    <style type="text/css">
    #one{
            color: beige;
        }
        </style>
</head>
<body>
     <div id="one" class="two">这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
</body>
</html>

- c、类选择器（class属性）
two前面要加小数点

<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> 选择器</title>
    <style type="text/css">
.two{
            color: #0a0ae2;
        }
 </style>
</head>
<body>
     <div id="one" class="two">这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
</body>
</html>

d、通用选择器（通配符）
不要忘了这个符号：*

<!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> 选择器</title>
    <style type="text/css">
    *{
            color: darkmagenta;
        }
    </style>
</head>
<body>
     <div id="one" class="two">这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
     <div>这是第一个div</div>
</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>选择器</title>
    <style type="text/css">
    /*子代选择器*/
        div.list>ul{
            border:1px solid red;
        }
       </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>
            <li>这是列表6</li>
            <li>这是列表7</li>
        </ul>
     </div>
</body>
</html>

后代选择器（获取的某个标签里面所有的子标签）

<!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>选择器</title>
    <style type="text/css">
    /*后代选择器*/
        div.list li{
            border: 1px solid green;
        }
        </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>
            <li>这是列表6</li>
            <li>这是列表7</li>
        </ul>
     </div>
</body>
</html>

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

<!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>选择器</title>
    <style type="text/css">
    /*逗号选择器*/   
    .one,.two,#first{
        color: darkorange;
        width: 100px;
        height:200px ;
        background: dimgray;
        border: 1px solid black;
    } 
        </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>
            <li>这是列表6</li>
            <li>这是列表7</li>
        </ul>
     </div>
</body>
</html>

3、属性选择器

<!DOCTYPE html>
<html>
<head>
<title>选择器</title>
<style type="text/css">
/*选择选中的额标签中存在的某个属性*/
div[title]{
border: 1px solid black;
}
/*确切的等于某个值*/
input[type="text"]{
background: red;
}
/*属性值包含某个值*/
input[type *="e"]{
background: blue;
}
/*属性值以某个值开头*/
input[type ^="e"]{
background: green;
}
/*属性值以某个值结尾*/
input[type $="rl"]{
background: red;
}
/*+表示下一个标签*/
.msg +p{
border: 1px solid green;
}
/*属性等于某个属性值*/
[title="这是一个标题"]{
color: red;
}
</style>
</head>
<body>
<div class="container">
这是一个div容器
</div>
<div title="这是一个标题">这是第二个div</div>
<input type="text" name="" id="" value="张三">
<input type="email" name="" id="" value="李四">
<input type="url" name="" id="" value="王五">
<hr>
<div class="msg">我喜欢打游戏</div>
<p id="msg1" ">这是一个段落</p>
</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>伪类选择器</title>
    <style type="text/css">
        /*点击 之前 的颜色 */
        a:link{
            color: aqua;
        }
        /*点击 之后 的颜色*/
        a:visited{
            color: pink;
        }
        /* 悬停 时的颜色*/
        a:hover{
            color: darkorchid;
        }
        /* 长按 时的颜色*/
        a:active{
            color: mediumseagreen;
        }
    </style>
</head>
<body>
     <a href="https://www.baidu.com/">点我</a>
</body>
</html>

5、伪元素选择器

对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 type="text/css">
        p::before{
            content: "zhangsan";
            color: aquamarine;
        }
        p::after{
            content: "lisi";
            color: blueviolet;
        }
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>
</html>