前端基础（四）------背景属性与文本字体

最新推荐文章于 2024-05-14 18:04:32 发布

零度℃192

最新推荐文章于 2024-05-14 18:04:32 发布

阅读量146

点赞数 1

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_70761095/article/details/128500796

版权

1.背景属性

制作网页时在网页中添加一些背景颜色、背景图像让网页更加美观

background-color：设置元素的背景颜色；
- 取值：英文颜色表示法、rgb表示法、十六进制表示法
- #RRGGBB # RGB
background-image：设置元素的背景图像；
- 元素的尺寸小于图片的尺寸，图片是从元素的左上角角开始显示，超出的部分不可见
- 元素的尺寸大于图片的尺寸，图片在水平方向和垂直方向平铺的

div{
    background-image: url("路径");
}

background-repeat: 背景图片平铺方式;

/* 背景图片平铺 默认*/
div{
    background-repeat: repeat;
}

/* 背景图片不平铺 */
div{ 
    background-repeat: no-repeat; 
}

/* 背景图片水平平铺 */
div{ 
    background-repeat: repeat-x; 
}

/* 背景图片垂直平铺 */
div{ 
    background-repeat: repeat-y; 
}

background-position: 设置背景图片位置；

X允许的取值方式	Y允许的取值方式
left左对齐 center水平居中 right右对齐	top顶部对齐 center垂直居中 bottom底部对齐
px	px

如果只给一个值，那么第二个值默认center

精灵图技术：为了减少网络请求，可以将所有的小图标拼接在一张图片上，一次网络请求全部得到；借助于background-position进行背景图片位置的调整，实现显示不同的图标

background-size：设置背景图片的尺寸；

background-size:X Y; X和Y和原图宽高对应，同时X Y可以是自己设定的百分比或像素
background-size:cover;等比例缩放直到铺满X轴和Y轴；
background-size:contain; 等比例缩放直到铺满X或Y轴其中一个；

2.字体属性

字体设置是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS中提供了一系列用于设置字体样式的属性，比如更改字体，控制字体大小和粗细等等。

字体大小：font-size: px / % / em / rem;

字体颜色：color:英文单词 / 十六进制 / rgb ;

英文单词表示法做测试使用
rgb 三原色
#RRGGBB # RBG 0~9 A~F

字体类型：font-family: 字体名称 ;

字体粗细：font-weight: 值;

值	说明
bold	定义粗的字体
bolder	定义更粗的字体
lighter	定义更细的字体
normal	定义正常的字体大小

100-900的整百数数值

字体斜体：font-style: 值;

值	说明
normal	正常
italic	斜体，换成一种斜体字体

行高： line-height: px\%\倍数；

3.文本相关属性

文本缩进： text-indent
文本水平对齐方式： text-align

值	说明
left	居左对齐
center	居中对齐
right	局右对齐
justify	两端对齐

垂直对齐：vertical-align
文本修饰：text-decoration

值	说明
none	没有文本线
underline	下划线
line-through	中划线
overline	上划线

单词间距：word-spacing单词间距
字间距： letter-spacing每一个字符之间的间隙
溢出显示方式： text-overflow
- ellipsis 显示省略符号来代表被修剪的文本

4.作业

第九章 Font及text操作Text- overflow 案例

5.解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画便利店 果壳网</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        a{
            text-decoration: none;
        }

        li{
            list-style: none;
        }

        body{

            background-color: rgb(255,255,255);
        }


        .f-title {
            width: 680px;
            height: 380px;
            border: 1px solid rgb(221,221,221);
            margin: 0 auto;
        }

        .f-title ul{
            display: inline-block;
        }

        .f-title li{
            display: block;
        }

        .con0 a{
            padding: 10px;
        }

        .con1 a{
            color: rgb(102,102,102);
            font-weight: bold;
            font-size: 18px;
            line-height: 40px;
            padding: 10px;
        }

        .con2 span{
            color: rgb(255,0,132);
            font-weight: bold;
            line-height: 30px;
            padding: 10px;
        }

        .con2 a{
            color: rgb(102,102,102);
            line-height: 30px;
        }

        .con3 a{
            color: rgb(102,102,102);
            line-height: 30px;
            padding: 10px;
        }

        .con4 i{
            color: rgb(255,51,0);
            font-style: normal;
            line-height: 30px;
            padding: 10px;

        }

        .con4 a{
            color: rgb(102,102,102);
        }

        .con5 img{
            padding: 0 0 40px 10px;

        }

        

    </style>

</head>
<body>

    <div class="f-title">
        <ul class="con">
            <li class="con0">
                <a href="#">
                <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/pic1.jpg" alt="西门子洗碗机" width="315" height="220">
                </a>
            </li>
            
            <li class="con1">
                <span></span>
                <a href="#">动画便利店X果壳网《西门子洗碗机》...</a>

            </li>

            <li class="con2">
                <span>原创作品</span>
                <a>- 影视 - Motion Graphic</a>

            </li>

            <li class="con3">
                <span></span>
                <a href="#">3小时前上传</a>

            </li>

            <li class="con4">
                <i>1284 </i>
                <a>人气/</a><i>11</i>
                <a>评论 /</a><i>47</i>
                <a>推荐</a>

            </li>

            <li class="con5">
                <span></span>
                <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/play.png" alt="">
            </li>
        </ul>

        <ul class="con">
            <li class="con0">
                <a href="#">
                <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/pic2.jpg" alt="西门子洗碗机" width="315" height="220">
                </a>
            </li>

            <li class="con1">
                <span></span>
                <a href="#">动画便利店X果壳网《西门子洗碗机》...</a>

            </li>

            <li class="con2">
                <span>原创作品</span>
                <a>- 影视 - Motion Graphic</a>

            </li>

            <li class="con3">
                <span></span>
                <a href="#">3小时前上传</a>

            </li>

            <li class="con4">
                <i>1284 </i>
                <a>人气/</a><i>11</i>
                <a>评论 /</a><i>47</i>
                <a>推荐</a>

            </li>

            <li class="con5">
                <span></span>
                <img src="https://static.zzhitong.com/lesson-files/html/img/6-2-images/play.png" alt="">
            </li>
        </ul>
    </div>



</body>
</html>

零度℃192

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础（四）------背景属性与文本字体

制作网页时在网页中添加一些背景颜色、背景图像让网页更加美观background-color：设置元素的背景颜色；取值：英文颜色表示法、rgb表示法、十六进制表示法background-image：设置元素的背景图像；元素的尺寸小于图片的尺寸，图片是从元素的左上角角开始显示，超出的部分不可见元素的尺寸大于图片的尺寸，图片在水平方向和垂直方向平铺的background-repeat: 背景图片平铺方式;background-position: 设置背景图片位置；
复制链接

扫一扫