学习CSS的字体、列表、背景的修饰

最新推荐文章于 2024-04-29 18:25:35 发布

小呆狸

最新推荐文章于 2024-04-29 18:25:35 发布

阅读量377

点赞数 2

CC 4.0 BY-SA版权

分类专栏：学习文章标签： html5 css

本文链接：https://blog.youkuaiyun.com/weixin_44416290/article/details/118766255

学习专栏收录该内容

5 篇文章

订阅专栏

本文详细讲解了CSS中如何修饰字体，包括设置`font-size`、`font-family`、`font-style`、`font-weight`和`color`。接着介绍了列表的样式修改，如`list-style-type`、`list-style-image`和`list-style-position`。此外，还重点阐述了背景样式的应用，如`background-color`、`background-image`、`background-size`、`background-repeat`、`background-attachment`和`background-position`，并提及了精灵图的操作方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在css中我们首先要学习的是对于字体的修饰

其中修改字体的大小可以通过font-size来进行修饰，对于字体的修改可以利用font-family来进行修改，在Chrome浏览器中，默认字体是微软雅黑，字号为16px，我们在写样式的时候可以通过通配符选择器给页面一个默认的字号与字体，这是为了更好的用户体验。

字体的样式可以通过font-style来进行修改，它的属性值有italic与oblique都是用来使字发生倾斜作用，关闭倾斜作用可以通过normal来实现。

字体的颜色可以通过color标签来实现，其中颜色的方式有三种类型，编辑器内置了常见颜色的英文单词，还有一种是16进制的颜色表示方式，我们可以通过吸管工具来对图片上的颜色进行提取，这也是常用的一种方式，还有一种方式是RGB。

文字的的粗细是通过font-weight标签来实现的，它的属性值有两种形式，可以使用英文单词，来实现加粗 bold/bolder或变细lighter，也可以通过100~900之间的整百数来实现效果，其中500就是正常字体大小，700为bold实现的效果。

列表中我们学习了对于列表的列表标记类型

通过text-style-type标签来实现，其中属性值有circle（空心圆），disc（实心圆默认值），square（实心方块）

还可以通过 text-style-image来引入图片替换标记类型，其中图片的路径用URL（）来引入，

text-style-position 来对列表标记（项目符号）的位置进行修改。

主要介绍了背景样式的修改

可以通过 background-color来实现对背景色的修改

background-image来实现对于背景图的引入

background-size实现对背景图大小的修改

background-repeat实现对于图片平铺的处理，no-repeat不进行平铺，在进行图片的固定时必须选择为不进行平铺，默认就是repeat，repeat-x与repeat-y 分别是将图片进行水平平铺与垂直平铺

background-attachment是实现对于图片的位置固定，属性值有fixed与scoll，进行固定时选择fixed，默认是滚动状态

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>
    <style>
        div {
            height: 1500px;
            width: 100%;
            background-position: center;
            background-attachment: fixed;
            overflow: hidden;
        }

        .div1 {
            background-image: url(img/bg1.png);
        }

        .div2 {
            background-image: url(img/bg2.png);
        }
        .div3 {
            background-image: url(img/bg3.png);
        }
        .box1 {
            background-color: #CDD0D1;
            width: 100%;
            height: 200px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            margin-top: 330px;
            opacity: 0.8;
            font-weight: 700;
        }
        .box2 {
            background-color: #CDD0D1;
            width: 100%;
            height: 200px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            margin-top: 330px;
            opacity: 0.8;
            font-weight: 700;
        }
        .box3 {
            background-color: #CDD0D1;
            width: 100%;
            height: 200px;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            margin-top: 330px;
            opacity: 0.8;
            font-weight: 700;
        }
        .mar{
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <div class="div1">
        <p class="box1">
            text information 1
        </p>
    </div>
    <div class="div2 mar">
        <p class="box2 mar">
            text information 2
        </p>
    </div>
    <div class="div3">
        <p class="box3 mar">
            text information 3
        </p>
    </div>
</body>

</html>

精灵图的实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div{
        width: 150px;
        height: 170px;
    }
    .box1{
        background: url(img/精灵图.jpg) -180px -350px ;
    }
    .box2{
        background: url(img/精灵图.jpg) -545px -545px;
    }
    .box3{
        background: url(img/精灵图.jpg) -715px -748px;
    }
</style>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>