【前端基础】层叠宇宙的代码旅人：css（中）

澪贰

发布于 2025-07-14 08:32:21

2290

文章被收录于专栏：学习学习

接上篇css的初步学习，本篇将针对具体内容进行美化，内容不难，主要是记忆理解

1.常用元素属性

CSS 属性有很多, 可以参考文档

传送门：常见元素属性参考文档

1.1 字体属性

1.1.1 设置字体

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .song{
            font-family: '宋体';
        }
    </style>
</head>
<body>
    <p class="song">这是宋体</p>
    <p>这不是宋体</p>
</body>
</html>

🔥值得注意的是：

字体名称可以用中文, 但是不建议
多个字体之间使用逗号分隔 (从左到右查找字体，如果都找不到，会使用默认字体)

<style>
        p {
            /* 先尝试使用 "Times New Roman" 字体，如果没有则尝试 Times，若都没有则使用 serif 默认字体 */
            font-family: "Times New Roman", Times, serif;
        }
</style>

如果字体名有空格, 使用引号包裹

<style>
        p {
            /* 包含空格的字体名 "Palatino Linotype" 使用引号包裹 */
            font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
        }
</style>

建议使用常见字体, 否则兼容性不好

✏️展示效果：

1.1.2 大小

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big{
            font-size: 80px;
        }
    </style>
</head>
<body>
    <p class="big">大大大</p>
    <p>小小小</p>
</body>
</html>

🔥值得注意的是：

不同的浏览器默认字号不一样，最好给一个明确值 (chrome 默认是 16px)
可以给 body 标签使用 font-size
要注意单位 px 不要忘记
标题标签需要单独指定大小

注意: 实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮

✏️展示效果：

1.1.3 粗细

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cu{
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p class="cu">粗粗粗</p>
    <p>细细细</p>
</body>
</html>

🔥值得注意的是：

可以使用数字表示粗细
700 == bold, 400 是不变粗，== normal，变细可以用 lighter
取值范围是 100 -> 900

✏️展示效果：

1.1.4 文字样式

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            font-style: italic;
        }
    </style>
</head>
<body>
    <p class="one">倾斜</p>
    <p>不倾斜</p>
</body>
</html>

🔥值得注意的是：

在 HTML 里，<em> 和 <i> 标签默认的渲染效果是文字倾斜，它们分别用于表示强调文本和以不同语态表达的文本。不过在实际开发中，可能确实经常需要将这两个标签里的文字样式设置为不倾斜( font-style: normal )

✏️展示效果：

1.2 文本属性

1.2.1 文本颜色

使用 R (red)，G (green)，B (blue) 的方式表示颜色(色光三原色)三种颜色按照不同的比例搭配，就能混合出各种五彩斑斓的效果

计算机中针对 R，G，B 三个分量, 分别使用一个字节表示( 8 个比特位, 表示的范围是 0-255，十六进制表示为 00-FF)

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color: red;
            /* color: #ff0000;
            color: rgb(255, 0, 0); */
        }
    </style>
</head>
<body>
    <p class="red">红色</p>
</body>
</html>

🔥值得注意的是：

数值越大，表示该分量的颜色就越浓，255，255，255 就表示白色； 0，0，0 就表示黑色
鼠标停在颜色图标上是可以调节颜色的，所以不需要自己查询颜色

color 属性值的写法：预定义的颜色值(直接是单词)、[最常用] 十六进制形式、RGB 方式
#ff0000，第一二位表示红色，第三四位表示绿色，第五六位表示蓝色。当有连续两位相同时可以缩写，#ff00ff => #f0f

✏️展示效果：

1.2.2 文本对齐

文本对齐指的是文本在水平方向上相对于容器的排列方式。它决定了文本的左、右边缘或者中心如何与容器的边界对齐

text-align: [值];

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .left-align {
            text-align: left;
        }
        .right-align {
            text-align: right;
        }
        .center-align {
            text-align: center;
        }
    </style>
</head>
<body>
    <p class="left-align">这是左对齐的文本。</p>
    <p class="right-align">这是右对齐的文本。</p>
    <p class="center-align">这是居中对齐的文本。</p>
</body>
</html>

🔥值得注意的是：

不光能控制文本对齐, 也能控制图片等元素居中或者靠右

center：居中对齐
left：左对齐
right：右对齐

✏️展示效果：

1.2.3 文本装饰

text-decoration: [值];

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            text-decoration: none;
        }

        .two {
            text-decoration: underline;
        }

        .three {
            text-decoration: overline;
        }

        .four {
            text-decoration: line-through;
        }
       </style>
</head>
<body>
        <div class="one">啥都没有</div>
        <div class="two">下划线</div>
        <div class="four">删除线</div>
        <div class="three">上划线</div>
</body>
</html>

🔥值得注意的是：

underline 下划线，[常用]
none 啥都没有，可以给 a 标签去掉下划线.
overline 上划线，[不常用]
line-through 删除线，[不常用]

✏️展示效果：

1.2.4 文本缩进

控制段落的 首行 缩进 (其他行不影响)，注意和文本对齐做区分

text-indent: [值];

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            text-indent: 2em;
        }

        .two {
            text-indent: -2em;
        }
       </style>
</head>
<body>
    <div class="one">正常缩进</div>
    <div class="two">反向缩进</div>
</body>
</html>

🔥值得注意的是：

