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

惜.己

已于 2024-10-02 20:14:47 修改

阅读量462

点赞数 7

分类专栏：前端html+css知识梳理文章标签： css 前端开发语言 vscode html5 html

于 2024-10-02 19:52:12 首次发布

本文链接：https://blog.csdn.net/2301_76862031/article/details/142680224

版权

前端html+css知识梳理专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目录

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">



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



<p class="myClassStyle">

这是第一段文字<br>

this is my first demo

</p>

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



<p class="myClassTwoStyle">

这是第二段文字<br>

this is my secont demo

</p>

</body>

</html>

2)效果

3.word-spacing:单词间距

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

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

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

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">

这是第一段文字 张三

</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处理文字

pre 值表示保留空白字符序列，不进行换行。
pre-wrap 值表示保留空白字符序列，并进行换行。
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 参数解释

水平偏移 (horizontal offset):
- 第一个值：5px
- 表示阴影在水平方向上的偏移量。正值表示向右偏移，负值表示向左偏移。
垂直偏移 (vertical offset):
- 第二个值：5px
- 表示阴影在垂直方向上的偏移量。正值表示向下偏移，负值表示向上偏移。
模糊半径 (blur radius):
- 第三个值：5px
- 表示阴影的模糊程度。数值越大，阴影越模糊；数值越小，阴影越清晰。
阴影颜色 (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>