CSS中的文本样式

原创
10/09 11:52
阅读数 21

CSS 中的文本属性有如下几个:

属性 描述
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 属性直接将缩进距离以数字表示,单位为 empx。一般我们使用 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;
}

在浏览器中的演示:

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部