CSS学习笔记之知识要点

紫玫瑰ABU

已于 2023-10-20 21:11:53 修改

阅读量36

点赞数

文章标签： css 学习笔记

于 2023-10-20 20:02:53 首次发布

本文链接：https://blog.csdn.net/weixin_52540797/article/details/133947279

版权

1、CSS概述

1.1 CSS是什么

CSS(Cascading Style Sheets)也叫做层叠样式表，用来修饰html文档，在外观上改变html页面的背景、颜色、边框等。

css语法

声明：一个属性就是一个声明

1.声明块多个属性使用{}包裹就构成声明块{color:red}

2.规则集选择器+声明块

属性：属性名和属性值之间使用:隔开

多个属性之间使用;隔开

最后一对属性可以不加;建议添加

1.2 CSS的三种引入方式

1.2.1 内联样式（行内样式）

直接给标签设置style属性，如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 内联样式 行内样式 style属性 -->
    <div style="background-color: pink; color: red;">我是一个div</div>
    <div>我是一个div</div>
</body>
</html>

1.2.2 内部样式

将css属性写在style标签中，如下：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            font-size: 28px;
            color: pink;
            background-color: rgb(95, 73, 172);
        }
    </style>
</head>
<body>
    <div>我是一个div</div>
</body>
</html>

1.2.3外部样式

① 使用link标签引入外部css文件（建议）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./out.css">
</head>
<body>
    <div>使用link标签引入外部css文件</div>
</body>
</html>

②使用@import引入外部css文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('./out.css');
    </style>
</head>
<body>
    <div>使用@import引入外部css文件</div>
</body>
</html>

link标签和@import区别?
所属范围：link标签属于html标签 @import属于css语法
加载顺序：link同时加载html和css @import优先加载css
兼容性：@import只支持ie5+版本 link标签无兼容性差异

注意：CSS引入方式优先级

内联样式>内部样式/外部样式 (就近原则)

2、CSS选择器

2.1 标签、类以及id选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 标签选择器 选取标签名为xx一类元素 标签名 */
        div{
            color: blue;
            background-color: skyblue;
        }
        /* ID选择器 通过id唯一选中一个标签  #id*/
        #one{
            background-color: red;
            color: white;
        }
        /* 类选择器 .类名 选中一类标签 */
        .two{
            background-color: blue;
            color: white;
        }
    </style>
</head>
<body>
    <div>我是父元素
        <div>我是子元素</div>
    </div>
    <p id="one">段落标签</p>
    <p class="two">段落标签</p>
</body>
</html>

2.2 子代和后代选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器 使用空格隔开 表示选中所有一个后代标签 */
        div p{
            color: blue;

        }
        /* 子代选择器 使用>隔开 表示选中直接子代 */
        .one>p{
            color: red;
        }
    </style>
</head>
<body>
    <div class="one">
        <p>段落标签</p>
        <p>段落标签</p>
        <div>
            <p>段落标签</p>
            <p>段落标签</p>
        </div>
    </div>
</body>
</html>

2.3 交集和并集选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 交集选择器 选择一类标签中相交的部分 */
        p.p2{
            background-color: red;
        }
        /* 并集选择器 组合选择器 使用,隔开 多个选择器同时使用 */
        div,.p2,#last{
            font-size: 28px;
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div>我是块级元素</div>
    <p>段落标签</p>
    <p class="p2">段落标签</p>
    <section id="last">我是最后一个元素</section>
</body>
</html>

2.4 兄弟选择器

相邻兄弟选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS2 相邻兄弟选择器 只选择相邻的兄弟标签 使用+连接 */
        .one+div{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="one">我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
</body>
</html>

通用兄弟选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* CSS3 通用兄弟选择器 选取所有兄弟标签 使用~连接 */
        .one~div{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="one">我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
    <div>我是一个div</div>
</body>
</html>

2.5 序选择器或伪类选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 序选择器  以:开头 跟在选择器后面 */
        p:first-child{
            color: white;
        }
        p:last-child{
            color: yellow;
        }
        p:nth-child(5){
            color: aqua;
        }
        /* 选取奇数个p标签 */
        p:nth-child(odd){
            background-color: skyblue;
        }
        /* 选取偶数个p标签 */
        p:nth-child(even){
            background-color: pink;
        }
        /* 1 4 7  3n+1 n从0开始 */
        p:nth-child(3n+1){
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
</body>
</html>

2.6 动态伪类选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 动态伪类 link(未访问过) visited(访问过) hover(鼠标悬停到标签) active(按下/激活标签) */
        /* love hate */
        a:link{
            color: red;
        }
        a:visited{
            color: blue;
        }
        a:hover{
            color: pink;
        }
        a:active{
            color: brown;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度一下</a>
</body>
</html>

未访问过

鼠标悬停到标签

鼠标点击

访问过

2.7 否定伪类选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 否定伪类选择器 剔除一类标签中的一些元素 */
        p:not(.two){
            background-color: pink;
        }
    </style>
</head>
<body>
    <p>段落标签</p>
    <p id="two" class="two">段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
</body>
</html>

2.8 伪元素选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 伪元素选择器 
        ::after 选中元素的末尾
        ::before 选中元素的开头
        ::first-line选中元素的第一行
        ::first-letter选中元素的第一个字符
        ::after ::before ::first-line */
        p::before{
            content: "开头";
            color: skyblue;
        }
        p::after{
            content: "末尾";
        }
        p::first-letter{
            font-size: 28px;
        }
        p::first-line{
            color: purple;
        }
    </style>
</head>
<body>
    <p>
        段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签<br>
        段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签<br>
    </p>
</body>
</html>

2.9 通配符选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器 普遍选择器 表示选中所有的元素 
        去除标签一些默认样式
        */
        *{
            margin: 0;
            padding: 0;
            /* 去除a标签下划线 */
            text-decoration: none;
            /* 去除列表标签的列表标志项 */
            list-style: none;
        }
    </style>
</head>
<body>
    <ul>
        <li>列表标签</li>
    </ul>
    <a href="">百度一下</a>
</body>
</html>