Web前端 CSS3 01

生产队的驴儿

已于 2022-12-26 12:37:03 修改

阅读量144

点赞数

文章标签：前端 css3 css

于 2022-12-14 06:42:50 首次发布

本文链接：https://blog.csdn.net/weixin_46969441/article/details/128300420

版权

CSS 介绍

    网页 分为 三个部分
    结构 HTML
    表现 CSS
    行为 JavaScript


    CSS 层叠样式表
    网页实际上是一个 多层结构
    通过CSS 为网页每一层 设计样式
    
    我们最终 只能看到 网页 最上层

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>
</head>
<body>
    <!-- 
        网页 分为 三个部分
        结构 HTML
        表现 CSS
        行为 JavaScript


        CSS 层叠样式表
        网页实际上是一个 多层结构
        通过CSS 为网页每一层 设计样式
        
        我们最终 只能看到 网页 最上层
     -->

     <p style="color: red;font-size: 60px;" >少小离家老大回，乡音无改鬓毛衰</p>
</body>
</html>

在这里插入图片描述
使用同一网页所有 p标签

<!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>
        /* 将 所有p 标签设为 绿色 60pixel */
        p{color: green;font-size: 60px;}
    </style>
</head>
<body>
     <p style="color: red;font-size: 60px;" >少小离家老大回，乡音无改鬓毛衰</p>
     <!-- 但是这个标签 只能 用p里面的
    每次新建 都需要自定义 -->


    <!-- 升级方式
    将样式编写到 head中的 style去 -->
     <p> Today is a good weather!</p>
    </body>
</html>

在这里插入图片描述

可以将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件

这样做也会加快网页加载速度，提高用户体验。

CSS 基本语法

分为选择器和声明块

选择器：选中页面中指定元素
p 选中页面中所有p元素

声明块：通过声明块

<!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里面是css区域
        遵守css语法规则
        不是html了

     -->
    <style>
/* 
        CSS基本语法：
        选择器 selection
        声明块 

        选择器： 选中页面中指定元素
            p 选中页面中所有p元素

        
        声明块： 通过声明块     
*/
    p{
        color: rebeccapurple;
        font-size: 40px;
    }

    h1{
        color: #000;
    }
    </style>
    <link rel="stylesheet" href=".style.css">
</head>
<body>
    <h1>I am H1</h1>
    <p> Today is a good weather!</p>
    <p> Today is a good weather!</p>
    <p> Today is a good weather!</p>
    <p> Today is a good weather!</p>
    <p> Today is a good weather!</p>
    <p> Today is a good weather!</p>

</body>
</html>

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>
    <style>
        /* 
        将 所有段落设置为红色

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

        title{
            color: blue;
        } */

        /* 如果只是 将其中某一句 变成红色 */
        /* id选择器
                作用：根据元素id属性值选中其中一个元素
                语法：id属性值
                例子：#box{}
                    #red{}
        */

        #red{
            color: red;
        }
        
        .blue{
            color: blue;
        }

        .abc{
            font-size: 20px;
        }

        /* 同配选择器
                作用： 选中页面中所有元素
                语法： *
                
        */

    </style>
</head>
<body>
    <h1>i am title</h1>
    <p>少小高家老大回</p> 
    <p>乡音无改美毛豪</p> 
    <p id="red">儿童相见不相识</p>
    <!-- 
        id 不可以重复使用
        class 可以重复使用
        可以为一个元素 指定多个class属性
     -->
    <p>笑问客从何处来</p> 
    <p class="blue abc">秋水共长天一色</p> 
    <p class="blue">蒂霞与孤繁齐飞</p>
</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>Document</title>
    <style>
        /* 
        将class为red元素设置为红色
        */
        .red{
            color: red;
        }
        /* 
        交集选择器
        作用：同时符合多个条件的元素语法，
        语法：选择器1 选择器2 选择器3 选择器n()
        
        注意点：
            交集选择器中 如果有元素选择器，必须使用元素选择器起开头
        */
        div.red{
            font-size: 30px;
        }

        .a.b.c{
            color: blue;
        }

        /* 
        并集选择器分组：
            同时选择多个选择器对应的元素
        */
       h1,span{
        color: green;
       }

</style>
</head>
<body>
    <div class"red">我是div</div>
    <p class="red">我是p元素</p>
    <div class="a b c">我是div2</div>

    <h1>title</h1>
    <span>graph</span>
