本节咱们讲文本款式,像比方设置文本色彩呀,首行缩进、程度对齐等,能够对网页进行排本设置等。
将要学习的文本属性有如下几个:
属性 | 形容 |
---|---|
color | 设置文本色彩 |
text-index | 设置首行文本的缩进 |
text-align | 设置文本程度对齐形式 |
line-height | 设置文本行高 |
text-decoration | 设置文本的装璜 |
color
首先咱们来讲文本色彩设置,后面咱们讲过一节对于如何设置色彩,所以想必大家对如何给文本设置色彩不会。
示例:
例如给上面的 <p>
标签中的 <span>
标签中的文本,色彩设置为粉色:
<p>盛年不重来,<span>一日难再晨</span>。及时宜自勉,岁月不待人。</p>
CSS 款式代码:
span{ color: pink;}
或者应用十六进制色彩值:
span{ color: #FFC0CB;}
text-index
个别咱们在写作文的时候,所有段落的首行都会首行缩进两个字,而咱们如果心愿在网页中的段落也能实现首行缩进呢,这就能够通过 CSS 中的 text-index
属性来设置首行文本的缩进。
text-index
属性间接将缩进间隔以数字示意,单位为 em
或 px
。个别咱们应用 em
更多,通常将值设置为 2em
,示意缩进两个字符。
em
是绝对单位,示意的长度相当于文本中字符的倍数,会依据字符的大小,主动适应,空出设置字符的倍数。
text-index
属性容许应用负值,如果应用负值,那么首行会被缩进到右边。
示例:
实现第一个段落和最初一个段落的首行缩进:
<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <p class="index">蒹葭苍苍,白露为霜。所谓伊人,在水一方。</p> <p>溯洄从之,道阻且长。溯游从之,宛在水中央。</p> <p>蒹葭萋萋,白露未晞。所谓伊人,在水之湄。</p> <p>溯洄从之,道阻且跻。溯游从之,宛在水中坻。</p> <p>蒹葭采采,白露未已。所谓伊人,在水之涘。</p> <p class="index">溯洄从之,道阻且右。溯游从之,宛在水中沚。</p> </body></html>
CSS 款式代码:
.index{ text-indent: 2em;}
在浏览器中的演示:
text-align
text-align
属性用于设置元素中文本的程度对齐形式。
属性值有上面几种:
属性值 | 形容 |
---|---|
left | 默认值,把文本排列到右边 |
right | 把文本排列到左边 |
center | 把文本排列到两头 |
justify | 实现两端对齐文本成果 |
inherit | 规定应该从父元素继承 text-align 属性的值 |
示例:
看一下不同属性值能实现的成果:
<!DOCTYPE><html> <head> <meta charset="utf-8"> <title>CSS学习(9xkd.com)</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <p class="text1">内容居中</p> <p class="text2">内容居左</p> <p class="text3">内容居右</p> <p>内容不增加款式</p> </body></html>
CSS 款式代码:
.text1{ text-align: center;}.text2{ text-align: left;}.text3{ text-align: right;}
在浏览器中的演示:
line-height
line-height
用于设置行高,也就是设置行间的间隔。
属性值能够是上面几种:
属性值 | 形容 |
---|---|
normal | 默认,设置正当的行间距 |
number | 设置数字,此数字会与以后的字体尺寸相乘来设置行间距 |
length | 设置固定的行间距 |
% | 基于以后字体尺寸的百分比行间距。 |
inherit | 规定应该从父元素继承 line-height 属性的值 |
个别咱们应用数字来示意,单位为 px
,如果不增加单位,则示意按倍数示意,这时行高是字体大小的倍数。
示例:
例如上面第一个 <p>
标签中的内容字体大小为14px,将行高设置为 21px,和将行高设置为 2(字体大小的两倍) 是一样的成果:
<body> <p class="text">鲁迅的胜利,有一个重要的秘诀,就是珍惜工夫。鲁迅十二岁在绍兴城读私塾的时候,父亲正患着重病,两个弟弟年纪尚幼,鲁迅不仅常常上当铺,跑药店,还得帮忙母亲做家务,为免影响学业,他必须作好准确的工夫安顿。</p> <p>尔后,鲁迅简直每天都在挤时间。他说过:「工夫,就像海绵里的水,只有你挤,总是有的。」鲁迅读书的趣味非常宽泛,又喜爱写作,他对于民间艺术,特地是传说、绘画,也深切喜好。</p></body>
CSS 款式代码:
.text{ font-size: 14px; line-height: 28px; /* 相当于 line-height:2; */}
在浏览器中的演示:
text-decoration
text-decoration
属性用于设置文本的装璜,也就是给文本设置某种成果,例如下划线、删除线等。
属性值能够是上面几种:
属性值 | 形容 |
---|---|
none | 默认,规范的文本 |
underline | 设置文本的下滑线 |
overline | 设置文本的上滑线 |
line-through | 设置文本的删除线 |
blink | 设置文本闪动 |
inherit | 规定应该从父元素继承 text-decoration 属性的值 |
示例:
除了给文本增加装璜,咱们还能够通过text-decoration
属性去掉链接上面的下划线:
<p>默认文本</p><p class="p1">设置下划线</p><p class="p2">设置上划线</p><p class="p3">设置删除线</p><p class="p4">文本闪动</p><a href="#">去掉链接的下划线</a>
CSS 款式代码:
.p1{ text-decoration: underline;}.p2{ text-decoration: overline;}.p3{ text-decoration: line-through;}.p4{ text-decoration: blink;}a{ text-decoration: none;}
在浏览器中的演示:
总结:本节所学习的文本款式,在理论利用中咱们会常常用到,所以大家要弄清楚这几个属性的应用,以及当赋值不同的属性值时,展现进去的成果是什么。
想看更多能够:https://www.9xkd.com/