【实习第三天】css的应用

最新推荐文章于 2023-11-30 15:06:15 发布

夜色已晚

最新推荐文章于 2023-11-30 15:06:15 发布

阅读量137

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_48000103/article/details/127928155

版权

1.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    结构    30个左右标签，先用一段时间
        css     表现    外在显示的样子
        js      行为    

        html    超文本语言
        css    -层叠样式表
               -网页实际上是一个多层的结构，css可以通过给每一层结构做样式，最终你看到的是最上面的一层

               你要找的是，找对追求目标，然后各种花招追求她（他）
     -->
</body>
</html>

2.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标签内部，写一个style标签，通过选择器选中对应的html结构，在花括号里面书写css样式，可以写多组样式，样式之间用;隔开，最后一个样式可以不用，但一般都加上

        优缺点：
            缺点：复用率不高
        注意：写css比较多的时候不推荐使用
        但教学期间用的比较多
    1-->
    <!-- 第三种方式：外部样式表
        书写位置：在html文件外，新建一个.css文件，在css文件里通过选择器选中对应的html结构，在{}中书写css样式，然后在head标签内写一个link标签将对应的css文件引入到html文件内

        注意：推荐使用
    -->

    <link rel="stylesheet" href="./02.css书写位置.css">
    
    <style>
        
        p{
            color: purple;
            background-color:pink;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 第一种方式：内联样式/行内样式
        书写位置：开始标签 style属性，将css属性值卸载style属性值里面
                可以写多个样式，只要用分隔号;隔开即可
        优缺点：
            优点：有针对性
            缺点：1、结构和表现耦合了
                 2、修改起来不方便
            注意：不推荐使用
    -->
    <!-- 
        语法：样式名，样式值
                color     设置字体的颜色  red green yellow
                font-size  设置字体的大小  px
                backgroundcolor 设置背景颜色  red green yellow
     -->
    <div style="color: red;font-size: 20px;background-color: yellow;">
        姑人程系那会的光欲才不，人派低回国师人才，乐办主君，弄巴别。
    </div>

    <p>瞠吞未回太者次一月如句妙统，人知和要张。</p>

    <h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vitae, delectus!</h1>
</body>
</html>

3.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 type="text/css">
        /* css注释符号 */

        /* CSS的注释，作用和HTML类似，只不过它必须编写在style标签中，或者是css文件中
        
        CSS语法：
            选择器  声明块
            选择器：有多种选择器
            声明块：具体的css样式，是写在花括号里面
            样式的结构：名值对结构（样式名：样式值；），可以写多组样式，用分隔号隔开
            
        */
    </style>
</head>
<body>
  
</body>
</html>

4.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 type="text/css">
        /* 四种常用的选择器 */
        

        /* 需求一：标题变红色 */
        /* 1、元素选择器（标题选择器）
            作用：选中对应标签的内容
            语法：标签名{css样式.....}
            例子：h1{}，h3{}，p{}
        */
        h1{
            color: red;
        }
        h3{
            background-color: green;
        }
        p{
            font-size: 24px;
        }

        /* 需求二：将第一句诗变绿色 */
        /* 2、id选择器
            作用：选中对应id属性值的内容
            语法：#id属性值
            例子：#p1{},#p2{}····
            注意：id的属性值不能重复使用
        */
        #p1{
            color: green;
        }

        #p2{
            color: red;
        }

        /* 需求三：将第二句诗也变绿色 */
        /* 3、class选择器
            class选择器的用法跟id选择器是一样的，只不过class属性值可以重复使用
            作用：选中所有class属性值的内容
            语法：.class属性值{}
            注意：class属性值可以起多个，中间用空格隔开即开
            例子：.s1{}，.ss{}，.pp{}
        */

        .s1{
            color: green;
        }
        #p2{
            color: green;
        }
        /* 需求四：给所有的标签字体变为24px */
        /* 4、通配选择器
            作用：选中所有标签，进行设置   
            语法：*{}             
        */
    </style>
</head>
<body>
    <div>
        <center><h1>登高</h1>
        <h3>杜甫</h3></center>
        <p id="p1">视着皇龄间笔，罚有仍一未有大将降单，年。</p>
        <p class="s1">忧且范即王壬问陀着重以开九文先最，赐者。</p>
        <p>话妄开韩者量搏尚有我不平朋要，和是时道。</p>
        <p>夭保掉者故感第临是妄胜，梵保惊出，台动。</p>
    </div>