</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>Document</title>

    <style>
        /* 
        为div的子元素span1 设置红色
        */
        /* 子元素选择器 */
        div > span{
            color: red;
        }

        /* 后代元素选择器 */
        div span{
            color: wheat;
        }

        div > span > div{
            color: red;
        }

        /* 兄弟元素选择器
            选择下一个兄弟
        */

        p + span{
            color: blue;
        }

    </style>
</head>
<body>
    <!-- 
        父元素 
            div 是p的 父元素
        子元素
            p 和 span2 是div的子元素 
        祖先元素
            父元素也是 祖先元素
            div是span1 
        后代元素
            子元素也是后代元素
        兄弟元素
            p和span2是兄弟元素
    -->

    <div>
        i am a div
        <p>
        <span>我是p中的 span1</span>
        </p>

        <span>我是div中的 span2</span>
    </div>
    <div>
    <span> 我是span3</span>
    </div>
    <span> 我是span4</span>
</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>Document</title>

    <style>
        /* 
            [属性名] 选择含有属性的元素
            [属性名=属性值] 选择还有指定属性值的 元素
            [属性名^=a] 选择以a开头的
            [属性名*=h] 选择只要包含h的就行
        */
        p[title]{
            color: orange;
        }

        p[title=abc]{
            color: blue;
        }

        p[title^=a]{
            color: red;
        }
        
        p[title*=h]{
            color: green;
        }

    </style>
</head>
<body>
    <h1>i am title</h1>
    <p title="abc">少小高家老大回</p> 
    <p title="abcdefg">乡音无改美毛豪</p> 
    <p title="hello">儿童相见不相识</p>
    <p title="he">笑问客从何处来</p> 
    <p title="dfgdvb">秋水共长天一色</p> 
    <p title="dfgdfg">蒂霞与孤繁齐飞</p>
</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>Document</title>

    <style>
        /* 
        将ul第一个li设置为红色
        
        使用伪类：
            描述一个元素的特殊状态
                第一个子元素
                被点击的元素
                鼠标移入的元素

        伪类一般情况下，都是使用:开头
            :first-type

            eg: first-child 第一个子元素
                last-child 最后一个子元素
                nth-child(n) 第n个子元素

                2表示第2个
                n表示所有
                2n表示选择偶数为的元素
                2n+1表示奇数位置元素

        以上这些伪类 都是根据所有的 子元素进行排序的

        不区分类型
        frist-of-type{
        }

        not() 否定伪类
        选择所有，除了第三个，全变为黄色
        ul > li:not(:nth-child(3)){
            color: yellow;
        }
        */
        ul > li:first-child{
            color: red;
        }

        ul >li:nth-child(2){
            color: blue;
        }

        ul > li:first-of-type{
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>first</li>
        <li>second</li>
        <li>third</li>
        <li>forth</li>
        <li>fifth</li>
    </ul>    
</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>Document</title>

    <style>
        /* 
        :link 表示没访问过的链接
        */
        a:link{
            color: red;
            font-size: 50px;
        }
        /* 
        :visited 表示访问过的链接
        */
        a:visited{
            color: orange;
        }
        /* 
        ：hover 表示鼠标移入状态
        Indicates that the mouse moves in
        */
        a:hover{
            color: aqua;
            font-size: 50px;
        }

        /* 
        鼠标点击链接
        */
        a:active{
            color: yellowgreen;
        }

    </style>
</head>
<body>
    <!-- 访问过的链接
    和 没访问过链接 -->
    <a href="https://www.baidu.com">hypterlink</a>
    <br>
    <a href="https://www.google.com">unvisited hypterlink</a>
    <br>
    <a href="https://www.youdao.com">hypterlink</a>
</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>Document</title>

    <style>
        /* 
        :link 表示没访问过的链接
        */
        a:link{
            color: red;
            font-size: 50px;
        }
        /* 
        :visited 表示访问过的链接
        */
        a:visited{
            color: orange;
        }
        /* 
        ：hover 表示鼠标移入状态
        Indicates that the mouse moves in
        */
        a:hover{
            color: aqua;
            font-size: 50px;
        }

        /* 
        鼠标点击链接
        */
        a:active{
            color: yellowgreen;
        }


        /* 
        伪元素
        表示 页面中一些特殊并不存在的元素（特殊位置）
    
        ::first-letter 表示第一个字母
        */
        
        /* 
        首字母下沉
        */
        p::first-letter{
            font-size: 50px;
        }

        /* 
        第一行元素
        */
        p::first-line{
            /* font-size: 50px; */
            background-color: yellow;
        }

        /* 选中内容变色
         */
        p::selection{
            background-color: greenyellow;
        }

        /* 
        ::before 元素开始
        ::after 元素最后
        必须结合 content属性使用
        */

        div::before{
            content: 'AAAAAAA ';
            color: red;
        }

        div::after{
            content:" BBBB";
            color: green;
        }
    </style>
</head>
<body>
    <!-- 访问过的链接
    和 没访问过链接 -->
    <a href="https://www.baidu.com">hypterlink</a>
    <br>
    <a href="https://www.google.com">unvisited hypterlink</a>
    <br>
    <a href="https://www.youdao.com">hypterlink</a>



<!-- 伪元素
        表示 页面中一些特殊并不存在的元素（特殊位置）
    
    ::first-letter 表示第一个字母
    -->
    <p>
        <span>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            <br>Atque velit modi veniam nisi veritatis
            tempore laborum nemo ipsa itaque optio. 
            <br>Id odit consequatur molitia excepturi, minus saepe nostrum vel porro.
        </span>
    </p>


    <div>Hello Hello How are you</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>Document</title>

    <!-- 
        样式继承
        我们为一个元素设置的样式
                同时也会应用到它的后代元素上

        集成是 发生在 祖先 和 后代 之间的

        集成的设计 是为了方便 我们的开发

        背景相关的 布局相关的不会集成
        backgroud-color:

     -->
    <style>
        p{
            color: red;
            background-color: orange;
        }

        div{
            color: blue;
        }

        body{
            font-size: 12px;
        }
    </style>
</head>
<body>
    <p>
        我是一个p元素
        <span>我是p元素中的span</span>
    </p>

    <div>
        我是div
        <span>我是div中span 
            <em>我是span中的em</em>
        </span>
    </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>Document</title>
    <style>

        #box1{
            color: blue;
        }

        div{
            color: yellow !important;
        }

        .red{
            color: red;
        }

        div#box1{
            color: aquamarine;
        }



        /* 
        
        样式冲突

        当我们通过不同的选择器，
        选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式冲突

        冲突时，由 选择器权重 决定
        
        选择器的权重
            内联样式        1000
            id选择器        100
            类选择器         10
            类 和 伪类选择器   1
            元素选择器          1
            通配选择器         0
            继承的样式      没有优先级

        比较优先级时，
                需要将所有选择器的优先级 进行相加计算
                    最后优先级越高 则越优先显示

                    如果优先级相同
                    优先使用靠下面的
        
        在样式后面增加 !important 则该样式获得最高优先级
            */
    </style>
