CSS---文本属性及其属性值

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;
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章