web前端开发html5+css3（入门学习笔记）（day5）

本文链接：https://blog.csdn.net/weixin_44647089/article/details/128141376

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>
       <!-- 
    方法2：(内部样式表)
        ·将样式写到head里的style标签里，然后通过css
        的选择器来选中元素，并为其设置样式，可以同时
        为多个标签设置样式，并且修改时只需要修改一处即可
        ·内部样式表更加方便对样式进行复用
        ·问题：
            内部样式表只能对一个网页起作用
            它里边的样式不能跨网页使用 
        
    
        -->
        <!-- <style>
            p{
                color: red;
                font-size: 30px;
            }
            
        </style> -->
        <!-- 方法3：（外部样式表）最佳实践
        ·可以将css样式编辑到一个外部的css文件中，然后
        通过link标签来引入外部的css文件
        ·外部样式表需通过link标签进行引入，即任意想用
        该样式的网页都可以进行引用，使样式用于不同页面
        ·将样式编写在外部css文件中，可以 使用浏览器的
        缓存机制，加快网页加载速度，提升用户体验。
        -->
        <link rel="stylesheet" href="./style.css"
        
</head>
<body>
     <!-- 网页分三个部分：
            结构html
            表现css
            行为JavaScript
        css
            ·层叠样式表
            ·网页是一个多层结构，通过css可以
            分别为网页的每一层设置样式.
            ·css用来设置网页中元素的样式
    -->
     <!-- 使用css来修改元素样式
        
        方法1(内联样式，行内样式)
        在标签内通过style属性设置元素样式
        问题：
            ·使用内联样式，只能对一个标签生效
            影响多个元素，需要多次配置。
            ·当模式变化，需要一一修改。
        开发时不要使用内联样式。
        -->
        <p style="color:blue;font-size:20px;">
            少小离家老大回，乡音无改鬓毛衰</p>
            <p style="color:yellow ;font-size:30px;"> 
                今天天气好</p>
        <p>啦啦啦啦啦</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>
        /* 
        css中的注释： /**/
       /* css的基本语法：
            选择器 声明块
           · 选择器：通过选择器选中页面中的指定元素
                例：p就就是选中页面中所有的p元素
            ·声明块：通过声明块指定所指元素设置的样式声明块是一个名值对
                一个样式名对应一个样式值，名和值之间
                以冒号（：）连接，以（分好）；结尾
        */
        p{
            color:blue;
            font-size: 30px;
        }
        h1{
            color:chartreuse;
        }
    </style>
</head>
<body>
    <h1>我是h1</h1>
    <p>我是p</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>css的常用选择器</title>
    <style>
        /* ·将所有段落设置为红色（字体）
            1.元素选择器
            作用：根据标签名来选中指定的元素
            语法：标签名{}
            例：p{}、h1{}、div{}
        */
        /* p{
            color:rgb(83, 114, 84);
        }
        h1{
            color:blue;
        } */
        /* 将000000设置黑色 
        2.id选择器
            作用：根据元素id属性值选中一个元素
            语法：#id属性值{}
            例：#box{}、#red{}

        */
        /* #one{
            color:rgba(246, 101, 188, 0.606);
        } */
        /* 将“波波十个人”设置为绿色
        3.类选择器
            作用：根据元素的class属性值选中一组元素
            语法：.class属性值
        ·class是一个标签的属性，与id类似，但class可以重复使用可以通过class属性来
为元素分组
        ·可以同时为一个元素指定多个class属性,中间用空格隔开
        */
        /* .blue{
            color:rgb(204, 26, 47);
        }
        .abc{
            font-size: 30px;
        } */
        /* 4.通配选择器 
            作用：选中页面中的所有元素 
            语法：*   
        */
        *{
            color: rgb(205, 95, 95);
        }
    </style>
</head>
<body>
    <h1>打油诗</h1>
    <p class="blue abc">波波十个人</p>
    <p>computer</p>
    <p>123465</p>
    <p>svbhevb</p>
    <p>www.baidu.com</p>
    <p id="one">00000000</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>复合选择器</title>
    <style>
        /* 将class为red的元素设置为红色（字体） */
        .red{
            color: red;
        }
        /* 将class为red的div字体大小设置为30px */
        div.red{
            font-size: 30px;
        }
        /* 交集选择器
            ·作用：选中同时符合多个条件的元素
            ·语法：选择器1选择器2选择器3选择器n{}
            ·注意：交集选择器中若有元素选择器，必须使用元素选择器开头.
        */
        .a.b.c{
            color: blue;
        }
        /* div#box1{}不建议使用 */
        /* h1与span都为绿色
        ·选择器分组（并集选择器）
           作用 ：同时选择多个选择器对应的元素
           语法：选择器1，选择器2，选择器3，选择器n{}
           例：#b1，.p1，h1，span，div.red{}
        */
        h1,span{
            color: green;
        }
    </style>
