前端初学9 | css的文本属性

最新推荐文章于 2025-05-12 14:43:13 发布

printfbaozw

最新推荐文章于 2025-05-12 14:43:13 发布

阅读量114

点赞数

文章标签：前端 css html

本文链接：https://blog.youkuaiyun.com/printfbaozw/article/details/129202638

版权

css的文本属性

前言
一、字体大小
二、字体
三.颜色、加粗、倾斜
四、文本水平对齐
五、首行缩进，间距，文本修饰
总结

前言

本文主要介绍css中部分文本的属性，希望对你有所帮助。

一、字体大小

单位是px，浏览器中默认是16px，设计图中常用的字号是12px。
以下是代码的实例：

<!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>
        .p1{
            font-size: 13px;
        }
        .p2{
            font-size: 16px;
        }
    </style>
</head>
<body>
    <p class="p1">
        111111111111111111111
    </p>
    <p class="p2">
        222222222222222222222
    </p>
    
</body>
</html>

这部分中，我们通过更改属性“font-size”，来更改字体大小，效果如图所示。
在这里插入图片描述

二、字体

更改文本的字体，比如宋体、黑体、微软雅黑等。默认字体是微软雅黑，我们可以修改“font-family”变量，来更改。以下是代码示例。

<!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>
        .p1{
            font-size: 13px;
        }
        .p2{
            font-size: 16px;
            font-family:宋体;
        }
    </style>
</head>
<body>
    <p class="p1">
        111111111111111111111
    </p>
    <p class="p2">
        222222222222222222222
    </p>
    
</body>
</html>

运行结果为：
在这里插入图片描述
多个字体间用逗号连接，先解析第一个字体，如果没有就解析第二个，以此类推。以下是支持的字体：

宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiu
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
楷体_GB2312 KaiTi_GB2312

三.颜色、加粗、倾斜

1.颜色

我们可以用以下三种方法来改变字体颜色。
代码如下（示例）：

		.p1{
            color: red;
        }
        .p2{
            color: rgb(120, 90, 100);
        }
        .p3{
            color: #ff00ff;
        }

运行结果为：
在这里插入图片描述

2.加粗

	 .p1{
            color: red;
            font-weight: 900;
            /*
            100 细体 lighter
            400 正常 normal
            700 加粗 bold
            900 更粗体 bolder
            */
        }

我们将p1属性改为以上，就可以得到：
在这里插入图片描述
注释中数字和英文相对应，可以使用英文写法。

3.倾斜

我们用“font-style”属性来修改，属性值为：italic、oblique、normal。具体实现不做展示。

四、文本水平对齐

我们通过修改text-align来打到我们想要得到的效果，以下是代码的示例：

<!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>
        .p1{
           text-align: center; /*left center right*/
           width: 500px;
           background-color: aqua;
        }
        .p2{
            text-align: justify;/*两端对齐*/
            width: 500px;
            background-color: aqua;
        }
        .p3{
            text-align: center;
            width: 500px;
            height: 200px;
            background-color: rgb(128, 255, 0);
            line-height: 200px;
        }
    </style>
</head>
<body>
    <p class="p1">
        hello world！
    </p>
    <p class="p2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur dolores accusamus, 
        beatae iure voluptates explicabo quibusdam quisquam minus eos veritatis ut vitae 
        exercitationem dolore quasi doloribus accusantium commodi cumque tenetur?
    </p>
    <p class="p3">
        hello html
    </p>
</body>
</html>