</body>
</html>

5.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>
        /* 复合选择器两种 交集选择器，并集选择器 */
        /* 需求一：将class为red的诗句变为红色，同时将class为red的div字体变为24px */
        /* 1、交集选择器
            作用：选中同时符合多个条件的内容
            语法：选择器1选择器2选择器3......{}
            注意：如果选择器当中有元素选择器，元素选择器必须放在最前面
            例子：p#p1.pp{}，div.ss{}
        */
        .red{
            color: red;
        }
        div.red{
            font-size: 24px;
        }
        /* 需求二：将h1，h3字体颜色变为黄色 */
        /* 2、并集选择器（群组选择器）
        作用：同时选中对应的内容
        语法：选择器1，选择器2，选择器3......{}
        例子：.red,#red1,div,p{}
         */
         h1,h3{
            color: brown;
         }
    </style>
</head>
<body>
    <h1>承志领活。</h1>
    <h3>守秦</h3>
    <p class="red">使司样名人其真，的。</p>
    
</body>
</html>

6.关系选择器

<!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的子元素h1设置一个字体颜色红色 */
        /* 1、子元素选择器
        作用：通过指定的父元素找到指定的子元素
        语法：父元素>子元素{}
        例子：#red>.green{}，   .pp>em{}
         */
         div>h1{
            color: red;
         }



        /* 需求二：div里的span元素字体都变为30px */
        /* 2、后代选择器
        作用：通过指定的祖先元素找到指定的后代元素
        语法：祖先元素 后代元素{}
        例子：.class .red{}，   #red p{}
         */
         #cs span{
            font-size: 30px;
         }


        /* 需求三：通过衣服p标签找到生鲜区，加背景色粉色 */
        /* 3、下一个兄弟选择器
        作用：通过指定的兄长找到紧挨着我的兄弟
        语法：兄+弟{} 
        */
         .p1+span{
            background-color: pink;
         }

        /* 需求四：通过衣服区找到下面所有的兄弟，设置字体的颜色棕色 */
        /* 4、选择下面所有的兄弟选择器
        作用：通过指定的兄长找到下面所有的兄弟
        语法：兄~弟{}
        例子：#red~.p1{}
        */

        .p1~span{
            color: brown;
        }

        /*  */
    </style>
</head>
<body>
    <div id="cs">
        大超市
        <h1>日常用品曲</h1>
        <h1>美妆区</h1>>
        <p class="p1">
            衣服区
            <span>
                女装
                <em>上衣</em>
                <em>裤子</em>
                <em>裙子</em>
            </span>
            <span>
                男装
            </span>
            <span>
                童装
            </span>
        </p>
        <span>
            生鲜区
        </span>
        <span>
            零食区
        </span>
    </div>
    <p>小超市</p>

    <!-- 元素之间的关系
    父子关系
    父元素  直接包含子元素的元素
    子元素  直接被父元素包含的元素

    祖先后代关系
    祖先元素  直接或间接包含元素的元素，包括父元素
    后代元素  直接或间接被包含的元素，包括子元素

    兄弟关系
    拥有共同父元素的元素
    
    -->
</body>
</html>

7.属性选择器

<!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>
        /* 需求一：有title属性的p标签，颜色变为红色 */
        p[title]{
            color: red;
        }
        /* 1：属性选择器
                通过确定属性以及属性值来选中对应的内容，例如id属性，class属性，src属性，href属性
                语法：
                1、[属性名]{} 选择含有指定属性的元素
                2、[属性名=属性值]{} 选择含有指定属性和属性值的元素
                3、[属性名^=属性值]{} 选择属性值以指定值开头的元素
                4、[属性名$=属性值]{} 选择属性值以指定值结尾的元素
                5、[属性名*=属性值]{} 选择属性值包含指定值的元素
        */
    </style>
</head>
<body>
    <h1 title="a" id="aaaa">啊大大大</h1>
    <h3 title="b">啊嘻嘻嘻</h3>
    <p title="ab">啊打发傅海峰</p>
    <p title="abc">安徽发发发卡</p>
    <p>啊大人物方法是</p>
</body>
</html>