</head>
<body>
    <div class="red">我是div</div>
    <div class="red2 a b c">我是div2</div>
    <p class="red">我是p元素</p>
    <h1>标题</h1>
    <span>呵呵</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>关系选择器</title>
    <style>
        /* 为div的子元素span设置红色字体
            （为div直接包含的span设置字体颜色）
        子元素选择器
            作用：选中指定父元素的指定子元素
            语法：父元素>子元素
            */
        /* div.box > span{
            color: orange;
        } */
        /* 后代元素选择器
            作用：选中指定元素内的指定后代元素
            语法：祖先 后代
         */
         /* div span{
            color: skyblue;
         } */
        /* div > p > span{
            color: red;
        } */
        /* 选择下一个兄弟
            语法：前一个+下一个
            */
            p + span{
                color: rgb(22, 22, 221);
            }
        /* 选择下边所有的兄弟
             语法：兄 ~ 弟   */
             p ~ span{
                color: blueviolet;
             }
    </style>
</head>
<body>
    <!-- 
        父元素：直接包含子元素的元素
        子元素：直接被父元素包含的元素
        祖先元素：直接或间接包含后代元素的元素
                    一个元素的父元素也是他的祖先元素
        后代元素：直接或间接被祖先元素包含的元素
                    子元素也是后代元素
        兄弟元素：拥有相同父元素的元素
     -->
    <div class="box">
        我是一个div
        <span>我是div里的span1</span>
        <p>
            我是div里的p元素
            <span>
                我是p元素里的span2
            </span>
        </p>
        <span>我是div里的span3</span>
        <span>我是div里的span4</span>
        <span>我是div里的span5</span>
        <span>我是div里的span6</span>
    </div>
    <span>我是第一个div外的span7</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>属性选择器</title>
    <style>
        /*  ·[属性名] 选择含有指定属性的元素
            ·[属性名=属性值]选择含有指定属性和属性值的元素
            ·[属性名^=属性值]选择属性值以指定值开头的元素
            ·[属性名$=属性值]选择属性值以指定值结尾的元素
            ·[属性名*=属性值]选择属性值含有某值元素的元素
            p[title]{}
            p[title=abc]{}   
        */
        /* p[title$=abc]  /*或[title]*/
        p[title*=e]  /*或[title]*/{
            color: blue;
        }

    </style>
</head>
<body>
    <p title="abcde">打油诗</p>
    <p title="123456">波波十个人</p>
    <p title="helloabcde">computer</p>
    <p>123465</p>
    <p>svbhevb</p>
    <p>www.baidu.com</p>
    <p>00000000</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>伪类选择器</title>
    <style>
        /* 
        将ul里的第一个li设置为红色
         */
        /* ul>li.first{
            color: blue;
        } 
        伪类（不存在的类，特殊的类）
            ·伪类用来描述一个元素的特殊状态
            例：第一个子元素，被点击的元素
                鼠标移入的元素···
        ·伪类一般情况下都是使用冒号（：）开头
            ：first-child第一个子元素
            ：last-child最后一个子元素
            ：nth-child（）选中第n个子元素
                 特殊值：
                    n，第n个，n的范围0~∞
                    2n或even，表示偶数位的元素
                    2n+1或odd，表示奇数位的元素
        ·以上这些伪类都是根据所有的子元素进行排序
            :first-of-type
            :last-of-type
            :nth-of-type()
        ·这几个伪类功能与上述类似，但他们是在同类
        元素中进行排序
        /* ul > li:nth-of-type(odd){
            color: blue;
        } 
        ·：not（）否定伪类
            将符合条件的元素从选择器中去除。
                */
        ul > li:not(:nth-of-type(3)){
            color: blue;
        }

    </style>
</head>
<body>
    <!--操作小技巧： ul+li*5+table键，自动生成 -->
    <ul>
        <span>我是第一个span</span>
        <li>第〇个</li>
        <li class="first">第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
</body>
</html>