web前端学习（十四）——CSS3文本属性（text）的相关设置

2022-06-15 303

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： web前端学习（十四）——CSS3文本属性（text）的相关设置

1.text文本相关属性的汇总

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

1.1 color属性

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定：

· 十六进制值 - 如: ＃FF0000

· 一个RGB值 - 如: RGB(255,0,0)

· 颜色的名称 - 如: red

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      body {color: red;}
      h1 {color: #0000FF;}
      p.szh {color: rgb(255,0,255);}
    </style>
  </head>
  <body>
    <p>这是一个普通的段落，其颜色为红色（对应第7行代码）</p>
    <h1>这是一个一级标题，颜色设置为蓝色</h1>
    <p class="szh">这是一个类为&quot;szh&quot;的段落，颜色为紫色</p>
  </body>
</html>

1.2 text-align属性

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐.

当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

值	描述
left	把文本排列到左边。默认值：由浏览器决定。
right	把文本排列到右边。
center	把文本排列到中间。
justify	实现两端对齐文本效果。
inherit	规定应该从父元素继承 text-align 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      h1 {text-align: center;}
      p.message {text-align: justify;}
      p.date {text-align: right;}
    </style>
  </head>
  <body>
    <h1>CSS text-align 实例</h1>
    <p class="message">
      经过奋斗，终于拨开了云雾，见到了日出，走上了阳光大道。面对取得的成绩，不要骄傲，再接再励，继续向前行。
      原以为“得不到”和“已失去”是最珍贵的，可原来把握眼前才是最重要的。
      我很自信，自已的未来将绚丽多彩。我对未来也充满了希望。
    </p>
    <p class="date">2020 年 1 月 21 日</p>
  </body>
</html>

1.3 text-decoration属性

text-decoration属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线：

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
blink	定义闪烁的文本。
inherit	规定应该从父元素继承 text-decoration 属性的值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      h1 {text-decoration: overline;}
      h2 {text-decoration: line-through;}
      h3 {text-decoration: underline;}
      h4 {text-decoration: none}
    </style>
  </head>
  <body>
    <h1>This is heading 1.</h1>
    <h2>This is heading 2.</h2>
    <h3>This is heading 3.</h3>
    <h4>This is heading 4.</h4>
  </body>
</html>

1.4 text-transform、direction属性

text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。

可用于所有字句变成大写或小写字母，或每个单词的首字母大写。

值	描述
none	默认。定义带有小写字母和大写字母的标准的文本。
capitalize	文本中的每个单词以大写字母开头。
uppercase	定义仅有大写字母。
lowercase	定义无大写字母，仅有小写字母。
inherit	规定应该从父元素继承 text-transform 属性的值。

direction属性是用来设置文本的方向或书写的方向。

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      p.first {text-transform: uppercase;}
      p.second {text-transform: lowercase;}
      p.third {text-transform: capitalize;}
      p.fourth {direction: ltr;}
      p.fifth {direction: rtl}
    </style>
  </head>
  <body>
    <p class="first">This is a dog.</p>
    <p class="second">This is a dog.</p>
    <p class="third">This is a dog.</p>
    <p class="fourth">This is a dog.</p>
    <p class="fifth">This is a dog.</p>
  </body>
</html>

1.5 text-indent、text-shadow属性

text-indent文本缩进属性是用来指定文本的第一行的缩进。

值	描述
length	定义固定的缩进。默认值：0。
%	定义基于父元素宽度的百分比的缩进。
inherit	规定应该从父元素继承 text-indent 属性的值。

text-shadow文本阴影属性应用于阴影文本。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style>
      h1 {text-shadow: 5px 5px #00FFFF}
      p {text-indent: 35px;}
    </style>
  </head>
  <body>
    <h1>这是一个设置了文本阴影的标题</h1>
    <p>
      经过奋斗，终于拨开了云雾，见到了日出，走上了阳光大道。面对取得的成绩，不要骄傲，再接再励，继续向前行。
      原以为“得不到”和“已失去”是最珍贵的，可原来把握眼前才是最重要的。
      我很自信，自已的未来将绚丽多彩。我对未来也充满了希望。
    </p>
  </body>
</html>

1.6 letter-spacing、word-spacing属性

letter-spacing属性增加或减少字符间的空白（字符间距）

对于英语来说，letter-spacing设置的是每个字母之间的间距；而对于汉语来说，letter-spacing设置的是每个汉字之间的间距。

值	描述
normal	默认。规定字符间没有额外的空间。
length	定义字符间的固定空间（允许使用负值）。
inherit	规定应该从父元素继承 letter-spacing 属性的值。

word-spacing属性增加或减少字与字之间的空白。设置的是每个英语单词之间的间距！！！

值	描述
normal	默认。定义单词间的标准空间。
length	定义单词间的固定空间。
inherit	规定应该从父元素继承 word-spacing 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      h1 {letter-spacing: 3px;}
      h2 {letter-spacing: -2px;}
      p.one {letter-spacing: 10px;}
      p.two {word-spacing: 50px;}
    </style>
  </head>
  <body>
    <h1>This is heading 1.</h1>
    <h2>This is heading 2.</h2>
    <p class="one">这段文本中设置的字符间距为10px</p>
    <p class="two">This is a cat.</p>
  </body>
</html>

1.7 line-height属性

设置以百分比计的行高。注意： 负值是不允许的

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

小实例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>CSS简单学习</title>
    <style type="text/css">
      p.small {line-height: 70%;}
      p.big {line-height: 200%;}
    </style>
  </head>
  <body>
    <p>
      这是一个标准行高的段落。<br />
      这是一个标准行高的段落。<br />
      大多数浏览器的默认行高约为110%至120%。<br />
    </p>
    <p class="small">
      这是一个更小行高的段落。<br />
      这是一个更小行高的段落。<br />
      这是一个更小行高的段落。<br />
      这是一个更小行高的段落。<br />
    </p>
    <p class="big">
      这是一个更大行高的段落。<br />
      这是一个更大行高的段落。<br />
      这是一个更大行高的段落。<br />
      这是一个更大行高的段落。<br />
    </p>
  </body>
</html>

1.8 white-space、vertical-align属性（不再举例了。。。）

white-space属性指定元素内的空白怎样处理。

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

vertical-align属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

web前端学习（十四）——CSS3文本属性（text）的相关设置

1.text文本相关属性的汇总

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

web前端学习（十四）——CSS3文本属性（text）的相关设置

1.text文本相关属性的汇总

热门文章

最新文章

相关课程

相关电子书

相关实验场景