本节我们讲文本样式,像比如设置文本颜色呀,首行缩进、水平对齐等,可以对网页进行排本设置等。
将要学习的文本属性有如下几个:
color
首先我们来讲文本颜色设置,前面我们讲过一节关于如何设置颜色,所以想必大家对如何给文本设置颜色不会。
示例:
例如给下面的
标签中的 标签中的文本,颜色设置为粉色:
盛年不重来,一日难再晨。及时宜自勉,岁月不待人。
CSS 样式代码:
span{ color: pink;}
或者使用十六进制颜色值:
span{ color: #FFC0CB;}
text-index
一般我们在写作文的时候,所有段落的首行都会首行缩进两个字,而我们如果希望在网页中的段落也能实现首行缩进呢,这就可以通过 CSS 中的 text-index 属性来设置首行文本的缩进。
text-index 属性直接将缩进距离以数字表示,单位为 em 或 px。一般我们使用 em 更多,通常将值设置为 2em,表示缩进两个字符。
em 是相对单位,表示的长度相当于文本中字符的倍数,会根据字符的大小,自动适应,空出设置字符的倍数。
text-index 属性允许使用负值,如果使用负值,那么首行会被缩进到左边。
示例:
实现第一个段落和最后一个段落的首行缩进:
CSS学习(9xkd.com)
蒹葭苍苍,白露为霜。所谓伊人,在水一方。
溯洄从之,道阻且长。溯游从之,宛在水中央。
蒹葭萋萋,白露未晞。所谓伊人,在水之湄。
溯洄从之,道阻且跻。溯游从之,宛在水中坻。
蒹葭采采,白露未已。所谓伊人,在水之涘。
溯洄从之,道阻且右。溯游从之,宛在水中沚。
CSS 样式代码:
.index{ text-indent: 2em;}
在浏览器中的演示:
text-align
text-align 属性用于设置元素中文本的水平对齐方式。
属性值有下面几种:
示例:
看一下不同属性值能实现的效果:
CSS学习(9xkd.com)
内容居中
内容居左
内容居右
内容不添加样式
CSS 样式代码:
.text1{ text-align: center;}.text2{ text-align: left;}.text3{ text-align: right;}
在浏览器中的演示:
line-height
line-height 用于设置行高,也就是设置行间的距离。
属性值可以是下面几种:
一般我们使用数字来表示,单位为 px,如果不添加单位,则表示按倍数表示,这时行高是字体大小的倍数。
示例:
例如下面第一个
标签中的内容字体大小为14px,将行高设置为 21px,和将行高设置为 2(字体大小的两倍) 是一样的效果:
鲁迅的成功,有一个重要的秘诀,就是珍惜时间。鲁迅十二岁在绍兴城读私塾的时候,父亲正患着重病,两个弟弟年纪尚幼,鲁迅不仅经常上当铺,跑药店,还得帮助母亲做家务,为免影响学业,他必须作好精确的时间安排。
此后,鲁迅几乎每天都在挤时间。他说过:「时间,就像海绵里的水,只要你挤,总是有的。」鲁迅读书的兴趣十分广泛,又喜欢写作,他对于民间艺术,特别是传说、绘画,也深切爱好。
CSS 样式代码:
.text{ font-size: 14px; line-height: 28px; /* 相当于 line-height:2; */}
在浏览器中的演示:
text-decoration
text-decoration 属性用于设置文本的装饰,也就是给文本设置某种效果,例如下划线、删除线等。
属性值可以是下面几种:
示例:
除了给文本添加装饰,我们还可以通过text-decoration 属性去掉链接下面的下划线:
默认文本
设置下划线
设置上划线
设置删除线
文本闪烁
去掉链接的下划线
CSS 样式代码:
.p1{ text-decoration: underline;}.p2{ text-decoration: overline;}.p3{ text-decoration: line-through;}.p4{ text-decoration: blink;}a{ text-decoration: none;}
在浏览器中的演示:
总结:本节所学习的文本样式,在实际应用中我们会经常用到,所以大家要弄清楚这几个属性的使用,以及当赋值不同的属性值时,展示出来的效果是什么。