Tony学前端(九):文本到底有多少秘密?

本文共有2800字,预计阅读时间:15分钟

在文章末尾可以观看本课的视频

首先照例我们先复习一下上次都讲了哪些:

CSS基本概念:

什么是CSS、层叠是什么意思、为什么要用CSS。

CSS深入:

CSS定义、语法、选择器、创建。

CSS背景:

CSS背景颜色、背景图片。

在学习HTML时,我们曾经学习过文本的格式化,已经接触了部分CSS文本属性。今天我们就更深入的完整学习一下,看看CSS有哪些文本属性。

首先是控制文本水平对齐的text-align属性。

text-align属性会影响一个元素中的文本的水平对齐方式。要注意的有两点:

1、影响的是水平对齐方式,不涉及到垂直对齐方式。

2、影响的是元素内的文本,或者是其内部的行内元素,而对于元素内的块级元素则无效果。

text-align的取值包括:left、right、center、justify,我们来分别看一下效果:

left为水平左对齐,也是默认对齐方式:

right为水平右对齐:

center为居中对齐:

justify为两端对齐:

对于justify需要注意的是必须文本的长度达到或超过了容器的宽度(通俗的说就是发生了换行)才能有两端对齐的效果,否则还是左对齐。譬如以上示例,如果内容仅仅是“Hello world”的话,由于文字太少,那么即使设置了text-align:justify,其依然还是会左对齐。

思考一个问题,如果是行内元素,那么text-align属性是否有效?

接下来是控制文本缩进的text-indent属性。

我们写作文,段落的第一行总是要空两格,这个就是缩进,就像这样:

要实现缩进效果,如果用打空格的方式来解决的话,那就太落伍了,CSS中有专门针对文本缩进的属性text-indent,该属性可以取正值,此时文本向右缩进;也可以取负值,此时首行文本向左伸出,感觉就像是悬浮效果。

默认text-indent的值为0,不缩进:

设置为正值(text-indent:100px):

设置为负值(text-indent:-100px):

首行悬在余下部分之上

text-indent的单位可以是我们很熟悉的px,也可以是暂时还很陌生的em,另外也可以是百分数:

text-indent:100px

text-indent:3em

text-indent:20%

要注意的是,如果设置为百分数,那么元素缩进值是相对于父元素宽度的!

如以上代码,

标签的文字实际上是缩进100px(500px*20%),而不是200px。

另外text-indent是继承父元素的:

以上代码中的

标签的文字缩进继承父元素的设置,也是缩进100px。

最后一点要注意行内元素是不能设置缩进的

接下来谈谈字间距词间距

先来说说什么是字间距?什么又是词间距?

字间距就是单个字母(英文)或者汉字(中文)之间的间隔,而词间距是单词(英文)或者空格隔开的连续文字(中文)之间的间隔。由于汉字的书写一般不会出现空格,因此词间距对于中文来说使用的不多。

英文字间距与词间距:

中文字间距与词间距:

字间距的属性名为letter-spacing,而词间距的属性名为word-spacing。两个属性均可以取正值或负值。

字间距与词间距均为默认值:

词间距为20px与默认值的比较:

字间距为20px与默认值的比较:

词间距为-20px与默认值的比较:

字间距为-20px与默认值的比较:

下面一个属性比较简单,控制文字大小写的转换。

控制字符大小写装换的属性是text-transform。该属性有三个取值:

uppercase:字符全部转换为大写。

lowercase:字符全部转换为小写。

capitalize:每个单词的首字母转换为大写。

很明显,该属性对中文无效。

接下来的属性实际上我们之间已经接触过,文本的划线装饰。

text-decoration属性可以对文本进行划线装饰,其实我们已经在HTML第二讲中的文本常用属性中讲过了,我们再来学习一下。

text-decoration的取值可以有none、underline、overline、line-through以及blink。

text-decoration的默认值是none,此时文本无划线。

如果设置为underline,则文本下方显示下划线:

设置为overline,文本上方显示上划线:

设置为line-through,文本中间显示中划线:

中划线一般在电商网站中的原价显示中应用:

text-decoration还有一个属性值为blink,本意是让文本闪烁,但是现在没有任何一个浏览器支持这个效果,因此blink只能默默的打酱油。

text-decoration属性支持多值特性,多个值用空格隔开。也就是说我们可以同时显示上划线与下划线,只要这样设置:

接下来我们谈谈文本中的空白。

之前的HTML中我们曾学习过空格的表示方法,也曾利用

标签来保留文本段落中的空白。而在CSS中white-space属性可以更灵活的来处理空白。

我们先谈谈空白,在页面的文本中有三种情况会出现空白:

1、文本中的空格。

2、文本中的换行。

3、当文本过长而引起的自动换行。

为了更灵活的处理以上三种情况,white-space可以设置多个值来处理不同的场景,我们先看以下一段代码:

在这段代码中,

标签里的内容有连续的空格,有换行,另外该文本也有可能会发生自动换行(当浏览器宽度较小时)。

white-spacing属性的取值有normal、pre-line、nowrap、pre以及pre-wrap,接下来我们对这些属性值分别做演示。

white-sapcing属性的默认值是normal,根据之前学习过的知识,我们知道在默认情况下连续的空格会合并成一个空格,另外代码里书写的换行也会被忽略,此时文本过长将会导致自动换行,因此看上去是这个效果:

如果white-spacing设置为pre-line,则空格依旧被合并,自动换行也有效,但是代码中的换行会被保留,因此之前的代码就是这个效果了:

接下来设置为nowrap,则空格被合并,代码中的换行会被忽略,同时自动换行也不允许,整个文本就是长长的一行:

设置为pre,则空格被保留,代码中的换行也被保留,但是自动换行不允许,于是就显示为这样:

最后设置为pre-wrap,空格被保留,代码中的换行也保留,自动换行也允许,效果如下:

我们做个总结:

在之前学习HTML时我们已经学习过了一些文本相关的CSS,这里再汇总回顾一下!

后面暂时没有了,今天我们其实就学习了一个东西:

文本:

对齐

缩进

间距

大小写

划线

空白

通过今天的学习以及之前掌握的知识,我们足可以应对网页中对于文本的绝大多数的样式要求。下一节我们将学习“盒子模型”,这是CSS中非常重要的一个概念,而我们将从一个国王建城堡的故事开始说起!娃娃们加油,我们的目标是星辰大海!!

点击观看本课视频,也可以在腾讯视频上搜索“Tony学前端”

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180318G1311R00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券