css基本样式之文本样式

最新推荐文章于 2024-09-13 10:46:15 发布

SSS4362

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量179

点赞数 1

分类专栏： java web基础知识

本文链接：https://blog.csdn.net/SSS4362/article/details/125454872

版权

css基本样式文本样式前端

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

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
*/

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>

3.设置文本缩进

3.1语法

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

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>

4.设置字体颜色

4.1 语法(特殊)

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

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>

5.设置字体水平对齐

5.1 语法

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

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>