当前位置： 首页 > news >正文

CSS文本外观属性(12个案例+代码实现+效果图)

news 2025/5/14 14:27:18

目录

1.color：文本颜色

案例：定义不同的字体颜色

代码

效果

2.letter-spacing:字间距

案例：使用letter-spacing设置字体间的距离

1)代码

2)效果

3.word-spacing:单词间距

案例：设置单词之间的间距

1）代码

2）效果

4.line-height:行间距

案例：通过line-height设置行间距

1）代码

2）效果

5.text-transform:文本转换

案例：使用text-transform对字母进行转换

1）代码

2）效果

6.text-decoration：文本装饰

案例：使用text-decoration对文本进行装饰

1）代码

2）效果 

7.text-align:文字水平对其方式

案例：使用text-align对文本位置进行控制

1）代码

2）效果

8.text-indent:首行缩进

案例:使用text-indent:控制首行缩进

1）代码

2）效果

9.white-space:空白符处理

案例：使用white-space处理文字

1）代码

2）效果

10.text-shadow:阴影效果

案例：为文字添加阴影效果

1）代码

2）效果

11.text-overflow:溢出文本处理

案例：文本溢出处理

1）代码

2）效果

12.word-wrap：自动换行设置

案例:使用word-wrap做换行处理

1）代码

2）效果

1.color：文本颜色

  • 预定义颜色值 , red ,green ,blue ,pink ,yellow等,
  • 十六进制定义
    • #f45 (三位十六进制)
    • #456789 (六位十六进制)
  • RGB代码方式定义

案例：定义不同的字体颜色

使用预定义，十六进制，RGB，定义字体颜色

代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>color定义不同的字体颜色</title>

</head>

<body>

    <!-- 通过预定义颜色 -->

    <h1 style="color: blue;">这个是蓝色字体</h1>

    <h1 style="color: red;">这个是红色字体</h1>

    <h1 style="color: green;">这个是绿色字体</h1>

    <hr size="5" color="red">

   

    <!-- 通过# 定义颜色 -->

     <h1 style="color: #ec9f9f;">这个是#ec9f9f色字体</h1>

     <h1 style="color: #00ff00;">这个是#00ff00字体</h1>

     <h1 style="color: #5959da;">这个是#5959da字体</h1>

     <hr size="5" color="red">

     <!-- 通过rgb定义颜色 -->

     <h1 style="color: rgb(170, 241, 77);">这个是浅绿字体</h1>

     <h1 style="color: rgb(228, 231, 10);">这个是黄色字体</h1>

</body>

</html>

效果

2.letter-spacing:字间距

  letter-spacing：这个属性定义了字符之间的间距，可以用来增加或减少字母间的距离。正值会使字符间距离变大，负值则会缩小它们之间的距离.

案例：使用letter-spacing设置字体间的距离

1)代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>letter-spacing</title>

    <style>

        .myClassStyle{

            letter-spacing: 10px;

        }

        .myClassTwoStyle{

            letter-spacing: 30px;

        }

    </style>

</head>

<body>

    <!-- 设置字体间的间距为10px -->

    <p class="myClassStyle">

        这是第一段文字<br>

        this is my first demo

    </p>

    <hr size="5" color="red"/>

    <!-- 设置字体间的间距为30px -->

    <p class="myClassTwoStyle">

        这是第二段文字<br>

        this is my secont demo

    </p>

   

</body>

</html>

2)效果

3.word-spacing:单词间距

  word-spacing：该属性增加了单词之间的空白量，通常用来调整文本中的词间距。它只影响空格的大小，并不会改变其他类型的空白符

案例：设置单词之间的间距

注：&nbsp;和空格都能够被设置间距

1）代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>word-space设置单词之间的间距</title>

    <style>

        .myClassStyle{

            word-spacing: 50px;

        }

        .myClassTwoStyle{

            word-spacing: 100px;

        }

    </style>

</head>

<body>

   

    <p class="myClassStyle">

        这是第一段文字&nbsp;张三

    </p>

    <hr size="5" color="red"/>

    <p class="myClassTwoStyle">

        这是第二段文字 word space name xiaojiu张三

    </p>

       

   

</body>

</html>

2）效果

4.line-height:行间距

  line-height：此属性指定了行与行之间的垂直间距，即行高。它可以是具体的数值、百分比或是相对于字体大小的倍数

案例：通过line-height设置行间距

1）代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>line-height设置行高</title>

    <style>

        .myClassStyle{

            line-height: 50px;

        }

        .myClassTwoStyle{

            line-height: 80px;

        }

    </style>

</head>

<body>

    <p class="myClassStyle">

        这是第一段文字<br>

        这是里面的内容

    </p>

    <hr size="5" color="red"/>

    <p class="myClassTwoStyle">

        这是第二段文字<br>

        这是里面的内容

    </p>

</body>

</html>

2）效果

可以看到行与行之间的垂直距离明显变大

5.text-transform:文本转换

  text-transform：允许你控制文本的大小写，例如全部转换为大写（uppercase）、小写（lowercase），或者首字母大写（capitalize）

