devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

设置文本样式（下）_样式中设置在显示文字内容中有划线的属性是( ),比如设置下划线、上划线、删除线等

作者：我家自动化 | 2024-03-20 01:17:47

赞

踩

样式中设置在显示文字内容中有划线的属性是( ),比如设置下划线、上划线、删除线等

CSS文本外观属性

color：文本颜色

color属性用于定义文本颜色，其实就是设置字体颜色。据我所知共有三种方式可以设置：

  1. 如果你英语比较好，可以使用单词，red、blue、green等等，让我印象最深的是skyblue——天蓝色。呜呜呜，第一次作业就用十六进制找，一直没找到。

  1. 十六进制，例如：#FF0000、#FF6600、#D51314等，后面会教你它的组成部分以及缩写。

  1. RGB代码，例如红色也可以表示为rgb(255,0,0)，或rgb(100%,0%,0%)。实际上RGB就是red，green，blue的首字母缩写，括号里的也是按顺序，数值代表这个颜色多少，然后三个混合会得到的最终颜色就是你设置的颜色。

举个例子：把一段<p>标签定义的段落文本，也就是里面的文字设置为红色。

  1. p{
  2.     color: red;
  3. }                            /*这对应第一种方法*/
  4.  
  5. p{
  6.     color: #FF0000;
  7. }                            /*这对应第二种方法*/
  8.  
  9. p{
  10.     color: rgb(255,0,0);
  11. }                            /*这对应第三种方法*/

注意：

如果使用RGB百分比颜色值，取0也 不能省略百分号，必须写成0%。

颜色值的缩写：

在十六进制中，颜色值是由#开头的6位十六进制数值组成，每两位为一个颜色分量，按顺序分别为红、绿、蓝3个分量。当这3个分量两位数值各自相同就可以合并成一个，例如#FF6600就可以写成#F60，#FF0000就可以写成#F00，#FFFFFF可以写成#FFF。

也就是说#后面加红绿蓝三个数值来调色。F是十六进制最大的值，也就是加满，所以#F00就是红色。而且我个人发现和rgb还是有联系的，#F00中的F是两个F缩写，如果不缩写看起来就是两个F相乘，F代表16，那16乘以16就是256，又因为在计算机里面是从0开始的，所以第256个对应的是255。从而也说明了红色在RGB里面对应的是rgb(255,0,0)。至于百分号那个嘛，除以255换成百分比就好了。

这样缩写的好处是简化代码。

letter-spacing：字间距

letter-spacing属性用于定义字间距，所谓字间距就是字符与字符之间的空白。

letter除了有“信，信封”的意思，还有“字，字母”的意思。根据这个我们很容易判断出设置这个“字间距”实际上就是设置汉字之间的距离，如果是英文的话就是设置字母与字母之间的距离。

距离的单位什么的在文章开头有写，下面直接示范一下。

  1. h2 { letter-spacing:20px;}
  2. p { letter-spacing: -0.5em;}

这里允许使用负值，默认属性为normal。上面两行代码就是分别对h2和p设置了字间距。

word-spacing：单词词间距

word-spacing属性用于定义英文单词之间的间距，对中文字符无效。

下面用一个例子来对比他们的不同：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>word-spacing和letter-spacing</title>
  6. <style type="text/css">
  7.     .letter{letter-spacing:20px;}
  8.     .word{word-spacing:20px;}
  9. </style>
  10. </head>
  11.  
  12. <body>
  13. <p class="letter">letter-spacing（字母间距）</p>
  14. <p class="word">word spacing word spacing（单词间距）</p>
  15. </body>
  16. </html>

效果图如下：

line-height：行间距

line-height属性用于设置行间距，就是行与行之间的距离。

用法都是和前面两个相通的，有不懂的在评论区留言或者私信我。直接看例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>行高line-height的使用</title>
  6. <style type="text/css">
  7.     .one{
  8.         font-size: 16px;
  9.         line-height: 108px;
  10.         background-color: aqua;
  11.     }
  12.     .two{
  13.         font-size: 12px;
  14.         line-height: 4em;
  15.         background-color: gold;
  16.     }
  17.     .three{
  18.         font-size: 14px;
  19.         line-height: 200%;
  20.         background-color: pink;
  21.     }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26. <p class="one">
  27.     段落1：使用像素px设置line-height。该段落字体大小为16px，line-height属性值为108px。
  28. </p>
  29. <p class="two">
  30.     段落2：使用相对值em设置line-height。该段落字体大小为12px，line-height属性值为4em。
  31. </p>
  32. <p class="three">
  33.     段落3：使用百分比%设置line-height。该段落字体大小为14px，line-height属性值为200%。
  34. </p>
  35. </body>
  36. </html>

