CSS文本样式详解

1.首行缩进：text-indent
2.水平对齐：text-align
3.文本修饰：text-decoration
4.大小写：text-transform
5.行高：line-height
6.间距：letter-spacing、word-spacing
- 字间距
- 词间距

1.首行缩进：text-indent

在CSS中，我们可以使用text-indent属性来定义p元素的首行缩进

语法：

text-indent:像素值;

示例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        p {
            font-size: 14px;
            text-indent: 28px;
        }
    style>
head>
<body>
<h3>终风h3>
<p>终风且暴，顾我则笑。谑浪笑敖，中心是悼。p>
body>
html>

在这里插入图片描述

中文段落首行一般需要缩进两个字的空间。想要实现这个效果，那么text-indent值应该是font-size值的2倍

2.水平对齐：text-align

在CSS中，我们可以使用text-align属性来控制文本在水平方向上的对齐方式

语法：

text-align:取值;

text-align属性取值有3个：

在这里插入图片描述

示例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        #p1 {
            text-align: left;
        }

        #p2 {
            text-align: center;
        }

        #p3 {
            text-align: right;
        }
    style>
head>
<body>
<p id="p1"><strong>左对齐strong>:好好学习，天天向上。p>
<p id="p2"><strong>居中对齐strong>:好好学习，天天向上。p>
<p id="p3"><strong>右对齐strong>:好好学习，天天向上。p>
body>
html>

在这里插入图片描述

3.文本修饰：text-decoration

在CSS中，我们可以使用text-decoration属性来定义文本的修饰效果（下划线、中划线、顶划线）

语法：

text-decoration:取值;

text-decoration属性取值有4个：

在这里插入图片描述

示例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        #p1 {
            text-decoration: underline;
        }

        #p2 {
            text-decoration: line-through;
        }

        #p3 {
            text-decoration: overline;
        }
    style>
head>
<body>
<p id="p1">这是“下划线”效果p>
<p id="p2">这是“删除线”效果p>
<p id="p3">这是“顶划线”效果p>
body>
html>

在这里插入图片描述

案例：去除超链接下划线

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        a {
            text-decoration: none;
        }
    style>
head>
<body>
<a href="https://blog.csdn.net/Gherbirthday0916?type=blog" target="_blank">我的博客a>
body>
html>

在这里插入图片描述

使用“text-decoration:none;”去除a元素的下划线，这个技巧我们在实际开发中会大量用到。主要是因为超链接默认样式不太美观，极少网站会使用它的默认样式

4.大小写：text-transform

在CSS中，我们可以使用text-transform属性来将文本进行大小写转换。text-transform属性是针对英文而言的，因为中文不存在大小写之分

语法：

text-transform:取值;

text-transform属性取值有4个：

在这里插入图片描述

示例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        #p1 {
            text-transform: uppercase;
        }

        #p2 {
            text-transform: lowercase;
        }

        #p3 {
            text-transform: capitalize;
        }
    style>
head>
<body>
<p id="p1">rome was't built in a day.p>
<p id="p2">rome was't built in a day.p>
<p id="p3">rome was't built in a day.p>
body>
html>

在这里插入图片描述

5.行高：line-height

在CSS中，我们可以使用line-height属性来控制一行文本的高度

语法：

line-height:像素值;

示例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        #p1 {
            line-height: 15px;
        }

        #p2 {
            line-height: 20px;
        }

        #p3 {
            line-height: 25px;
        }
    style>
head>
<body>
<p id="p1">
    水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。p>
<hr/>
<p id="p2">
    水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。p>
<hr/>
<p id="p3">
    水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。p>
body>
html>

在这里插入图片描述

6.间距：letter-spacing、word-spacing

字间距

在CSS中，我们可以使用letter-spacing属性来控制字与字之间的距离

语法：

letter-spacing:像素值;

示例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        #p1 {
            letter-spacing: 0px;
        }

        #p2 {
            letter-spacing: 3px;
        }

        #p3 {
            letter-spacing: 5px;
        }
    style>
head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。p>
<hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。p>
<hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。p>
body>
html>

在这里插入图片描述

词间距

在CSS中，我们可以使用word-spacing属性来定义两个单词之间的距离

语法：

word-spacing:像素值;

示例：

DOCTYPE html>
<html lang="utf-8">
<head>
    <title>title>
    <style>
        #p1 {
            word-spacing: 0px;
        }

        #p2 {
            word-spacing: 3px;
        }

        #p3 {
            word-spacing: 5px;
        }
    style>
head>
<body>
<p id="p1">Rome was't built in a day.罗马不是一天建成的。p>
<hr/>
<p id="p2">Rome was't built in a day.罗马不是一天建成的。p>
<hr/>
<p id="p3">Rome was't built in a day.罗马不是一天建成的。p>
body>
html>

在这里插入图片描述

相关阅读:
山峰和山谷—BFS
编程中的零代码和低代码解决方案对比
 Codeforces Round #835 (Div. 4)
Socket网络编程
 （02）vite环境变量配置
 机器学习--数学库--概率统计
 Kubernetes PV与PVC 持久卷应用
 互联网摸鱼日报（2022-12-02）
几种绘制时间线图的方法
 关于《Java并发编程之线程池十八问》的补充内容
原文地址：https://blog.csdn.net/Gherbirthday0916/article/details/127111831