知识引入
1.text-indent:首行缩进
text-indent属性是用于定义首行文本的缩进,其属性值可为不同单位的数值,em字符宽度的倍数或相对于浏览器窗口宽度的百分比%,允许使用负值,建议使用em作为设置单位,下面通过一个案例来演示text-indent属性的使用方法,先写代码,如图1
图1
保存并运行代码,如图2
图2
*注意:text-indent属性仅适用于块级元素,对行内元素无效。
2.text-align:水平对齐方式
Text-align属性用于设置文本内容的水平对齐,相当于HTML中的align对齐属性,其属性值取值为以下三种。
(1)left:左对齐(默认值)。
(2)right:右对齐。
(3)center:;居中对齐。
例如设置二二级标签居中对齐,可使用以下代码。
h2{text-align:center;}
*注意:(1)text-align仅适用于块级元素,对行内元素无效。(2)如果对图像设置水平对齐,,可以为图像添加一个父标签(如<p>),然后对父标签使用text-align属性就可以实现对图像设置水平对齐。
3.white-space:空白符处理
使用HTML制作网页时,不论源代码中有多少空格,在浏览器中只会显示一个字符的空白,在CSS中,使用white-space属性可设置空白符的处理方法,其属性值如下。
(1)normal:常规显示(默认值),文本中的空格,空行无效,满行(到达区域边界)后自动换行。
(2)pre:预格式化,按文档的书写格式保留空格,空行原样显示。
(3)nowrap:空格空行无效,强制文本不能换行,除非遇到换行标签<br/>。内容超出元素的边界也不会换行,若超出浏览器界面则会自动添加滚动条。
下面通过一个案例来演示一下white-space属性的使用方法。
先写代码,如图3
图3
保存显示如图4
图4
从图4和图3可以看出,使用white-space中的pre属性值可以看出定义的文本会保留原有的空白符,在浏览器中会原样显示,使用white-space中的rowrap属性,浏览器定义的文本不会换行,并且浏览器出现了滚动条。
4.text-shadow:阴影效果
Text-shadow属性用于给文本添加阴影效果,其属性的基本格式如下。
选择器{text-shadow:h-shadow v-shadow bluer color;}
在上面的语法格式中,h-shadow用于设置阴影水平偏移的距离,v-shadow用于设置阴影垂直偏移的距离,blur用于设置模糊的半径,color用于设置阴影颜色。
下面通过一个案例来演示一下text-shadow的使用方法。
先写代码,如图5
图5
保存并运行如图6
图6
*注意:(1)阴影的水平或垂直偏移距离参数可以设为负值,但阴影的模糊半径参数只能设置为正值,并且数值越大阴影向外模糊的范围也就越大。(2)可以使用text-shadow属性给文字添加多个阴影,从而产生阴影叠加的效果,方法为设置多组阴影参数,中间用逗号隔开,如图7的代码。
图7
5.text-overflow:标示对象内溢出文本
text-overflow为CSS3新增属性,该属性用于处理溢出的文本,其基本语法格式如下。
选择器{text-overflow:属性值;}
text-overflow属性常用取值有以下两个。
(1)clip:修剪溢出文本,不显示省略标签“…”。
(2)ellipsis:用省略标签“…”替代被修剪文本,省略标签插入的位置是最后一个字符。
下面通过一个案例来演示一下text-overflow的使用方法。
先写代码,如图8
图8
保存运行如图9
图9
总结图8和图9,可以得出设置省略标签标示溢出文本的具体步骤如下。
(1)为包含文本的对象定义宽度。
(2)应用“white-space:nowrap;”样式强制文本不能换行。
(3)应用“overflow:hidden;”样式隐藏溢出文本。
(4)应用”text-overflow:ellipsis;”样式显示省略标签。
6.word-wrap属性
word-wrap是CSS3的新增属性,该属性用于实现长单词和URL地址的自动换行,其基本语法格式如下。
选择器{word-wrap:属性值;}
word-wrap取值如表3-3所示。
3-3 word-wrap属性值
值 | 描述 |
normal | 只在 允许的断字点换行(浏览器保持默认处理) |
break-word | 在长单词或URL地址内部进行换行 |
下面通过一个URL地址换行来演示一下word-wrap的使用方法。
先写代码,如图10
图10
保存并运行如图11.
图11
7.以上就是CSS文本外观属性(知识点2)了,下期我们讲用CSS文本外观属性实现的案例。