css text

一、

css文本属性

属性

描述

color

设置文本颜色

direction

设置文本方向。

line-height

设置行高。

letter-spacing

设置字符间距。

text-align

对齐元素中的文本。

text-decoration

向文本添加修饰。

text-indent

缩进元素中文本的首行。

text-shadow

设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。

text-transform

控制元素中的字母。

unicode-bidi

设置文本方向。

white-space

设置元素中空白的处理方式。

word-spacing

设置字间距。

二、

CSS 提供了 text-indent 属性

该属性可以方便地实现文本缩进。

1、通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:

p {text-indent: 5em;}

注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素(如br),图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。

提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。

br元素可以切换成英文全角输入空格,则在网页上也会呈现出缩进效果

2、使用负值

text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:

p {text-indent: -5em;}

提示:

:first-letter伪元素

"first-letter" 伪元素用于向文本的首字母设置特殊样式:

p:first-letter  {  color:#ff0000;  font-size:xx-large;  }

三、

水平对齐

text-align 属性规定元素中的文本的水平对齐方式

该属性通过指定行框与哪个点对齐,从而设置块级元素内文本的水平对齐方式

描述
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
提示:

text-align:center与 <CENTER>

大家可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。

<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。

四、

vertical-align 属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中

top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。

小技巧:

把元素的height与line-height设置成同样的值可以使文本垂直居中


五、字间隔

word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

字母间隔

letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。







          
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值