案例：使用text-transform对字母进行转换

1）代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>text-transform-控制文本字母</title>

    <style>

        .myClassStyle{

            text-transform: capitalize;

        }

        .myClassTwoStyle{

            text-transform: lowercase;

        }

        .myClassThreeStyle{

            text-transform: uppercase;

        }

    </style>

</head>

<body>

    <p>这是默认样式 this is normal</p>

    <p class="myClassStyle">这是首字母大写 mySchool</p>

    <p class="myClassTwoStyle">这是小写 THIS is LOWERCASE </p>

    <p class="myClassThreeStyle">这是大写 this is uppercase</p>

   

</body>

</html>

2）效果

第二行的首字母变为大写

第三行的大写字母全部变为小写，小写字母不变

第四行的小写字母全部变为大写字母

6.text-decoration：文本装饰

  text-decoration：用于设置或删除文本装饰效果，如下划线（underline）、上划线（overline）和贯穿线（line-through）等

案例：使用text-decoration对文本进行装饰

1）代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>text-decooration：文本装饰</title>

    <style>

        .myClassStyle{

            /**

             * underline:下划线

             */

            text-decoration: underline;

        }

        .myClassTwoStyle{

            /**

             * overline:上划线

             */

            text-decoration: overline;

        }

        .myClassThreeStyle{

            /**

             * line-through:删除线

             */

            text-decoration: line-through;

        }

        .myClassFourStyle{

            /**

             * blink:闪烁

             */

            text-decoration: blink;

        }

        .myClassFiveStyle{

            /**

             * none:无

             */

            text-decoration: none;

        }

    </style>

</head>

<body>

    <h1 class="myClassStyle">这是下划线</h1>

    <hr size="5" color="red">

    <h1 class="myClassTwoStyle">这是上划线</h1>

    <hr size="5" color="green">

    <h1 class="myClassThreeStyle">这是删除线</h1>

    <hr size="5" color="blue">

    <h1 class="myClassFourStyle">这是闪烁</h1>

    </hr>

    <!-- 去除样式 -->

    <a href="http://www.baidu.com" target="_blank" class="myClassFiveStyle">百度一下</a>

   

</body>

</html>

2）效果 

7.text-align:文字水平对其方式

  text-align：指定元素内文本内容的水平对齐方式，包括居左（left）、居右（right）、居中（center）和两端对齐（justify）

案例：使用text-align对文本位置进行控制

1）代码

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>text-align对文本进行控制</title>

        <style>

            .myClassStyle{

                /**

                * center:居中

                */

                text-align: center;

            }

            .myClassTwoStyle{

                /**

                * right:右对齐

                */

                text-align: right;

            }

            .myClassThreeStyle{

                /**

                * left:左对齐

                */

                text-align: left;

            }


 

        </style>

    </head>

    <body>

        <p class="myClassOneStyle">这是文本居中对齐方式</p>

        <hr color="red" size="5">

        </hr>

        <p class="myClassTwoStyle">这是文本右对齐方式</p>

        <hr color="green" size="5">

        </hr>

        <p class="myClassThreeStyle">这是文本左对齐方式</p>

        <hr color="blue" size="5"></hr>

       

    </body>

    </html>

2）效果

8.text-indent:首行缩进

  text-indent：设置段落首行的缩进量。通常用于文章排版中，给每个段落的第一行创建一个视觉上的起点

案例:使用text-indent:控制首行缩进

1）代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用text-indent控制首行缩进</title><style>.myClassStyle {text-indent: 50px;}.myClassTwoStyle {text-indent: 2em;}</style>
</head><body><p class="myClassStyle">text-indent：设置段落首行的缩进量。通常用于文章排版中，给每个段落的第一行创建一个视觉上的起点.使用px控制</p><hr size="5" color="red" /><p class="myClassTwoStyle">text-indent：设置段落首行的缩进量。通常用于文章排版中，给每个段落的第一行创建一个视觉上的起点.使用em控制</p></body></html>

2）效果

9.white-space:空白符处理

  white-space：决定了如何处理元素内的空白字符序列，以及是否自动换行。常见的值有normal, pre, nowrap, pre-wrap, 和 pre-line

案例：使用white-space处理文字

  1. pre 值表示保留空白字符序列，不进行换行。

  2. pre-wrap 值表示保留空白字符序列，并进行换行。

  3. pre-line 值表示不保留空白字符，自动换行。

1）代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>white-space-空白符处理</title><style>.myClassStyle{background-color: aqua;width: 300px;height: 300px;white-space: pre;}.myClassTwoStyle{background-color: blue;width: 300px;height: 300px;white-space: pre-wrap;}.myClassThreeStyle{background-color: brown;width: 300px;height: 300px;white-space: pre-line;}</style>
</head>
<body><div class="myClassStyle">white-space：决定了如何处理元素内的空白字符序列，以及是否自动换行。pre 值表示保留空白字符序列，不进行换行。</div></div><div class="myClassTwoStyle">white-space：决定了如何处理元素内的空白字符序列，以及是否自动换行。pre-wrap 值表示保留空白字符序列，并进行换行。</div><div class="myClassThreeStyle">white-space：决定了如何处理元素内的空白字符序列，以及是否自动换行。pre-line 值表示不保留空白字符，自动换行。</div></body>
</html>