</head>
<body>
    <div id="box1" class="red";>我是一个div</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>Document</title>

    <style>

        html{
            font-size: 30px;
        }
        /* 
            长度单位
                像素 屏幕显示器的单位 实际上是由一个一个小点点构成的
                不同屏幕的像素大小是不同的，像素越小屏幕 显示的越清晰
                同样200px在不同设备下，显示效果不一样

                百分比
                百分比可以设置属性相对于 父元素属性的百分比
                设置百分比 可以 让 子元素 跟随 父元素改变而改变
        */

        /* 
        
            em 参照自身 字体大小 = 20 * 字体（自身）大小
            rem 参照根元素的字体大小
        */
        .box1{
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .box2{
            width: 50%;
            height: 50%;
            background-color: aqua;
        }

        .box3{
            font-size: 10px;
            width: 20em;
            height: 10em;
            background-color: greenyellow;
        }

        .box4{
            font-size: 10px;
            width: 20 rem;
            height: 20 rem;
            background-color: blueviolet;
        }

    </style>
</head>
<body>
    <div class="box1">

        <div class="box2"></div>

    </div>

    <div class="box3"></div>

    <div class="box4"></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>Document</title>
    <style>
        .box1{
        width: 100px;
        height: 100px;
        /* 
            颜色单位：
            在CSS中可以直接使用 颜色名来设置各种颜色
            eg: red, orange, yellow, blue, green .......

            但是在css中直接使用颜色名 不是很方便

            RGB值： 
                通过三种不同的颜色不同浓度，调配颜色
                R red G green B blue
                每一种 浓度在 0 -255之间
        */
        background-color: red;
        background-color: rgb(255, 0, 0);
        background-color: rgb(0, 255, 0);
        background-color: rgb(0, 0, 255);
        background-color: rgb(255,255,255);
        /* 
            RGBA值：
                多一个参数，用来设置透明度  （0-1）  
                1 不透明 
                0 全透明
                0.5 半透明
            */

        background-color: rgba(255,0,0,1);

        /* 
            十六进制RGB值：
            语法： 红绿蓝
            通过 00-ff
            00 最小
            ff 最大（相当于上面255）
        */
        background-color: #ff0000;
        /* 如果是两位两位重复可以简写
        #ff0000
        #f00
        */
        background-color: #f00;

        /* 豆沙绿 */
        background-color: #bfa;
    }   

    </style>
</head>
<body>
    <div class="box1"></div>
</body>
</html>

在这里插入图片描述

/* HSL值
    常用语工业设计
    H 色相 0 - 360(环)
    S 饱和度 颜色浓度 0 - 100%
    L 亮度 颜色亮度 0 - 100%
*/  

background-color: hsl(1, 100%, 50%);

layout

东西摆放的位置

文档流

<!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>
        .box1{
            width: 100px;
            background-color: yellow;
        }

        .box2{
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- 
        文档流：normal flow
            网页是一多层的结构，一层摞一层
            通过css可以分别为每一个层来设置样式
            作为用户来说，只能看到最上层
             
            最下面一层 文档流，也是网页的基础

            我们所创建的元素，都在文档流中 排列

            我们的元素状态只有两个：
                在文档流
                不在文档流
            
        元素在文档流
            块元素 Block element
                页面中独占一行 Exclusive line on the page
                默认宽度 父元素的全部
                默认高度 内容撑开
            行内元素
                不会独占一行，只占自身大小
                如果一行不能容纳下之后，就自动换到第二行
                默认长宽度都是被内容撑开
        
     -->
     <div class="box1">我是div1</div>
     <div class="box2">我是div2</div>
     <span>我是span1</span>
     <span>我是span2</span>
     <span>我是span3</span>
     <span>我是span4</span>
     <span>我是span5</span>
     <span>我是span6</span>
     <span>我是span7</span>
     <span>我是span8</span>
     <span>我是span9</span>
     <span>我是span10</span>
     <span>我是span11</span>
     <span>我是span7</span>
     <span>我是span7</span>
     <span>我是span7</span>
     <span>我是span7</span>
     <span>我是span7</span>
     <span>我是span7</span>
</body>
</html>

在这里插入图片描述

盒子模型 box model

<!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>
        .box1{
            /* 
            内容区 content：
                所有子元素都在内容区
                width 和 height设置内容区大小
            */
            width: 200px;
            height: 200px;
            background-color: #bfa;
            /* 
                边框border
                盒子边缘
                三个样式：
                    border-width
                    border-color
                    border-style
                边框大小 会 影响 盒子大小
            */

            border-width: 10px;
            border-color: red;
            border-style: solid;

        }
    </style>
</head>
<body>
    <!-- 
        盒模型 box model
        CSS将页面中 所有元素 都设置为一个矩形的盒子
        将元素设置为 盒子后，对页面的布局 就是摆放盒子
        
        盒子组成：
            内容区content
            内边距 padding
            边框border
            外边距 margin

    -->

     <div class="box1">div1</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>Document</title>
    <style>
        .box1{
            /* 
            内容区 content：
                所有子元素都在内容区
                width 和 height设置内容区大小
            */
            width: 200px;
            height: 200px;
            background-color: #bfa;

            
            /* border-width: 10px; */
            /* 
            border-width
            制动四个方向 边框粗细
            默认 3px
            不写就是默认值
            */
            border-width: 10px 20px 30px 40px;
            /* 上 右 下 左 */
            /* 
            还有一组 单独指定某一边
            border-top-width
            border-left-width
            */
            
            /* border-color: red; */
            /* 规则同上 */
            border-color: red yellow blue green;

            /* border-styple 指定边框样式
                solid 实线
                dotted 点状虚线
                dashed 虚线
                double 双线 */
            /* border-style: solid; */

            border-style: solid dotted dashed double;

        }
    </style>
</head>
<body>
    <div class="box1">我是div1</div>
</body>
</html>

在这里插入图片描述

内边距border

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;

            border: 10px orange solid;
            /* 
                内边距 padding
                内容区 和 边框之间距离 是内边距
                一共有四个方向的内边距
                pdding-top
                pading-right
                padding-bottom
                padding-left

                内边距 影响 盒子大小
                背景颜色 延伸 内容区


                盒子大小 内容区 内边距 边框 共同决定

                */

            padding-top:100px;
            padding-left:100px;
            padding-right:100px;
            padding-bottom: 100px;
            /* 
            
            padding 内边距的简写，
            可以同时指定四个方向的内边距规则
                和border-width 一样
            */
            padding: 10px 20px 30px 40px;
        }

        .inner{
            width: 100%;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1">hello
        <div class="inner"></div>
    </div>
    
</body>
</html>