【CSS】：字体与文本样式

举报
Yui_ 发表于 2025/02/03 23:14:12 2025/02/03
172 0 0
【摘要】 【CSS】：字体与文本样式

🏠大家好，我是Yui_💬
🍑如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🚀如有不懂，可以随时向我提问，我会全力讲解~
🔥如果感觉博主的文章还不错的话，希望大家关注、点赞、收藏三连支持一下博主哦~！
🔥你们的支持是我创作的动力！
🧸我相信现在的努力的艰辛，都是为以后的美好最好的见证！
🧸人的心态决定姿态！
💬欢迎讨论：如有疑问或见解，欢迎在评论区留言互动。
👍点赞、收藏与分享：如觉得这篇文章对您有帮助，请点赞、收藏并分享！
🚀分享给更多人：欢迎分享给更多对编程感兴趣的朋友，一起学习！

本文将聚焦于CSS的常用属性来书写。
注意：CSS的属性有非常多，本文只是简单的讲解是使用其中的一些常用的属性，如果读者对CSS的其他属性很感兴趣可以到以下CSS文档中查找：CSS参考文档
@[toc]

1.字体属性

字体属性分为字体类别、字体大小、字体粗细、字体的样式。

1.1 设置字体类别

在我写论文时，总会被要求将字体设置为宋体，在CSS中也是可以为字体设置宋体。
语法格式：

font-family: '要设置的字体名';

<!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{
            font-family: '宋体';
        }
    </style>
</head>
<body>
    <div>这是宋体</div>
    <p>这不是宋体</p>
</body>
</html>

image.png

注意：

  1. 字体可以使用中文，也可以使用英文。
  2. 多个字体间使用逗号分割，从左到右查找字体，如果都找不到，会使用默认字体。
  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>
</head>
<body>
    <style>
        .font-family .one{
            font-family: 'Microsoft YaHei';
        }
        .font-family .two{
            font-family: '宋体';
        }
    </style>
    <div class="font-family">
        <div class="one">
            这是微软雅黑
        </div>
        <div class="two">
            这是宋体
        </div>
    </div>
</body>
</html>

1.2 设置字体大小

为了随心所欲的控制字体大小，我们需要学习以下控制字体大小的语法。

font-size: xxpx;/*xx表示未知的数字，px表示像素大小*/

<!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>
        .font-size .one{
            font-size: 30px;
        }
        .font-size .two{
            font-size: 10px;
        }
    </style>
</head>
<body>
    <div class="font-size">
        <div class="one">
            大大大
        </div>
        <div class="two">
            小小小
        </div>
    </div>
</body>
</html>

image.png

注意：

  1. 不同的浏览器默认字号是不同的，所以我们在处理字体大小是最好给一个明确的值。
  2. 注意单位为px。

1.3 设置字体粗细

语法格式：

font-weight: bold;
font-weight: 700;

在设置字体粗细时，可以使用数字来表示，也可以使用单词来表示。
取值范围[100,900]

<!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>
        .font-weight .one{
            font-weight: 900;
        }
        .font-weight .two{
            font-weight: 100;
        }
    </style>
</head>
<body>
    <div class="font-weight">
        <div class="one">
            粗粗粗
        </div>
        <div class="two">
            细细细
        </div>
    </div>
</body>
</html>

image.png

1.4 设置字体样式

有时候我会要求字体变成粗，又有时我们又想要字体变倾斜
这里的倾斜就是字体样式。
语法：

font-style: italic;/*倾斜*/
font-style: normal;/*正常*/

<!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>
        .font-weight .one{
            font-style: normal;
        }
        .font-weight .two{
            font-style: italic;
        }
    </style>
</head>
<body>
    <div class="font-weight">
        <div class="one">
            我是直的
        </div>
        <div class="two">
            我是弯的（
        </div>
    </div>
</body>
</html>

image.png

2. 文本属性

文本有很多属性，比如文本的颜色、文本的对齐、文本的装饰、文本的缩进。
下面就让我们开始文本属性的学习。

2.1 知识补充-认识RGB

众所周知，显示屏会显示颜色的都是由RGB三原色组成的，由它们构成我们看到的所有颜色。
如果你不了解，接下来让我们认识RGB
什么是RGB
我们的显示屏是由非常多的像素组成的，每个像素可以被视为一个极小的点，这个点能反映一个具体的颜色。我们使用R(red),G(green),B(blue)的方式来表示颜色，这三种颜色按照不同的比例搭配们就可以混合出各种颜色，使用称为3原色。
计算机中针对R\G\B三个的分量，分别使用一个字节表示（8个比特位，表示的范围是0-255，16进制表示00-FF）.
数值越大，表示该分量的颜色就越浓，255，255，255表示白色，0，0，0表示黑色。

2.2 设置文本颜色

设置文本颜色由3种格式：

  1. 直接写单词。
  2. 16进制写法
  3. RGB方式
color:red;
color:#ff0000;
color:rgb(255,0,0);

<!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>
        .color{
            color: pink;
        }
    </style>
</head>
<body>
    <div class="color">
        你能教教小菲怎么骂人吗？
        后面忘了。
    </div>
