第三周总结（前端）

最新推荐文章于 2024-05-14 11:19:40 发布

向阳小草.

最新推荐文章于 2024-05-14 11:19:40 发布

阅读量285

点赞数 2

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

本文链接：https://blog.csdn.net/m0_63374484/article/details/121308986

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

第三周学习css总结

css的背景
a.背景颜色
使用background-color属性定义元素的背景颜色
background-color:颜色值；

b.背景图片
使用background-image属性描述元素的背景图像
background-image:none/url(“图片地址")

c.背景平铺
使用background-repeat属性在html页面上对背景图像进行平铺
background-repeat:repeat/no-repeat/repeat-x/repeat-y
默认情况下，背景图片是平铺的

d.背景图片位置
使用background-position属性可以改变图片在背景中的位置
background-position:x y;
x坐标和y坐标可以使用方位名词或精确单位

e.背景图像固定
使用background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment:scroll/fixed;

f.背景属性复合写法
background:背景颜色背景图片地址背景平铺背景图像固定背景图片位置

css的三大特性
a.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式

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>
    <style>
        body {
            text-align: center;
            font: 12px/1.5 '宋体';
        }
        
        div {
            font-size: 30px;
        }
        
        p {
            font-size: 30px;
        }
        
        .zzz ul li {
            text-align: center;
        }
    </style>
</head>

<body>
    <div>朱一龙</div>
    <div>朱一龙</div>
    <p>朱一龙</p>
    <p>朱一龙</p>
    <ul class="zzz">
        <li>朱一龙</li>
        <li>朱一龙</li>
    </ul>
    <img src="朱一龙.jpg">
</body>

</html>

c.优先级
当同一个元素指定多个选择器时，就会有优先级的产生
选择器若相同，则执行层叠性；选择器若不同，则根据选择器权重执行

css盒子模型
a.边框(border)
边框宽度（border-width)
边框样式(border-style)
边框颜色(border-color）
`border-collapse属性控制浏览器绘制表格边框的方式，border-collapse:collapse; 表示相邻边框合并在一起

<!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 {
            height: 200px;
            width: 200px;
            border-top: 1px solid red;
            border-bottom: 1px solid blue;
            border-left: 1px solid blue;
            border-right: 1px solid blue;
        }
        
        div {
            height: 200px;
            width: 200px;
            border: 1px solid blue;
            border-top: 1px solid red;
        }
    </style>
</head>

<body>
    <div></div>
    <div></div>
</body>

</html>

b.内边距(padding)
padding属性用于设置内边距，即边框与内容之间的距离

padding-top,padding-bottom,padding-left,padding-right

<!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;
            background-color: yellow;
            padding: 5px 10px 20px 30px;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <div>哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇哇</div>
</body>

</html>

c.外边距(margin)
margin属性用于设置外边距，即控制盒子与盒子之间的距离

margin-top,margin-bottom,margin-left,margin-right

当盒子指定宽度(width)时,使用margin:0 auto;可以让块级盒子水平居中

d.盒子阴影
使用box-shadow属性为盒子添加阴影

box-shadow:h-shadow   v-shadow   blur   spread   color   inset;

其中h-shadow和v-shadow是必需的

<!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 {
            box-shadow: 0px 0px 10px 0px red;
            background-color: springgreen;
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

浮动
浮动可以改变元素标签默认的排列方式，浮动最典型的应用：可以让多个块级元素在一行内排列显示

选择器 {
float:属性值
}

<!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;
            background-image: linear-gradient(to top, red, purple, black);
        }
        
        .one {
            float: left;
        }
        
        .two {
            float: right;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div class="two">2</div>
</body>

</html>

a.浮动特性

脱标
如果多个盒子都设置了浮动，则它们会按照属性值——行内显示并且顶端对齐排列
浮动元素会具有行内块的特点

b.清除浮动

选择器 {
clear: 属性值；
}

c.浮动元素经常和标准流父级搭配使用

<!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>
        .box {
            width: 1200px;
            height: 460px;
            background-color: springgreen;
            margin: 0 auto;
        }
        
        .left {
            width: 230px;
            height: 460px;
            background-color: teal;
            float: left;
        }
        
        .right {
            width: 230px;
            height: 460px;
            background-color: tomato;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

d.清除浮动

给父级添加overflow属性
after伪元素法
双伪元素清除浮动

线性渐变

 background-image:linear-gradient(direction,color-stop,color-stop,,,,,)

6.第三周总结
这一周是学习前端的第三周，不得不说前端的知识真的好杂好多。如今要学很多知识，而且进度很快，我也要更有效率的学习，紧跟小组的进度，兼顾好小组和专业的课程。加油！！！

向阳小草.

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三周总结（前端）

第三周学习css总结css的背景a.背景颜色使用background-color属性定义元素的背景颜色background-color:颜色值；b.背景图片使用background-image属性描述元素的背景图像background-image:none/url(“图片地址")c.背景平铺使用background-repeat属性在html页面上对背景图像进行平铺background-repeat:repeat/no-repeat/repeat-x/repeat-y默认情况下，背
复制链接

扫一扫