自学从零开始的CSS基础课程（day3）

<!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{
                color: rgb(255, 174, 0);
                font-size: larger;
                background-color: black;
            }
            div{
                color: #8c00ff;
            }
        </style>

        <link rel="stylesheet" href="./02.css书写位置.css">
</head> 
<body>
            -->
     <div style="color: red; font-size: 32px; background-color: #8c00ff;">
        同绪词竟楚，胜不让。
     </div>
     <div>
         台人迷，洪介降，同。
     </div>  
     <div>
         让不看偶变小反皇相鼓传一，历。
     </div>
     <p>
         听才畴秦三出所救以小王新书狂孔，李高大。
     </p>
     <h1>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, cum?
     </h1>       
      <!--lorem随机生成英文
        jw随机生成中文  -->
</body>

</html>

三、CSS语法

css语法：样式名，样式值

color 设置字体的颜色 red green yellow

font-size 设置字体大小 px

background-color 设置背景颜色

/*css的注释：*/

css的注释，作用和html类似，不过必须编写在style标签或者css文件中

语法：

选择器声明块

选择器：有多种选择器

声明块：具体的CSS样式，写在花括号里面

样式结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开

四、常用选择器

四种常用选择器：

1、元素选择器（标签选择器）

作用：选中对应标签的内容

语法：标签名{css样式....}

例子：h1{} h2{}

2、id选择器

作用：选中对应属性值的内容

语法：#id属性值{}

例子：#p1{} #p2{}

注意：id属性值不能重复使用

3、class选择器

作用：选中对应class属性值的内容

用法跟id选择器一样，不过class属性值可以重复使用

语法：.class属性值{}

注意：class属性值可以起多个，中间用空格隔开即可

例子：.a1{} .aa{}

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>Document</title>

    <style>
    *{
        font-size: 24px;
    }    
    h1{
        color: #000;
    }
    #p1{
        color: blue;
    }
    .a1{
        color: #8f3256;
    }
    </style>
    <link rel="stylesheet" href="./02.css书写位置.css">
</head>

<body>
    <h1>派位</h1>
    <p id="p1">法几都兼司秦，国上。</p>
    <p id="p2">撒出生向落血她。</p>
    <p class="a1">Lorem, ipsum dolor.</p>
    <p class="a1">使判仅</p>



</body>

</html>

五、其他选择器

5.1、复合选择器

1、交集选择器

作用：选中同时符合多个条件的内容

语法：选择器1选择器2选择器3....{}

例子：p#p1.pp{} div.ss{}

注意：如果选择器中有元素选择器，那么元素选择器必须放在最前面

2、并集选择器（群组选择器）

作用：同时选中对应的内容

语法：选择器1，选择器2，选择器3....{}

例子：.red,#red1,div,p{}

5.2、关系选择器

补充：元素之间的关系

父子关系：

父元素：直接包含子元素的元素

子元素：直接被包含的元素

祖先后代关系：

祖先元素：直接或间接包含元素的元素,包括父元素

后代元素：直接或间接被包含的元素，包括子元素

兄弟关系：拥有共同父元素的元素（平级）

1、子元素选择器：

作用：通过指定的父元素找到指定的子元素

语法：父元素>子元素{}

例子：#red>.green{} .pp>em{}

2、后代选择器：

作用：通过指定的祖先元素找到指定的后代元素

语法：祖先元素后代元素{}

例子：.class .red{} #red p{}

3、下一个兄弟选择器：

作用：通过指定的兄长找到紧挨着我的一个兄弟

语法：兄+弟{}

例子：.p1+span{}

4、选择下面所有的兄弟（前面的不选）

作用：通过指定的兄长找到下面所有的兄弟

语法：兄~弟{}

例子：#red~.p1{}

<!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>
</style>
</head>

<body>
    <div>
        大超市
        <p>日常用品区</p>
        <p>美妆区</p>
        <div>衣服区
            <span>男装</span>
            <span>童装</span>
            <span>女装</span>
        </div>
    </div>
    <p>小超市</p>
</body>
</html>