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

课前知识：谷歌浏览器默认字体大小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）背景颜***ackground-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）颜***order-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>

前端HTML、CSS基础知识文章被收录于专栏

带小伙伴们一起从零认识HTML，学习常用标签，表单，样式，属性，选择器，基本定位，通过学习方法巧记盒子模型，学习基础简单的动画效果