</body>
</html>

image.png

2.3 文本对齐

每次写论文，都有各种对齐格式要求，但是都是在word上完成的，这次使用CSS看看。
语法：

text-align:[值];
  • center：居中对齐。
  • left：左对齐。
  • right：右对齐。
<!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>
        h1{
            color: red;
            text-align: center;
        }
        .text-align .one{
            text-align: center;
        }
        .text-align .two{
            text-align: left;
        }
        .text-align .three{
            text-align: right;
        }
    </style>
</head>
<body>
    <h1>虚拟偶像推荐</h1>
    <div class="text-align">
        <div class="one">
            星瞳_Official
        </div>
        <div class="two">
            永雏塔菲
        </div>
        <div class="three">
            猫雷NyaRu_Official
        </div>
    </div>
</body>
</html>

image.png

2.4 文本装饰

常用的文本装饰有：下划线、上划线、删除线。

text-decoration:[值];
  • underline：下划线。
  • none：无。(可以取消链接的下划线)
  • overline：上划线。
  • line-through：删除线。
<!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>
        .text-decorate .one {
        text-decoration: none;
        }
        .text-decorate .two {
        text-decoration: underline;
        }
        .text-decorate .three {
        text-decoration: overline;
        }
        .text-decorate .four {
        text-decoration: line-through;
        }
        </style>
</head>
<body>
    <div class="text-decorate">
        <div class="one">啥都没有</div>
        <div class="two">下划线</div>
        <div class="three">上划线</div>
        <div class="four">删除线</div>
    </div>
</body>
</html>

image.png

2.5 文本缩进

控制段落的首行缩进。

text-indent: [值];
  • 单位可以使用px或者em。
  • em表示当前元素的文字大小，更合适。
  • 缩进可以是负的，表示左缩进。
<!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 {
            color: pink;
            text-indent: 2em;
        }
        .two {
            color: pink;
            text-indent: -2em;
        }
    </style>
</head>

<body>
    <div class="one">神仙颜值永雏塔菲💙人间理想永雏塔菲💙
        温柔体贴永雏塔菲💙治愈微笑永雏塔菲💙
        不可替代永雏塔菲💙深得我心永雏塔菲💙
        星辰皓月永雏塔菲🔵星光闪闪永雏塔菲🔵
        一见钟情永雏塔菲🔹宝藏女孩永雏塔菲🔹
        今生挚爱永雏塔菲🔷余生只爱永雏塔菲🔷有永雏塔菲的日常皆是奇迹他那湛蓝的双眸仿佛能装下星辰大海永雏塔菲我爱你虽然我们无法相见但是我相信总有一天我们会见面的你就是我的精神支柱我的世界没有你将会是一片黑暗是你带我走出的低谷期是你永雏塔菲让我对未来有了希望无论别人如何议论我我都还是喜欢你永雏塔菲我爱你😍😍😍😘😘😘🥰🥰🥰😭😭😭
    </div>
    <div class="two">神仙颜值永雏塔菲💙人间理想永雏塔菲💙
        温柔体贴永雏塔菲💙治愈微笑永雏塔菲💙
        不可替代永雏塔菲💙深得我心永雏塔菲💙
        星辰皓月永雏塔菲🔵星光闪闪永雏塔菲🔵
        一见钟情永雏塔菲🔹宝藏女孩永雏塔菲🔹
        今生挚爱永雏塔菲🔷余生只爱永雏塔菲🔷有永雏塔菲的日常皆是奇迹他那湛蓝的双眸仿佛能装下星辰大海永雏塔菲我爱你虽然我们无法相见但是我相信总有一天我们会见面的你就是我的精神支柱我的世界没有你将会是一片黑暗是你带我走出的低谷期是你永雏塔菲让我对未来有了希望无论别人如何议论我我都还是喜欢你永雏塔菲我爱你😍😍😍😘😘😘🥰🥰🥰😭😭😭
    </div>
</body>

</html>

image.png

2.6 设置行高

行高指的是上下文行之间的基线距离。
HTML中展示文字涉及到这几个基准线：

  • 顶线
  • 中线
  • 基线
  • 底线
    image.png

语法：

line-height:[值];

注意：行高=上边距+下边距+字体大小。

上下边距是相同的，此处字体大小是16px，行高40px，上下边距分别是12px。

<!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>
        .line-height .one {
            line-height: 40px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="line-height">
        <div>
            上面行
        </div>
        <div class="one">
            中间行
        </div>
        <div>
            下面行
        </div>
    </div>
</body>

</html>

image.png

实现文字居中对齐,行高等于元素高度即可。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

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

</html>

image.png

3. 总结

感谢你看到这里，如果文章对你有帮助就点个赞吧~

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
CSS 前端
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论（0）

抱歉，系统识别当前为高风险访问，暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称，即可参与社区互动！

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

    确认 取消

    目录

    加入云驻计划，成为创作者

    • 华为云周边好礼
    • 免费体验产品
    • 特殊身份标识
    • 线下官方门票
    • 内部专家零距离
    • 与10000+优质创作者共同成长
    立即加入