CSS day2

Follow_浩弟

已于 2023-08-14 17:54:56 修改

阅读量24

点赞数

分类专栏： CSS 文章标签： css 前端

于 2023-08-13 21:37:32 首次发布

本文链接：https://blog.csdn.net/Follow_haodi/article/details/132265642

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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>
        /* 1.交集选择器 */
        div.box{
            color: red;
        }

        /* 2.并集选择器 */
        div,p,span{
            color: red;
        }

        /* 3.后代选择器 */
        .box .box1{
            color: red;
        }

        /* 4.子代选择器 */
        .box>.box1{
            color: red;
        }
    </style>
</head>
<body>
    <!-- 基本选择器  1.标签选择器  2.类名选择器  3.ID选择器  4.通配符选择器 -->
    <!-- 复合选择器  1.交集选择器  2.并集选择器  3.后代选择器  4.子代选择器 -->
    <div>第一个div</div>
    <div class="box">第二个div
        <div class="box1">第二个div的孩子1</div>
        <div>第二个div的孩子2
            <div  class="box1">div的孩子3</div>
        </div>
    </div>
    <p class="box">这是一个p标签</p>
    <span>这是一个span</span>
</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>
        div{
            width: 200px;
            height: 200px;
        }
        p{
            width: 300px;
            height: 100px;
        }
        span{
            width: 200px;
            height: 200px;
        }
        b{
            width: 200px;
            height:200px;
        }
        img{
            width: 200px;
            height: 200px;
        }
        input{
            width: 100px;
            height: 50px;
        }
        textarea{
            width: 100px;
            height: 100px;
        }
        hr{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <!-- 1.块级元素  特点：独占一行,可以设置宽和高 -->
    <div>第一个div</div>
    <div>第二个div</div>
    <p>第一个p标签</p>
    <p>第二个p标签</p>

    <!-- 2.行内元素 特点：不独占一行，不可以设置宽和高 -->
    <span>第一个span</span>
    <span>第二个span</span>
    <b>字体加粗</b>
    <b>字体加粗</b>

    <!-- 3.行内块元素 特点：不独占一行，可以设置宽和高 -->
    <img src="./ey.jpg" alt="">
    <img src="./ey.jpg" alt="">
    <input type="text">
    <input type="text">

    <ul>
        <li>1</li>
    </ul>
    <ul>
        <li>2</li>
    </ul>

    <select name="" id=""></select>
    <select name="" id=""></select>

    <textarea name="" id="" cols="30" rows="10"></textarea>
    <textarea name="" id="" cols="30" rows="10"></textarea>

    <hr>
    <hr>

    <p>123
        <p>456</p>
    </p>

    <div>123
        <div>456</div>
    </div>
    
    
    <!-- 块级元素 h1-h6 p div ul ol dl li dt dd caption table form hr -->
    <!-- 块级元素内可以嵌套任何元素（注意：p标签特殊） -->

    <!-- 行内元素 span b i u s strong em del ins a -->
    <!-- 行内元素内只能嵌套行内元素（注意：a标签特殊） -->

    <!-- 行内块元素 img input select textarea -->

</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{
            width: 200px;
            height: 200px;

            /* 转换为行内元素 */
            /* display: inline; */

            /* 转换为行内块 */
            display: inline-block;

            background-color: #f00;
        }
        span{
            /* 装换为块级元素 */
            /* display: block; */

            /* 转换为行内块 */
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div>第一个div</div>
    <div>第二个div</div>

    <span>第一个span</span>
    <span>第二个span</span>
</body>
</html>

CSS三大特性

1.层叠性：当同个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器，权重低的会被权重高的覆盖

2.继承性：指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性(会继承字体样式和排版样式)

3.优先级：指在浏览器中被解析的先后顺序（!important > 行内样式表 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承的样式 > 浏览器默认样式）

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>
        div {
            width: 200px;
            height: 200px;
            /* 背景颜色 */
            /* 默认值 transparent 透明 */
            /* background-color: transparent; */
            /* background-color: red; */
            /* background-color: #ff0; */
            /* background-color: rgb(255,0,255); */
            background-color: rgba(0, 0, 0, 0.2);



            /* 背景图片 */
            background-image: url("./tx.jpg");
            /* 背景平铺 */
            /* 默认 repeat  水平 repeat-x  垂直 repeat-y  不平铺 no-repeat */
            background-repeat: no-repeat;
            /* 背景定位 长度/百分比/方位词 */
            background-position: 20px 40px;
            /* 背景附着 */
            background-attachment: fixed;
            /* 背景简写 */
            /* background: 背景颜色 背景图片 背景平铺 背景附着 背景定位; */
            background: #f00 url("./tx.jpg") no-repeat scroll center center;

            
            /* 背景大小 */
            /* 数值  百分比 */
            /* background-size: 100%; */
            /* contain 优先考虑图片是否完整展示, 再考虑盒子是否撑满 */
            /* cover 优先撑满盒子, 再完整展示图片 */
            background-size: cover;
        }
    </style>
</head>

<body>
    <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>
        div{
            width: 26px;
            height: 30px;
            /* border: 1px solid #000; */

            /* 背景图片 */
            background-image: url("./index.webp");

            /* 北京平铺 */
            background-repeat: no-repeat;

            /* 背景定位 */
            background-position:0 -105px;
        }
    </style>
</head>
<body>
    <div></div>

    <!-- 为什么要用精灵图技术? -->
    <!-- **为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度。** -->
</body>
</html>

Follow_浩弟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS day2

3.优先级：指在浏览器中被解析的先后顺序（!important > 行内样式表 > ID选择器 > 类选择器 > 标签选择器 > 通配符 > 继承的样式 > 浏览器默认样式）1.层叠性：当同个元素被两个选择器选中时，CSS会根据选择器的权重决定使用哪一个选择器，权重低的会被权重高的覆盖。2.继承性：指被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性(会继承字体样式和排版样式)
复制链接

扫一扫

专栏目录