效果如下：

背景颜色的高度就是行高！

text-transform：文本转换

用法格式都是一样相通的

text-transform属性用于控制英文字符的大小写，可用属性如下表：

属性值

描述

none

不转换（默认值）

capitalize

首字母大写

uppercase

全部字符转换为大写

lowercase

全部字符转换为小写

text-decoration：文本装饰

text-decoration属性用于设置文本的 下划线、上划线、删除线等装饰效果，其可用属性如下表：

属性值

描述

none

没有装饰（正常文本默认值）

underline

下划线

overline

上划线

line-through

删除线

举个例子演示一下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>文本装饰text-decoration</title>
  6. <style type="text/css">
  7.     .one{text-decoration:underline;}
  8.     .two{text-decoration:overline;}
  9.     .three{text-decoration:line-through;}
  10.     .four{text-decoration:underline line-through;}
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <p class="one">设置下划线（underline）</p>
  16. <p class="two">设置上划线（overline）</p>
  17. <p class="three">设置删除线（line-through）</p>
  18. <p class="four">同时设置下划线和删除线（underline line-through）</p>
  19. </body>
  20. </html>

效果如下：

由此可知，text-decoration可以赋多个值，例如上面的“同时设置下划线和删除线”，中间用空格隔开。

text-align：水平对齐方式

text是文本的意思，你可以理解为文字。align是水平对齐的意思，如果在<img>标签加上align就是设置图片水平对齐方式。text-align这个属性就是对齐文字的。

它的属性值总共三个：

属性值

描述

left

左对齐（默认值）

right

右对齐

center

居中对齐

举个例子：

h2{ text-align: center;}

这行代码就是让h2标签的内容居中对齐。

注意：

  1. text-align属性仅适用于块级元素，对行内元素无效。

  1. 用CSS设置图像水平对齐，可以添加父标签（例如<p>），然后对父标签使用text-align属性。

text-indent：首行缩进

indent就是缩进的意思，简单的来说就是写作文的自动空格，建议使用em倍数作为单位，比如属性值等于2em就是说这一段自动空两格。

下面举个例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>首行缩进 text-indent</title>
  6. <style type="text/css">
  7.     p{font-size: 14px;}
  8.     .one{text-indent: 2em;}
  9.     .two{text-indent: 50px;}
  10. </style>
  11. </head>
  12.  
  13. <body>
  14. <p class="one">
  15.     这是段落1中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落1使用text-indent: 2em；
  16. </p>
  17. <p class="two">
  18.     这是段落2中的文本，text-indent属性可以对段落文本设置首行缩进效果，段落2使用text-indent: 50px；
  19. </p>
  20. </body>
  21. </html>

效果如下：

为了让大家更清晰的看到效果，我放大4倍才截的图，有直接想用以上代码尝试的C友们，记得Ctrl加滑轮放大看效果哦！

white-space：空白符处理

在你使用HTML制作网页时，不管你这两个文字之间按了多少个空格键，实际上只会显示一个空格的空白。有如下三个属性值来处理这个空白。

属性值

描述

normal

常规（默认值），文本的空格空行无效，也就是说无论有多少个空格最终只有一个，到区域边界会自动换行。空格空行无效!

pre

预格式化，就是按原来的格式保留，和你直接用word什么的一样，几个空格就会显示几个空格的空白，原样显示。空格空行有效！

nowrap

空格空行无效，强制不能换行，除非遇到强制换行标签<br />。否则超出边界也不换行，超出页面会自动增加一个滚动条，你得拖动它才能看得到。

再举个例子更直观：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>white-space空白符处理</title>
  6. <style type="text/css">
  7.     .one{white-space: normal;}
  8.     .two{white-space: pre;}
  9.     .three{white-space: nowrap;}
  10. </style>
  11. </head>
  12.  
  13. <body>
  14. <p class="one">
  15.     这个               段落中       有很多
  16.     空格。此段落应用white-space: normal;
  17. </p>
  18. <p class="two">
  19.     这个               段落中       有很多
  20.     空格。此段落应用white-space: pre;
  21. </p>
  22. <p class="three">
  23.     此段落应用white-space: nowrap;。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。这是一个较长的段落。
  24. </p>
  25. </body>
  26. </html>

效果如下：

最下面那个滚动条一个知道是啥吧哈哈哈哈，拖动它才能看到没有显示的部分。这个自行复制代码去探索哦~，因为我还不会做GIF动态图哈哈哈哈。

text-shadow：阴影效果

这个是CSS3新增属性，shadow就是阴影的意思，基本上很多属性都可以直译，所以后面能直译的我就不赘述啦！

先看格式：

选择器{text-shadow: h-shadow v-shadow blur color;}

