CSS笔记(5)

y191024

发布于 2022-09-20 19:24:02

7100

发布于 2022-09-20 19:24:02

文章被收录于专栏：睡不着所以学编程

CSS笔记(5)

这两天又在学习scrapy,感觉总算是悟到了一丢丢,开始着手写爬虫了,但还是好难...可是CSS还是不能落下的,两天没看视频但是有在看书的!睡一觉起来开始学习

上一节学到了制作一个简洁的小米侧边栏,但是文字不是居中的,这里学习一下.很遗憾CSS是没有垂直居中的代码的,但是我们可以使用一个小技巧.

单行文字垂直居中

解决方案:让文字的行高等于盒子的高度,即可实现文字的垂直居中.

简单理解:行高的上空隙和下空隙把文字挤到中间去了,如果行高小于盒子高度,那么文字会偏上;如果行高大于盒子高度,则文字偏下.

CSS背景

通过CSS背景属性,可以给页面元素添加背景样式.背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等.

背景颜色

background-color:颜色值;

一般情况下元素背景颜色默认值是透明色,我们也可以手动指定背景颜色为透明色.

背景图片

background-image属性描述了元素的背景图像.实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片.优点是非常便于控制位置(精灵图也是一种运用场景).

background=image : none | url (url)

参数值	作用
none	无背景图(默认的)
url	使用绝对或相对地址指定背景图像

背景平铺

如果需要在html页面上对背景图片进行平铺,可以使用background-repeat属性

background-repeat: repeat | no-repeat | repeat-x | repeat-y

参数值	作用
repeat	背景图片在纵向和横向平铺(默认的)
no-repeat	背景图片不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图片在纵向上平铺

页面元素即可以添加背景颜色也可以添加背景图片,只不过背景图片会压住背景颜色.

背景图片位置

利用background-position属性可以改变图片在背景中的位置

background-position: x y;

参数的意思是:x坐标和y坐标,可以使用方位名词或者精确单位.

参数值	说明
length	百分数\由浮点数字和单位标识符组成的长度值
position	top\center\bottom\left\right 方位名词

注:

如果是方位名词,那么前后顺序是无关的,比如 top right 和 right top.
可以省略一个参数,另一个参数默认为center.

课堂案例: 制作一个带有图标的小元素

<!DOCTYPE html>
<html lang="zh-cn">
<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>王者</title>
    <style>
        h3 {
            width: 200px;
            height: 41px;
            font-size: 14px;
            font-weight: 400;
            /*方便看元素大小*/
            /* background-color: rgb(255, 210, 192); */
            line-height: 41px;
            background-image: url(wzry.png);
            background-repeat: no-repeat;
            background-position: center left;
            text-indent: 4em;
            
        }
</style>
</head>
<body>
    <!-- h3是块级元素 可以调整宽高 -->
    <h3>
        成长守护平台
    </h3>
</body>
</html>

效果图: