CSS—文本属性:
color/*文本颜色*/
direction/*文本方向*/
letter-spacing/*字符间距*/
word-spacing/*设置字间距*/
line-height/*设置行高*/
text-align/*对齐文本元素*/
vertical-align/*元素的垂直对齐*/
text-decoration/*添加文本修饰*/
text-indent/*首行缩进*/
text-shadow/*文本阴影*/
text-transform/*控制元素中的字母*/
unicode-bidi/*设置或返回文本是否被重写 */
white-space/*元素中空白的处理方式*/
1、color:
颜色值通常以以下方式定义:
十六进制 - 如:"#ff0000"
RGB - 如:“rgb(255,0,0)”
颜色名称 - 如:“red”
body{color:red;}
h1{color:#00ff00;}
p{color:rgb(0,0,255);}
2、direction:
rtl 文本方向从右到左。感觉和右对齐差不多
ltl 文本方向从左到右。默认
.ex1 {direction:rtl;}
3、letter-spacing和word-spacing:
letter-spacing:
length:定义字符间的固定空间(允许使用负值)。
默认没有额外空间
用来设置单个字或者是字母的间距
例:
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
letter-spacing:
length:定义单词间的固定空间(允许使用负值)。
默认没有额外空间
用来设置单词间距
p{ word-spacing:30px;}
4、line-height:
number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length:设置固定的行间距。
% :基于当前字体尺寸的百分比行间距。
p.small {line-height:3;}
p.big {line-height:200%;}
5、text-decoration
underline 定义文本下的一条线。 (类似于下划线)
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。(类似于删除线)
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
6、text-align和vertical-align:
text-align:
left:把文本排列到左边。默认值:由浏览器决定。
right:把文本排列到右边。
center:把文本排列到中间。
justify:实现两端对齐文本效果。
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
vertical-align:
sub:垂直对齐文本的下标。
super:垂直对齐文本的上标
top:把元素的顶端与行中最高元素的顶端对齐
text-top:把元素的顶端与父元素字体的顶端对齐
middle:把此元素放置在父元素的中部。
bottom:把元素的底端与行中最低的元素的顶端对齐。
text-bottom:把元素的底端与父元素字体的底端对齐。
img.top {vertical-align:text-top;}
img.bottom {vertical-align:text-bottom;}
7、text-indent:
length 定义固定的缩进。默认值:0。
% 定义基于父元素宽度的百分比的缩进。
p { text-indent:50px; }
8、text-shadow:
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。参阅 CSS 颜色值。
例:
h1 {text-shadow:5px 5px #FF0000;}
9、text-transform:
none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母,仅有小写字母。
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
10、white-space:
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的<pre>
标签。
nowrap 文本不会换行,文本会在在同一行上继续,直到遇到<br>
标签为止。
pre-wrap 保留空白符序列,但是正常地进行换行。
pre-line 合并空白符序列,但是保留换行符。
p{white-space:nowrap;}
11、unicode-bidi(不全):
bidi-override 创建一个附加的嵌入层面。重新排序取决于 direction 属性。
直观体现:配合direction:rtl,可以使文字从右向左排列输出
div.ex1{
direction:rtl;
unicode-bidi:bidi-override;
}