CSS学习4(文本属性)

缩进和水平对齐

缩进

text-indent:length | percentage | inherit
将Web页面上一个段落的第一行缩进,用于块级元素。

水平对齐

text-align:left | center | right | justify | inherit
用于块级元素
justify是两端对齐文本,它将使文本行的两端都放在父元素的边界上,调整字符间距,使每行一样长。
这个只会控制块级元素中的行内元素,要将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。

垂直对齐

行高

line-height属性是指文本行基线之间的距离,而不是字体的大小,它确定了将各个元素框的高度增加或减少多少。
line-height控制了行间距,这是文本行之间超出字体大小的额外空间。换句话说,line-height值和字体大小之差就是行间距。
值:(length) | (percentage)| (number)| normal | inherit
其中百分比是相对于元素的字体大小而言的。
当一个块级元素从另一个元素继承line-height时,问题会变得更为复杂。line-height值从父元素继承时,要从父元素计算,而不是在子元
素上计算。这种情况会发生在父元素的line-height是em,percentage等值时。两种结局办法,一种是为每个元素都写line-height,不使用继承。另一种指定数字值,这个值将是一个相对font-size的缩放因子,这个值会直接继承而不是继承计算值。

#div4{
  font-size: 20px;
  //line-height:1em;
  line-height:1;
  p{
    text-indent: 1.5em;
    text-align: center;
    font-size: 30px;
    //when div4's line-height is 1em, here we seem to inherit 1em. But actually, we inherit a computed value from div4 which is 20px
    //when div4 line-height is 1, we inherit 1,and compute it here using self's font-size.
    line-height:inherit;
  }

}

构造文本行

文本行中的每个元素都会生成一个内容区,这由字体的大小确定。这个内容区则会生成一个行内框(inline box),如果不存在其他因素,这
个行内框就完全等于该元素的内容区,由line-height产生的行间距就是增加或减少各行内框高度的因素之一。

垂直对齐文本

vertical-align
baseline | sub | super | top | text-top | middle | bottom | text-bottom | (percentage) | (length) | inherit

在CSS中,vertical-align属性只应用于行内元素和替换元素,如图像和表单输入元素。vertical-align属性不能继承。
vertical-align不影响块级元素中内容的对齐。不过,可以用它来影响表单元格中元素的垂直对齐。

字间隔和字母间隔

字间隔

word-spacing:(length)| normal | inherit
这个只对英文管用,词之间的距离。

字母间隔

letter-spacing:(length) | normal | inherit

文本转换

text-transform:uppercase | lowercase | capitalize | none | inherit

文本装饰

text-decoration:none | [underline || overline || line-through || blink] | inherit

处理空白符

white-space:normal | nowrap | pre | pre-wrap | pre-line | inherit
使用这个属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的XHTML处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以在Web浏览器中显示时,各个字之间只会显示一个空格,而且忽略元素中的换行。
如果white-space为pre,则不会忽略元素中的换行和空格。
与之相对的值是nowrap,它会防止元素中的文本换行,除非使用了一个br元素。

值 pre-line normal nowrap pre pre-wrap
空白符 合并 合并 合并 保留 保留
换行符 保留 忽略 忽略 保留 保留
自动换行 允许 允许 不允许 不允许 允许

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值