其中h一般都是代表水平的东西，比如h-shadow就是水平阴影的距离，v一般都是代表垂直的，其中valign就是设置垂直对齐方式，同理，v-shadow就是垂直方向的阴影距离。blur代表模糊半径，color不用说就知道是颜色，这里属性是text-shadow，所以属性值里面的颜色设置的就是阴影的颜色。

举个例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>text-shadow属性</title>
  6. <style type="text/css">
  7.     P{
  8.         font-size: 50px;
  9.         text-shadow: 10px 10px 10px red;    /*设置文字阴影的距离、模糊半径和颜色*/
  10.     }
  11.     h2{
  12.         font-size: 32px;
  13.         text-shadow: 10px 10px 10px red,20px 20px 20px green;    /*红色和绿色的投影叠加*/
  14.     }
  15. </style>
  16. </head>
  17.  
  18. <body>
  19. <p>Hello CSS3</p>
  20. <h2>Hello CSS3</h2>
  21. </body>
  22. </html>

效果如下：

注意：

阴影的水平或垂直距离可以设为负值（负值就是方向不一样，这里是向右和向下为正，向左和向上为负），但 阴影的模糊半径参数只能设为正值，并且数值越大，阴影向外模糊的范围也就越大。

多个阴影叠加中间用逗号隔开。

text-overflow：标示对象内溢出文本

text-overflow属性也是CSS3新增属性，用于处理溢出的文本，也就是超出框框之外的文字，也可以边界之外，就是之前演示那个 要拖动滚动条才能看得到的文字部分。

格式如下：

选择器{text-overflow: 属性值; }

常用取值如下：

属性值

描述

clip

修剪溢出文本，不显示省略标签“…”

ellipsis

用省略标签“…”替代被修剪文本，省略标签插入位置是最后一个字符。

举个例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>text-overflow属性</title>
  6. <style type="text/css">
  7.     p{
  8.         width: 200px;
  9.         height: 100px;
  10.         border: 1px solid #000;
  11.         white-space: nowrap;        /*强制文本不能换行*/
  12.         overflow: hidden;            /*修剪溢出文本*/
  13.         text-overflow: ellipsis;    /*用省略标签标示被修剪的文本*/
  14.     }
  15.     h2{
  16.         width: 200px;
  17.         height: 100px;
  18.         border: 1px solid #000;
  19.         white-space: nowrap;        /*强制文本不能换行*/
  20.         text-overflow: clip;    /*不用省略标签标示被修剪的文本*/
  21.     }
  22. </style>
  23. </head>
  24.  
  25. <body>
  26.     <p>
  27.         把很长的一段文本中溢出的内容隐藏，出现省略号
  28.     </p>
  29.     <h2>
  30.         把很长的一段文本中溢出的内容不隐藏的结果就是这样的。。。。。
  31.     </h2>
  32. </body>
  33. </html>

效果如下：

对比一下就应该知道什么是溢出了吧哈哈哈哈哈哈，还有省略号的位置。

还有哦，要实现上面第一个用省略号标示的效果，必须有三个样式同时使用，缺一不可。分别是：

“white-space:nowrap;”（样式强制文本不换行）

“overflow:hidden;”（样式隐藏溢出文本）

“text-overflow:ellipsis;”（样式显示省略标签）

word-wrap属性

这个也是CSS3的新增属性，用于实现长单词和URL地址的自动换行，格式如下：

选择器{ word-wrap: 属性值;}

属性值如下：

属性值

描述

normal

只在允许的断字点换行（浏览器保持默认处理）

break-word

在长单词或URL地址内部进行换行

举个例子：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>word-wrap属性</title>
  6. <style type="text/css">
  7.     p{
  8.         width: 100px;
  9.         height: 100px;
  10.         border: 1px solid #000;
  11.     }
  12.     .break_word{word-wrap: break-word;}     /*网址在段落内部换行*/
  13. </style>
  14. </head>
  15.  
  16. <body>
  17. <span>
  18.     word-wrap:normal;
  19. </span>
  20. <p>
  21.     网页平面ui设计学院http://icd.XXXXXXX.cn/
  22. </p>
  23. <span>
  24.     word-wrap: break-word;
  25. </span>
  26. <p class="break_word">
  27.     网页平面ui设计学院http://icd.XXXXXXXXX.cn/
  28. </p>
  29. </body>
  30. </html>

效果如下：

上面那个就是浏览器的默认处理，下面那个是URL地址换行的样式。

目前有关文本设置的都在这里啦~下面是链接跳转区：

点击链接直达我的主页：作者的主页；

往期内容：

设置文本样式（上）；

CSS核心基础内容；

认识CSS3；

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/269619
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号