单位可以使用 px 或者 em
使用 em 作为单位更好，1 个 em 就是当前元素的文字大小
缩进可以是负的，表示往左缩进 (会导致文字就冒出去了)

✏️展示效果：

1.2.5 行高

行高指的是上下文本行之间的基线距离

从上到下分别为：

顶线
中线
基线 (相当于英语四线格的倒数第二条线)
底线

内容区： 底线和顶线包裹的区域，即下图深灰色背景区域
其实基线之间的距离 = 顶线间距离 = 底线间距离 = 中线间距离

line-height: [值];

🚩行高 = 上边距 + 下边距 + 字体大小

上下边距是相等的, 此处字体大小是 16px, 行高 40px, 上下边距就分别是 12px

<style>
    .line-height .one {
        line-height: 40px;
        font-size: 16px;
   }
</style>
<div class="line-height">
    <div>
       上一行
    </div>
    <div class="one">
       中间行
    </div>
    <div>
       下一行
    </div>
</div>

🚩行高也可以取 normal 等值

这个取决于浏览器的实现，chrome 上 normal 为 21 px

🚩行高等于元素高度, 就可以实现文字居中对齐

<style>
    .line-height .two {
        height: 100px;
        line-height: 100px;
   }
</style>
<div class="line-height">
    <div class="two">
       文本垂直居中
    </div>
</div>

🚩行高更多体现在调整行间距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            line-height: 100px;
        }
    </style>
</head>
<body>
    <p>这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字</p>
    <p>。。。。。。。。</p>
    <p class="one">这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字这是一行文字</p>
</body>
</html>

1.3 背景属性

1.3.1 背景颜色

background-color: [指定颜色]

默认是 transparent (透明) 的，可以通过设置颜色的方式修改

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: antiquewhite;
        }

        div {
            background-color: rgb(226, 43, 202);
        }
    </style>
</head>
<body>
    <div>
        这是沙盒背景
    </div>
</body>
</html>

✏️展示效果：

1.3.2 背景图片

background-image: url(...);

比 image 更方便控制位置(图片在盒子中的位置)

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: antiquewhite;
        }

        div {
            background-color: rgb(226, 43, 202);
            width: 1200px;
            height: 1500px;
            background-image: url(微信图片_20250214002940.jpg);
        }
    </style>
</head>
<body>
    <div>
        这是沙盒背景
    </div>
</body>
</html>

这里设置的是沙盒大小，所以图片会根据沙盒大小自动填充

🔥值得注意的是：

url 不要遗漏
url 可以是绝对路径，也可以是相对路径
url 上可以加引号，也可以不加

✏️展示效果：

1.3.3 背景平铺

background-repeat: [平铺方式]

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: antiquewhite;
        }

        div {
            background-color: rgb(226, 43, 202);
            width: 700px;
            height: 300px;
            background-image: url(preview.gif);
            background-repeat: repeat;
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
        }
    </style>
</head>
<body>
    <div>
        这是沙盒背景
    </div>
</body>
</html>

🔥值得注意的是：

默认是 repeat，背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方

repeat：平铺
no-repeat：不平铺
repeat-x：水平平铺
repeat-y：垂直平铺

✏️展示效果：

1.3.4 背景位置

background-position: x y;

修改图片的位置

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: antiquewhite;
        }

        div {
            background-color: rgb(226, 43, 202);
            width: 700px;
            height: 300px;
            background-image: url(preview.gif);
            background-repeat: no-repeat;
            background-position: 200px 200px;
        }
    </style>
</head>
<body>
    <div>
        这是沙盒背景
    </div>
</body>
</html>

要注意范围，这里的位置表示向右移动 200 像素点，向下移动 200 像素点

🔥值得注意的是：

参数有三种风格：

方位名词：(top，left，right，bottom)
精确单位：坐标或者百分比(以左上角为原点)
混合单位：同时包含方位名词和精确单位

✏️展示效果：

1.3.5 背景尺寸

background-size: length|percentage|cover|contain;

✏️举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: antiquewhite;
        }

        div {
            background-color: rgb(226, 43, 202);
            width: 700px;
            height: 300px;
            background-image: url(preview.gif);
            background-repeat: no-repeat;
            background-size: 700px 300px;
        }
    </style>
</head>
<body>
    <div>
        这是沙盒背景
    </div>
</body>
</html>

🔥值得注意的是：

可以填具体的数值: 如 40px 60px 表示宽度为 40px，高度为 60px
也可以填百分比：按照父元素的尺寸设置
cover 和 contain 的区别？

cover 会将背景图像等比例缩放，使图像的宽度或高度至少覆盖元素的整个内容区域，图像可能会部分超出元素的边界，但不会有空白区域。这意味着图像会填满整个元素，可能会裁剪掉部分图像内容

contain 会将背景图像等比例缩放，使图像的宽度和高度都能完全包含在元素的内容区域内，同时保证图像的完整性。也就是说，图像会尽可能大地显示在元素内，但不会超出元素的边界，可能会在元素的一侧或两侧留下空白区域

✏️展示效果：

1.3.6 圆角矩形

border-radius: length;

length 是内切圆的半径，数值越大，弧线越强烈

🚩基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 400px;
            height: 200px;
            border: 2px solid green;
            border-radius: 50px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

🚩生成圆形

让 border-radius 的值为正方形宽度的一半即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px solid green;
            border-radius: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

🚩展开写法

从左上角开始，按照顺时针排列，对四个角进行弧度设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px solid green;
            border-radius: 10px 20px 30px 40px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>