text-indent
值: <length> | <percentage> | inherit
1.通过使用此属性,所有元素的第一行都可以缩进一个给定的长度,该长度甚至可以是负值.
2.可以为所有块级元素使用text-indent,但无法将这个属性应用到行内元素,图像类的替换元素也无法应用text-indent属性.
3.text-indent可以使用所有长度单位(包括百分数值).但是百分数相对于缩进元素父元素的宽度.
4.该属性可以继承
p
{
text-indent:50px;
}
<p>
这是段落中的一些文本。
这是段落中的一些文本。
这是段落中的一些文本。
</p>
text-align
值: left(默认值) | center | right | justify | inherit | <
string> |
1.text-align 属性规定元素中的文本的水平对齐方式。
2.left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
inherit 规定应该从父元素继承 text-align 属性的值。
line-height
值:<
length>
| <
percentage>
| <
number>
| normal | inherit
1.line-height属性是指文本行基线之间的距离,而不是字体的大小,它确定了将各个元素的高度增加或减少多少
2.要确定一个给定元素的行间距,只需将line-height的计算值减去font-size的计算值.这个值就是总的行间距(可能是负值),将行间距的一半分别应用到内容区的顶部和底部.其结果就是该元素的行内框.
3.line-height从父元素继承时,要从父元素计算,而不是在子元素上计算.
body{
font-size: 10px;
}
div{
line-height: 1em;
/*10px*/
}
p{
font-size: 18px;
}
<div>
<p>
Last week, I lost my umbrella when I got off the bus I felt so sorry for being so careless. My friend told me that I could go to the terminal station to look for my umbrella. So I did as they told me. When I got there and asked the officers, they showed me the losing stuffs and I found my umbrella! What a surprise.
</p>
</div>
4.指定一个数时,缩放因子将是继承值,而不是计算值.这个数会应用到该元素及其所有子元素,所以个元素都根据其自己的font-size计算line-height
div{
line-height: 1.5;
/* 27px=18*1.5 */
}
p{
font-size: 18px;
}
<div>
<p>
Last week, I lost my umbrella when I got off the bus I felt so sorry for being so careless. My friend told me that I could go to the terminal station to look for my umbrella. So I did as they told me. When I got there and asked the officers, they showed me the losing stuffs and I found my umbrella! What a surprise.
</p>
</div>
vertical-align
值: baseline(默认值) | sub | super | top | text-top | middle | bottom | text-bottom | <
length>
| <
percentage>
| inherit
1.vertical-align 属性设置元素的垂直对齐方式。
2.vertical-align 属性只应用于行内元素和替换元素,不能继承
3.baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。
4.vertical-align指定的对齐顶部、底部或中间是相对于当前行而不是父元素。
word-spacing
值:<
length>
| normal | inherit
1.word-spacing是属性接受一个正长度值或负长度值,这个长度值会增加到字之间的标准间隔
letter-spacing
值:<
length>
| normal | inherit
1.letter-spacing 修改字符或字母之间的间隔
text-transform
值:uppercase | lowercase | uppercase | capitalize | none | inherit
1.此属性处理文本的大小写
text-decoration
值:none | underline | overline | line-through | blink | inherit
1.text-decoration 属性规定添加到文本的修饰。不可继承
2.如果后代元素没有自己的装饰,祖先元素上设置的装饰会“延伸”到后代元素中。不要求用户代理支持 blink。
text-shadow
值:h-shadow v-shadow blur color;
1.h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。
white-space
值:normal | nowrap | pre | pre-wrap | pre-line | inherit
1.white-space 属性设置如何处理元素内的空白。
2.normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。
direction
值:ltr | rtl | inherit
1.direction 属性规定文本的方向 / 书写方向。
2.ltr 默认。文本方向从左到右。
rtl 文本方向从右到左。
inherit 规定应该从父元素继承 direction 属性的值。