文本属性-CSDN博客

2019独角兽企业重金招聘Python工程师标准>>>

以下是几个最有用的 CSS文本属性：

 一、text-indent 文本缩进

p {text-indent:3em;}

假设有一个 400 像素宽的 div，包含的文本缩进 5%，则缩进的距离是 20 像素（400 的 5%）。

在这个 div 中有一个 200 像素宽的段落。作为子元素，它继承父元素的 text-indent 值，所以

它包含的文本也缩进。但继承的缩进值是多少呢？不是 5%，而是 20 像素。也就是说，子元素
继承的是根据父元素宽度计算得到的缩进值。结果，虽然段落只有父元素一半宽，但其中的文
本也会缩进 20 像素。这样可以确保无论段落多宽，它们的缩进距离都一样。当然，在子元素
上重新设定 text-indent 属性，可以覆盖继承的值。

 二、letter-spacing 字符间距

letter-spacing 为正值时增大字符间距，为负值时缩小间距
① 。无论设定字体大小时
使用的是什么单位，设定字符间距一定要用相对单位，以便字间距能随字体大小同
比例变化。

 三、word-spacing 单词间距

单词间距与字符间距非常相似，区别在于它只调整单词间距，而不影响字符间距。
CSS把任何两边有空白的字符和字符串都视作“单词”

 四、text-decoration 文本装饰

值： underline 、 overline 、 line-through 、 blink 、 none 。
示例： .retailprice {text-decoration:line-through;} 。

 五、text-align 文本对齐

值： left 、 right 、 center 、 justify 。
示例： p {text-align:right;} 。
text-align 属性只有 4 个值， left 、 right 、 center 和 justify ，控制着文本在水平
方向对齐的方式。其中， center 值也可以用来在较大的元素中居中较小的固定宽度
的元素或图片。图 4-10展示了 text-align 属性 4个值的实际效果。

 六、line-height 行高

值：任何数字值（不用指定单位）。
示例： p {line-height:1.5;} 。

 七、text-transform 文本转换

值： none 、 uppercase 、 lowercase 、 capitalize 。
示例： p {text-transform:capitalize;} 。
text-transform 属性用于转换元素中文本的大小写，它可以设定英文文本首字母大
写、全部字母大写和全部字母小写。

 八、vertical-align 垂直对齐

值：任意长度值以及 sub 、 super 、 top 、 middle 、 bottom 等。
示例： span {vertical-align:60%;} 。
vertical-align 以基线为参照上下移动文本，但这个属性只影响行内元素。如果你
想在垂直方向上对齐块级元素，必须把其 display 属性设定为 inline 。 vertical-align
属性最常用于公式或化学分子式中的上标和下标，比如 x 4 -y -5 或 N 3 O，或者用于文本
中脚注的角标，比如把星号变成上角标。我个人不太喜欢浏览器为上标设定的默认
样式，我觉得有点大，位置也有点高（下标的位置有点低）。写一点样式就可以得到
更好的效果，而且能够跨浏览器保持相同比例。

转载于:https://my.oschina.net/u/1045177/blog/519568