css基本样式之文本样式

1.代表文本样式的单词

text,字体样式前面都加上text-

2.设置字体修饰(周边)

2.1 语法

text-decoration:文本修饰符;
/*
   line-through:删除线
   overline:上划线
   underline:下划线
   默认值为none,就啥都没有
   text-decoration包含text-decoration-line,
   text-decoration-style,text-decoration-color
*/
1
2
3
4
5
6
7
8
9

2.2 不加text-decoration的效果

在这里插入图片描述

2.3 加text-decoration的效果

在这里插入图片描述

2.4 源代码

<!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>text-decoration的使用(类似删除线)</title>
    <style type="text/css">
        p{
            text-decoration: line-through;
        }
    </style>
</head>
<body>
     <p>民主</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.设置文本缩进

3.1语法

text-indent:缩放的像素值;
/*
想要默认缩进2行,不建议2倍自己设置字体值大小(如:32px这种)
因为字体值会变化的,建议2em(em是每次匹配浏览器的默认文字大小
)
*/
1
2
3
4
5
6

3.2 不加text-indent的效果

在这里插入图片描述

3.3 加text-indent的效果

在这里插入图片描述

3.4 源代码

<!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>text-indent的使用(首行缩进)</title>
    <style type="text/css">
        p{
            text-indent: line-through;
            width: 150px;
            height: 150px;
            background: red;
            text-indent: 2em;
        }
    </style>
	</head>
	<body>
         <p>社会主义核心价值体系的根本性质和基本特征，反映社会主义核心价值体系的丰富内涵和实践要求</p>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

4.设置字体颜色

4.1 语法(特殊)

color:颜色名/rgb(;;);
/*
  特殊在于不用加上text-前缀
  默认是黑色
*/
1
2
3
4
5

4.2 不加color的效果

在这里插入图片描述

4.3 加color的效果

在这里插入图片描述

4.4 源代码

<!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>color属性的使用</title>
    <style type="text/css">
        p{
            color: skyblue;
        }
    </style>
</head>
<body>
     <p>核心</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5.设置字体水平对齐

5.1 语法

text-align: 水平对齐方向;
/* 
  light(左对齐),center居中,right(右对齐)
*/
1
2
3
4

5.2 不加text-align的效果

在这里插入图片描述

5.3 加text-align的效果

在这里插入图片描述

5.4 源代码

<!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>text-align的使用</title>
    <style type="text/css">
        p{
            width: 100px;
            height: 20px;
            background-color: pink;
            text-align: center;
        }
    </style>
</head>
<body>
     <p>核心</p>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

相关阅读:
电机调试说明SimpleFOC和ODrive
elasticsearch之日期类型有点怪
 2023年7月京东手机行业品牌销售排行榜（京东数据分析软件）
Django 4 和 Python 全栈开发者大师班
 Removing the Bias of Integral Pose Regression 阅读笔记
 近年电赛题目简析
 滑动窗口（单调队列）
Java基础Integer包装类
 【Python】条件语句、循环语句、pass语句的使用
 matlab中绘制维诺图（Voronoi Diagram）
原文地址：https://blog.csdn.net/SSS4362/article/details/125454872