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

embedded/2024/10/18 22:37:46/
htmledit_views">

目录

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）代码

html"><!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）代码

html"><!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）代码

html"><!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）代码

html"><!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）代码

html"><!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.ppmy.cn/embedded/121007.html

相关文章

一共有哪几种锁机制？

一共有哪几种锁机制？

在计算机科学和数据库管理中&#xff0c;存在多种锁机制以确保数据的一致性和完整性&#xff0c;同时优化并发性能。以下是一些常见的锁机制&#xff1a; 一、按功能和应用场景分类 互斥锁&#xff08;Mutex&#xff09; 基本锁机制&#xff0c;用于保护共享资源在同一时刻只能…
阅读更多...
大数据毕业设计选题推荐-热门微博数据可视化分析系统-Hive-Hadoop-Spark

大数据毕业设计选题推荐-热门微博数据可视化分析系统-Hive-Hadoop-Spark

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、PHP、.NET、Node.js、GO、微信小程序、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇…
阅读更多...
python学习记录5

python学习记录5

1 描述程序 程序可以用三种方法来描述&#xff1a;自然语言、流程图、伪代码 自然语言&#xff1a;主要使用后IPO描述&#xff0c;即描述输入&#xff0c;描述过程、描述输出。 流程图&#xff1a;使用图形、文字、线条描述程序 伪代码&#xff1a;介于汇编语言和自然语言中…
阅读更多...
基于JAVA+SpringBoot+Vue的社区养老服务平台

基于JAVA+SpringBoot+Vue的社区养老服务平台

基于JAVASpringBootVue的社区养老服务平台 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#x1f345; 哈…
阅读更多...
工具笔记之生成图表和可视化的标记语言Mermaid

工具笔记之生成图表和可视化的标记语言Mermaid

工具笔记之生成图表和可视化的标记语言Mermaid code review! 文章目录 工具笔记之生成图表和可视化的标记语言Mermaid1. 流程图2. 序列图3. 甘特图4. 类图5. 状态图6. 饼图使用方法 Mermaid 是一种用于生成图表和可视化的标记语言。它允许用户以简单的文本格式创建复杂的图表…
阅读更多...
1.1.5 计算机网络的性能指标（下）

1.1.5 计算机网络的性能指标（下）

时延&#xff1a; 指数据从网络的一端传送到另一端所需的时间。有时候也称为延迟或迟延。 总时延发送时延传播时延处理时延排队时延 发送时延&#xff1a; 又名传输时延&#xff0c;节点将数据推向信道所花的时间 数据长度/发送速率 传播时延&#xff1a; 电磁波在信道…
阅读更多...
蓝桥等级考试C++组七级真题-2022-04-23

蓝桥等级考试C++组七级真题-2022-04-23

PDF及答案回复:LQDKC720220423 单项选择题 1、C L7 (15分) 执行以下程序后&#xff0c;输出结果是( )。 int a5; int b a; cout << a << " "<< b;A 5 5 B 5 6 C 6 5 D 6 6 2、CL7(15分) 执行以下程序后&#xff0c;输出结果是() int k0; for(…
阅读更多...
Linux篇之IO多路复用

Linux篇之IO多路复用

文章目录 前言流IO操作IO阻塞多路IO多个流的IO请求处理水平触发边缘触发最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;今天介绍一下Linux中的IO多路复用机制 流 流是一种用于在程序与外部数据源&#xff08;如文件、网络连接、内存等&#xff09;之间传输数据的机制&…
阅读更多...
最新文章

Copyright @ 2022~2023