HTML文本样式的使用(详解)

于山上之明月

已于 2023-12-22 21:12:03 修改

阅读量1.1k

点赞数 26

分类专栏： HTML 文章标签： html 前端

于 2023-12-15 11:15:30 首次发布

本文链接：https://blog.csdn.net/sjs52406/article/details/135009451

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

✨前言✨
本篇文章主要了解并掌握 css中的文本样式

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获，友友们有任何问题可以在评论区留言

📍文章目录📍

🍎 一，文本颜色（color）
🍎二，元素水平对齐方式(text-align)
🍎 三，首行文本的缩进(text-indent)
🍎 四，文本的行高(line-height)
🍎 五，文本的装饰(text-decoration)
🍎 六，文本垂直对齐方式（vertical-align）
🍎 七，文本阴影（text-shadow）

🍎 一，文本颜色（color）

属性	描述
RGB	十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量rgb(r,g,b) : 正整数的取值为0～255
RGBA	在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    Css 代码区-->
    <style>
        div:nth-child(1){
            color: #A983D8;
        }
        div:nth-child(2){
            color: #EEFF66;
        }
        div:nth-child(3){
            color: rgb(0,255,255);
        }
        div:nth-child(4){
            color: rgba(0,0,255,0.3);
        }
    </style>
</head>
<body>
<!-- body 代码区-->
<div>床前明月光</div>
<div>疑是地上霜</div>
<div>举头望明月</div>
<div>低头思故乡</div>
</body>
</html>

浏览效果：

在这里插入图片描述

🍎二，元素水平对齐方式(text-align)

值	描述
left	把文本排列到左边。默认值:由浏览器决定
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    css 代码区-->
    <style>
        .div{
            border: 1px black solid;
            width: 300px;
            height: 100px;
        }
        div div:nth-child(1){
            text-align: left;
        }
        div div:nth-child(2){
            text-align: right;
        }
        div div:nth-child(3){
            text-align: center;
        }
        div div:nth-child(4){
            text-align: justify;
        }
    </style>
</head>
<body>
<!--body 代码区-->
<!--这里用一个p把，里面的文本包起来，以便更好地观看效果-->
<div class="div">
    <div>1,床前明月光</div>
    <div>2,疑是地上霜</div>
    <div>3,举头望明月</div>
    <div>4,低头思故乡</div>
</div>
</body>
</html>

浏览效果：

在这里插入图片描述

🍎 三，首行文本的缩进(text-indent)

代码演示：

text-indent: 10px;
/*或者*/
text-indent: 2em;

2em, 其中是em单位, 一个em代表缩进一个文字的宽度

🍎 四，文本的行高(line-height)

代码演示：

/*取指定大小*/
line-height: 100px;
/*取百分比*/
line-height: 200%;
/*取文字大小的倍数*/
line-height: 3;

设置文本的行高取值为绝对单位或者相对单位

🍎 五，文本的装饰(text-decoration)

值	描述
none	默认值，定义的标准文本
underline	设置文本的下划线
overline	设置文本的上划线
line_through	设置文本的删除线

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    css 代码区-->
    <style>
        .div{
            border: 1px black solid;
            width: 300px;
            height: 100px;
        }
        div div:nth-child(1){
            text-decoration: none;
        }
        div div:nth-child(2){
            text-decoration: underline;
        }
        div div:nth-child(3){
            text-decoration: line-through;
        }
        div div:nth-child(4){
            text-decoration: overline;
        }
    </style>
</head>
<body>
<!--body 代码区-->
<!--这里用一个p把，里面的文本包起来，以便更好地观看效果-->
<div class="div">
    <div>1,床前明月光</div>
    <div>2,疑是地上霜</div>
    <div>3,举头望明月</div>
    <div>4,低头思故乡</div>
</div>
</div>
</body>
</html>

浏览效果：
在这里插入图片描述

🍎 六，文本垂直对齐方式（vertical-align）

值	描述
middle	文本垂直居中对齐
top	文本垂直向上对齐
bottom	文本垂直向下对齐

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    css 代码区-->
    <style>
        img{
            /*垂直居中对齐*/
            vertical-align: middle;
            /*垂直向上对齐*/
            /*vertical-align: top;*/
            /*垂直向下对齐*/
            /*vertical-align: bottom;*/
        }
    </style>
</head>
<body>
<!-- body 代码区-->
<img src="../images/book.gif" width="200px" height="120px">床前明月光</img>
</body>
</html>

浏览效果：

在这里插入图片描述

🍎 七，文本阴影（text-shadow）

text-shoadow:color x-offset y-offset blur-radius
color : 阴影颜色
x-offset ： X轴位移，用来指定阴影水平位移量
y-offset ： Y轴位移，用来指定阴影垂直位移量
blur-radius ：阴影模糊半径，代表阴影向外模糊的模糊范围

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    css 代码区-->
    <style>
        div{
            text-shadow: green 5px 5px 3px;
        }
    </style>
</head>
<body>
<!-- body 代码区-->
<div>床前明月光</div>
</body>
</html>