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

相关阅读:
Mall脚手架总结(五) —— SpringBoot整合MinIO实现文件管理
 SpringBoot SpringBoot 基础篇 3 SpringBoot 整合第三方技术 3.3 SpringBoot 整合 Mybatis
Python多字段排序函数——cmp_to_key（）【LeetCode50天刷题计划寒假特别版（Day 1 — 最大数（11.40-12.20）】
【心理学】2022-08-08 日常生活问题回答
 Goby 漏洞发布｜Junos webauth_operation.php 文件上传漏洞（CVE-2023-36844）
PyTorch深度学习基础之Tensor对象及其应用的讲解及实战（附源码简单易懂包括分段映射矩阵乘法随机数等等）
像用Excel一样用Python：pandasGUI
数字化转型导师鹏：政府数字化转型政务服务类案例研究
 python每日一练(7)
Android webview加载网页实时调试
原文地址：https://blog.csdn.net/SSS4362/article/details/125454872