2）效果

10.text-shadow:阴影效果

  text-shadow：向文本添加阴影效果，可以通过指定颜色、偏移量及模糊程度来定制阴影样式

text-shadow 参数解释

  1. 水平偏移 (horizontal offset):

    • 第一个值：5px
    • 表示阴影在水平方向上的偏移量。正值表示向右偏移，负值表示向左偏移。

  2. 垂直偏移 (vertical offset):

    • 第二个值：5px
    • 表示阴影在垂直方向上的偏移量。正值表示向下偏移，负值表示向上偏移。

  3. 模糊半径 (blur radius):

    • 第三个值：5px
    • 表示阴影的模糊程度。数值越大，阴影越模糊；数值越小，阴影越清晰。

  4. 阴影颜色 (shadow color):

    • 第四个值：#fc4c4c
    • 表示阴影的颜色。可以使用十六进制颜色值、RGB、RGBA 或者颜色名称。

案例：为文字添加阴影效果

1）代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>text-shadow:阴影效果</title><style>.myShowStyle{text-shadow: 5px 5px 5px #fc4c4c;}</style>
</head>
<body><h1 class="myShowStyle">这个是有阴影效果的</h1><h1 class="">这是是没有阴影效果的</h1></body>
</html>

2）效果

11.text-overflow:溢出文本处理

  text-overflow：当一行文本超出其容器宽度时，决定如何显示超出部分。常用值有clip（直接裁剪不显示多余部分）和ellipsis（以省略号...表示被截断的部分）

案例：文本溢出处理

1）代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>text-overflow:溢出文本处理</title><style>.myClassStyle{width: 200px;height: 50px;background-color: rgb(206, 221, 221);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.myClassTwoStyle{width: 200px;height: 50px;background-color: aqua;overflow: hidden;text-overflow: clip;white-space: nowrap;}.myClassThreeStyle{width: 200px;height: 50px;background-color: rgb(215, 230, 230);white-space: nowrap;}</style>
</head>
<body><h1 >text-overflow: ellipsis;以...代替溢出的文本</h1><div class="myClassStyle">这是文本溢出处理，使用text-overflow:ellipsis-----------------------------</div><hr size="5" color="green"></hr><h1 >text-overflow: clip;截断溢出的文本</h1><div class="myClassTwoStyle">这是文本溢出处理，使用text-overflow:clip---------------------</div><hr size="5" color="yellow"></hr><h1 >这是文本溢出不处理</h1><div class="myClassThreeStyle">这是文本溢出不处理--------------------------------------</div>
</body>
</html>

2）效果

12.word-wrap：自动换行设置

  word-wrap：在遇到很长无法分割的单词或URL地址时，此属性决定浏览器是否应该打断单词进行换行。break-word值可以让长单词在必要时被打断并换行

案例:使用word-wrap做换行处理

1）代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>word-wrap：自动换行设置</title><style>.myClassStyle{width: 200px;border: 1px solid red;word-wrap: break-word;}.myClassTwoStyle{width: 200px;border: 1px solid rgb(240, 37, 37);word-wrap: normal;}</style>
</head>
<body><h1>word-wrap:break-word;文本溢出时做换行处理</h1><div class="myClassStyle">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</div><h1>word-wrap:normal; 文本溢出时不做处理,这个时默认值</h1><div class="myClassTwoStyle">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfas</div></body>
</html>

2）效果


http://www.mrgr.cn/news/41503.html

相关文章：

  • ACP科普：SoS不是救命
  • mindsearch run 本地服务
  • 【网络安全 | Java代码审计】某Blog系统
  • vbs读取excel内容的代码-编辑代码,查找并在以下位置xls文件路径-供大家学习研究参考
  • 【AI知识点】向量空间（vector space）
  • ARTS Week 42
  • Go基础学习10-原子并发包sync.atomic的使用：CSA、Swap、atomic.Value......
  • 传知代码-一键找出图像中物体的角点（论文复现）
  • 《深度剖析：C++中实例化一个对象的必经阶段》
  • javaScript基础知识汇总
  • AR 领域的突破——微型化显示屏为主流 AR 眼镜铺平道路
  • 客厅落地台灯怎么摆放？五款客厅落地台灯款式分享
  • cGANs with Projection Discriminator
  • C0013.Clion中利用C++调用opencv打开摄像头
  • export在shell编程中有什么作用
  • 第 21 章 一条记录的多幅面孔——事务的隔离级别与 MVCC
  • 二分查找算法专题（1）
  • MedQA、MedMCQA、PubMedQA 和 MMLU数据集简介
  • 【Nacos入门到实战三】安装Nacos Server：从零开始搭建配置中心
  • Java组件化开发：jar包