css复习 | 青训营笔记

知识就是力量812
127 阅读6分钟

这是我参与「第四届青训营 」笔记创作活动的的第二天

一.理解css

什么是css？

css也叫层叠式样式表，主要负责样式的书写样式，比如元素的color，width等，使用html+css可以完成页面的静态布局，当然使用css也可以用来书写一些交互的操作(比如使用伪类，为按钮添加鼠标的样式)，不过交互还是交给js吧

css书写的位置

  • 外部样式表
  • 内联样式
  • 内部样式表
 <!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="style.css">

    <!-- 内联样式 -->
    <style>
        p{
            color: antiquewhite;
        }
    </style>
</head>

<body>
    <!-- 内部样式 -->
    <p style="color: red;"></p>
</body>

</html>

css的大致工作原理

image.png 可以看出，css是在加载完html元素后才加载的。

注意：浏览器渲染网页的过程是很复杂的，并不像图中那么简单，此图主要关注css，后面我会把完整的浏览器渲染原理总结一下。

css选择器(重要)

本人认为，css选择器是非常之重要的，选择器用来选择具体的元素的，如果对选择器不熟悉，是无法书写特定元素的样式的(内部样式除外)。 常用的选择器：

常用的选择器

  • id选择器: #id
  • 类选择器: .类名
  • 通配选择器: *
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 
            将所有的段落设置为红色（字体）

            元素选择器
                作用：根据标签名来选中指定的元素
                语法：标签名{}
                例子：p{}  h1{}  div{}
        */
        /* p{
            color: red;
        }

        h1{
            color: green;
        } */

        /* 
            id选择器
                作用：根据元素的id属性值选中一个元素
                语法：#id属性值{}
                例子：#box{} #red{}  
        */
        /* #red{
            color: red;
        } */

        /*
            类选择器
                作用：根据元素的class属性值选中一组元素
                语法：.class属性值
        */
        /* .blue{
            color: blue;
        }

        .abc{
            font-size: 20px;
        }
        */

        /* 
            通配选择器
                作用：选中页面中的所有元素
                语法: *
        */
        *{
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="blue abc">我是标题</h1>
    <p>锄禾日当午</p>
    <p>汗滴禾下土</p>
    <p id="red">谁之盘中餐</p>
    <p>粒粒皆辛苦</p>
    <!-- 
        class 是一个标签的属性，它和id类似，不同的是class可以重复使用
            可以通过class属性来为元素分组
            可以同时为一个元素指定多个class属性
    -->
    <p class="blue">秋水共长天一色</p>
    <p class="blue">落霞与孤鹜齐飞</p>
</body>
</html>

复合选择器

  • 交集选择器

作用:选中同时复合多个条件的元素

语法: 选择器1 选择器2 选择器n {}

  • 并集选择器

作用:同时选择多个选择器对应的元素

语法: 选择器1,选择器2,选择器3,选择器n{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 将class为red的div字体大小设置为30px */
        /* 
            交集选择器
                作用：选中同时复合多个条件的元素
                语法：选择器1选择器2选择器3选择器n{}
                注意点：
                    交集选择器中如果有元素选择器，必须使用元素选择器开头
        */
        div.red{
            font-size: 30px;
        }

        .a.b.c{
            color: blue
        }

        /* div#box1{} */

        /*
            选择器分组（并集选择器）
                作用：同时选择多个选择器对应的元素
                语法：选择器1,选择器2,选择器3,选择器n{}

                #b1,.p1,h1,span,div.red{}
         */
        h1, .red{
            color: green
        }
    </style>
</head>
<body>
    <div class="red">我是div</div>
    <p class="red">我是p元素</p>
    <div class="red2 a b c">我是div2</div>
    <h1>标题</h1>
    <span>哈哈</span>
</body>
</html>

关系选择器

  • 子类选择器

作用:选中指定父元素的指定子元素

语法: 父元素 > 子元素

div > span{
​
}
​
div > span > h1{
​
}
  • 后代选择器

作用:选中指定元素内的后代元素

语法: 祖先 后代

div span{
​
}

  • 兄弟选择器

    • 选择下一个兄弟

      语法: 前一个兄弟元素+下一个兄弟元素

      p+span{
​
}

    • 选择下边所有兄弟元素

      语法: 兄元素~弟元素

      p~span{
​
}

属性选择器

  • 选择元素[属性名]：选择含有指定属性的元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        /* 
            [属性名] 选择含有指定属性的元素
            [属性名=属性值] 选择含有指定属性和属性值的元素
            [属性名^=属性值] 选择属性值以指定值开头的元素
            [属性名$=属性值] 选择属性值以指定值结尾的元素
            [属性名*=属性值] 选择属性值中含有某值的元素的元素
         */
        /* p[title]{ */
        /* p[title=abc]{ */
        /* p[title^=abc]{ */
        /* p[title$=abc]{ */
        p[title*=e]{
            color: orange;
        }
    </style>
    </head>
    <body>
            <p title="abc">少小离家老大回</p>
            <p title="abcdef">乡音无改鬓毛衰</p>
            <p title="helloabc">儿童相见不相识</p>
            <p>笑问客从何处来</p>
            <p>秋水共长天一色</p>
            <p>落霞与孤鹜齐飞</p>
    </body>
    </html>

伪类选择器

  • 伪类（不存在的类，特殊的类）

  • 伪类用来描述一个元素的特殊状态

    比如：第一个子元素、被点击的元素、鼠标移入的元素...

  • 伪类一般情况下都是使用:开头

    :first-child 第一个子元素

    :last-child 最后一个子元素

    :nth-child() 选中第n个子元素

    :only-child

  • :not() 否定伪类

    • 将符合条件的元素从选择器中去除
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* ul > li:first-child{
            color: red;
        } */
    
        /* ul > li:last-child{
            color: red;
        } */

        /* ul > li:nth-child(2n+1){
            color: red;
        } */

        /* ul > li:nth-child(even){
            color: red;
        } */

        /* ul > li:first-of-type{
            color: red;
        } */

        ul > li:not(:nth-of-type(3)){
            color: yellowgreen;
        }
    </style>
</head>
<body>
    
    <ul>
        <span>我是一个span</span>
        <li>第〇个</li>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>

a标签的伪类

  • :link 用来表示没访问过的链接（正常的链接）
  • :visited 用来表示访问过的链接
  • :hover 用来表示鼠标移入的状态
  • :active 用来表示鼠标点击
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        a:link{
            color: red;
            
        }
        a:visited{
            color: orange; 
            /* font-size: 50px;   */
        }
         a:hover{
             color: aqua;
             font-size: 50px;
         }
         a:active{
             color: yellowgreen;
             
         }
        p:first-child{
            color: red;
        }
    
    </style>
</head>
<body>
    <p>123</p>
    <a href="https://www.baidu.com">访问过的链接</a>
    <br><br>
    <a href="https://www.baidu123.com">没访问过的链接</a>
</body>
</html>

伪元素选择器

伪元素:表示页面中一些特殊的并不真实存在的元素(特殊的位置) 语法: 伪元素使用 :: 开头

  • ::first-letter 表示第一个字母
  • ::fitst-line 表示第一行
  • ::selection 表示选中的元素
  • ::before 表示元素开始的位置
  • ::after 表示元素的最后

注意: 使用::before和::after必须结合content使用，content的内容无法选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        p{
            font-size: 20px;
        }

        p::first-letter{
            font-size: 50px;
        }

        p::first-line{
            background-color: yellow; 
        }

        p::selection{
            background-color: greenyellow;
        }

        div::before{
            content: '『';
         }

        div::after{
            content: '』';
        }

    </style>
</head>
<body>
    <div>Hello Hello How are you</div>
    <p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>

选择器可以组合

image.png

二.深入css

选择器的权重(特异度)

CSS中会默认使用权重较大的样式

权重的计算：

不同的选择器有不同的权重值：

  • 内联样式：权重是 1000

  • id选器：权重是 100

  • 类、属性、伪类选择器：权重是 10

  • 元素选择器：权重是 1

  • 通配符：权重是 0

计算权重需要将一个样式的全部选择器相加，优先级越高越优先显示，样式后加上!important表示最高优先级。

样式的继承

样式的继承：我们为一个元素设置的样式同时也会应用到它的后代元素上。 继承是发生在祖先后代之间的，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上。

注意：并不是所有的样式都会被继承：比如 背景相关的，布局相关等的这些样式都不会被继承。一般css中和文字相关的样式都是可以继承的，和布局相关的都是无法继承的

显示继承： 可以让不可继承的元素可以从父级继承，使用inherit关键字

image.png

初始值：

CSS中，每个属性都有一个初始值

  • background-color的初始值为transparent
  • margin-left的初始值为О

可以使用initial关键字显式重置为初始值

  • background-color: initial

布局

网页是一个多层的结构，通过css可以分别为每一层来设置样式，作为用户来讲只能看到最顶上的一层，这些层中，最底下的一层成为文档流。文档流是网页的基础，我们所创建的元素默认都是在文档流中进行排列。 对于我们来说元素主要有两个状态：

  • 在文档里中
  • 脱离文档流

元素在文档流中的特点：

块元素：

  • 在页面中独占一行
  • 默认宽度是父元素的全部(会把父元素撑满)
  • 默认高度是被内容撑开（子元素的内容）

行内元素：

  • 行内元素不会独占页面的一行，只占自身的大小
  • 行内元素在页面中从左向右排列，如果一行中不能容纳所有的行内元素，则元素会换到第二行继续自左向右排列
  • 行内元素的默认宽度和高度都是被内容撑开

image.png

三.总结

css的内容很多，不可一蹴而就，学习的时候要多动手，在实践中才能加深印象。flex布局，grid布局要掌握。可以多模仿各大官网进行html和css的学习，仿几个之后会逐渐找到布局的感觉。

avatar
文章
阅读
粉丝