HTML基础第三课（冲浪笔记3）

最新推荐文章于 2024-08-13 21:58:24 发布

五秒法则

最新推荐文章于 2024-08-13 21:58:24 发布

阅读量194

点赞数 2

分类专栏：前端开发文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_51478745/article/details/124967898

版权

前端开发专栏收录该内容

20 篇文章 6 订阅

订阅专栏

课前知识：谷歌浏览器默认字体大小16px

CSS

1、css书写位置
（1）内联样式：直接在标签上添加style属性
（2）内部样式：在head写style标签
（3）外部样式：在head里通过link标签引入
（4）默认优先级：!important>内联>内部>外部

（5）代码展示：

①class.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>
    <link rel="stylesheet" href="./class.css">
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>

</head>
<body>
    <div class="box" style="background-color: red;"></div>
</body>
</html>

② class.css文件（注意link标签填写的文件位置）

.box{
    background-color: yellow !important;
}

2、css颜色
（1）单词表示法：red、green、blue
（2）十六进制表示法：#000000 #ffffff #ff0000红
（3）rgb三原色表示法：rgb(0,0,0) 取值范围0-255

<style>
        .box{
            background-color: red;
            background-color: #f030f0;
            background-color: rgb(195, 47, 47);
        }
</style>

3、css背景
（1）背景颜色：background-color
（2）背景图片：background-image:url("图片地址")

①平铺方式：background-repeat
        不平铺：no-repeat
        x平铺：repeat-x
        y平铺：repeat-y

<style>
        .box{
            width: 800px;
            height: 600px;
            background-color: aquamarine;
            background-image: url("https://img0.baidu.com/it/u=3147834171,2094854237&fm=253&fmt=auto&app=138&f=JPEG?w=642&h=500");
            background-repeat: no-repeat;
            background-repeat: repeat-x;
        }
</style>

②设置背景图像起始位置：background-position
        方位：left，right，top，bottom
        百分比：50% 50% （左右，上下）
        px：100px 100px （左上角坐标）
        background-position-x：50%;
        background-position-y：50%;

<style>
        .box{
            width: 1000px;
            height: 600px;
            background-color: aquamarine;
            background-image: url("https://img0.baidu.com/it/u=3147834171,2094854237&fm=253&fmt=auto&app=138&f=JPEG?w=642&h=500");
            background-repeat: no-repeat;
            background-position: bottom;
            background-position: 50% 50%;
            background-position-y: 50%;
        }
</style>

③背景尺寸：background-size:
固定值：px
百分比：相对于背景区域的百分比
特殊：
cover：全覆盖（会保持图形的纵横比，再完全覆盖）
contain：最合适的大小（会保持图形的纵横比，将图像缩成最适合背景区域的大小）

<style>
        .box{
            width: 1000px;
            height: 600px;
            background-color: aquamarine;
            background-image: url("https://img0.baidu.com/it/u=3147834171,2094854237&fm=253&fmt=auto&app=138&f=JPEG?w=642&h=500");
            background-repeat: no-repeat;
            background-size: 600px;
            background-size: 50%;
            background-size: cover;
            background-size: contain;
        }
</style>

4、精灵图

（1）目的：很多大型网页在首次加载时都需要加载很多的小图片，考虑到在同一时间服务器拥堵的情况下（精灵图技术可缓解加载时间过长）

（2）步骤：
①获取精灵图：background-image: url('精灵图');
②截取精灵图中需要的部分：background-position: ;

<!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>
    <!-- <link rel="stylesheet" href="./class.css"> -->
    <style>
        .box{
            width: 30px;
            height: 30px;
            background-color: aquamarine;
            background-image: url("https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png");
            background-repeat: no-repeat;
            background-position: 3px -69px;
        }
    </style>

</head>
<body>
    <div class="box"></div>
</body>
</html>

5、css边框

（1）样式：border-style
        ①solid：实线
        ②dashed：虚线
        ③dotted：点线
        ④double：双线
（2）大小：border-width
（3）颜色：border-color
（4）三合一：border: 10px solid red;
（5）圆角：border-radius
        border-bottom-left-radius: 50%;//左下角

<style>
        .box{
            width: 1000px;
            height: 600px;
            background-color: aquamarine;
            background-image: url("https://img0.baidu.com/it/u=3147834171,2094854237&fm=253&fmt=auto&app=138&f=JPEG?w=642&h=500");
            background-repeat: no-repeat;
            background-size: cover;
            /* border-style: double;
            border-width: 10px;
            border-color: rgb(211, 100, 100); */
            border: 8px dashed rgb(124, 81, 167);
            border-radius: 100px;
            border-top-left-radius: 30%;
        }
</style>

6、css字体样式
（1）类型：font-family
（2）大小：font-size
（3）粗细：font-weight

<!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>
    <!-- <link rel="stylesheet" href="./class.css"> -->
    <style>
        p{
            font-family: KaiTi;
            font-size: 26px;
            font-weight: bolder;
        }
    </style>

</head>
<body>
    <p>什么叫做开荤</p>

</body>
</html>

7、css文本样式

（1）文字颜色：color

（2）文本修饰：text-decoration
        ①none：默认
        ②underline：下划线
        ③overline：上划线
        ④line-through：穿过文本的线

（3）文本对齐方式：text-align
        ①left：左对齐
            right：右对齐
center：居中
justify：两端对齐
        ②text-indent：首行缩进
px（固定）、em（自动匹配到当前的字体大小，eg：1em=32px）

（4）设置行高：line-height
①normal：默认
②number：数字
③px
④%：基于当前字体的尺寸

<!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>
    <!-- <link rel="stylesheet" href="./class.css"> -->
    <style>
        p{
            font-size: larger;
            color: red;
            text-decoration: underline;
            text-align: left;
            text-indent: 2em;
            line-height: 50px;
        }
    </style>

</head>
<body>
    <p> “木桶效应木桶定律是讲一只水桶能装多少水取决于它最短的那块木板。一只木桶想盛满水，必须每块木板都一样平齐且无破损，如果这只桶的木板中有一块不齐或者某块木板下面有破洞，这只桶就无法盛满水。一只木桶能盛多少水，并不取决于最长的那块木板，而是取决于最短的那块木板。也可称为短板效应。”</p>

</body>
</html>

8、伪类：添加一些选择器特殊效果

（1）鼠标悬浮：hover
（2）鼠标点击：active
（3）标签内容的内部前面：before
（4）标签内容的内部后面：after

注意：（3）、（4）的style样式中必须写content属性
①A和B是父子关系，通过操作A修改B
.A:hover .B{}
②A和B是兄弟关系，通过操作A（上一个兄弟）修改B（下一个兄弟）
.A:hover+.B{}

<!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>
    <!-- <link rel="stylesheet" href="./class.css"> -->
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .box:hover{
            background-color: yellowgreen;
        }
        .box:active{
            background-color: red;
        }
        .textOne::before{
            content: "xxx: ";
        }
        .textTwo::before{
            content: "yyy: ";
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: rgb(214, 74, 205);
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: rgb(66, 222, 61);
        }
        .box4{
            width: 50px;
            height: 50px;
            background-color: rgb(222, 61, 83);
        }
        .box2:hover .box3{
            background-color: blue;
        }
        .box3:hover+.box4{
            background-color: rgb(213, 238, 130);
        }
    </style>

</head>
<body>
    <div class="box"></div>

    <p class="textOne">你好很高兴见到你！</p>
    <p class="textTwo">你好我也很高兴见到你！</p>

    <div class="box2">
        <div class="box3"></div>
        <div class="box4"></div>
    </div>
    
</body>
</html>