阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
CSS实用教程（二）
七．控制文字的样式 QY CNO#*
t&?v9n"X
控制文字的样式包括文字大小写、文字修饰两个部分。 /Vj byRwV
IUBps0.T\
1．文字大小写 } k%\
QW"6 ]
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。 ,LW%'tQ~"
4) I /\
基本格式如下： 2| _Jup
zR/p}Wu|!
text-transform: 参数 '[d dE!ta
4uE5h~0Z
参数取值范围： DEeL 48{R
0b QiUcg/
·uppercase：所有文字大写显示 K]]r OF
( Vv[
·lowercase：所有文字小写显示 rp[oH=&
rM?Dp2
·capitalize：每个单词的头字母大写显示 ;s /b_RN
U;A5-|C
·none：不继承母体的文字变形参数 +(k)1kC
Mn
hO@v\@;r
注意：继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 c(=O`%B{
WBIB'2:m
2．文字修饰 <!n Wiwv
hADb]O
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 w 4gZ:fR=
GSb )|mj
基本格式如下： s 6h Wq&C
z4`n% ~w1b
text-decoration: 参数 S<9d^= a
umrI4.1c
参数取值范围： ?4?jG3p
`
A{~}6jw
·underline：为文字加下划线 BRLU&@G`1
|]3);^0
·overline：为文字加上划线 U)1qsUDF
*TI6Z$b|6
·line-through：为文字加删除线 Sqt" G6<
VC
tiZ4
·blink：使文字闪烁 fw};.M
qNVw+U;2P
·none：不显示上述任何效果 |MrH@v7S
kx(:Z8DX
八．控制文本的样式 sU!q~`; J
Ym2m1
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 5|t& qUV
o=2`N2
AL
1．单词间距 gb
Z X'D
P[oB'
单词间距指的是英文每个单词之间的距离，不包括中文文字。 Rp9iX
~A`e
mW9b~G3k
基本格式如下： raZRa*C;
#(4hX6?5AI
word-spacing: 间隔距离 !]T|=yw
?`}U|]c
间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。 @"2-tn@q_
LEa:{s<:
2．字母间距
^O"`.2O1
+y #979A,
字母间距是指英文字母之间的距离，功能、用法，以及参数的设置和单词间距很相似。 [0@i,7{ZqE
6>%NL "* ]
基本格式如下： <#` L&w.
A
7
6yz`D
letter-spacing: 字母间距 z [{%.kA
$6P sq=|
3．行距 Iqv
5lo
.
_JoA=< O!
行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。 k0|InP7
)63w &
基本格式如下： a r%Rr"
1' s ^W
line-height: 行间距离 J{I?t~u
E2cmT$6
行间距离取值： %/p 5C
yR-.OF,c
·不带单位的数字：以1为基数，相当于比例关系的100% IYPI5qCR
dXQWT@$y!E
·带长度单位的数字：以具体的单位为准
|H49 FL
,P]{*uqGiB
·比例关系 57rP@,vj
uv4jbg}Z+3
注意：如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。 $@X,J2&
-i4gzak
4．文本水平对齐 !+U.)u9 '
YjT
#^AH
文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。 p*G_$"KpP
y!].l0e2a
基本格式如下： 8vCHH&`
7Uh}|6PU
text-align: 参数 O`4X[r1LD
mvnK)R_
参数的取值： n=~?BxB
+4 dHaj6
·left：左对齐 r i z({
Oc1ZIIkh\
·right：右对齐 lsd\ `X5,
QLn 5:&
·center：居中对齐 Sq
,x@
["z$rk
·justify：相对左右对齐 l[gL(p "W
iw%DQ }$
但需要注意的是，text-alight是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 -kkXyO8js
B}p/ ,4x6
5．文本垂直对齐 Y\lBPp0{\v
X^?-U ne
文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。 3WhJ,~o-y
6*% lnd+_
基本格式如下： 5<61NnZ
d 1z
vertical-align: 参数 L^22,B
0
j \SDw
参数取值： 2-
)Ml*
'lW
NU
·top：顶对齐 R1U\ /
1 oC/W? l^
·bottom：底对齐 Z|)~2[Roa
cq/)Yff@:
·text-top：相对文本顶对齐 W
1 #3+
x9uA@$l^|
·text-bottom：相对文本底对齐 bf3)^ 49}
#df Aqg
'
·baseline：基准线对齐 |^FDsJUN
S_^ "$j
·middle：中心对齐 thOCzGJ$
c45Mv_
·sub：以下标的形式显示 9t= erhUr
mv5!fp_*7
·super：以上标的形式显示 D 4@
=+
]RxNSr0e
6．文本缩进 r,F'Jd5
6~^+</?
文本缩进可以使文本在相对默认值较窄的区域里显示，主要用于中文板式的首行缩进，或是为大段的引用文本和备注做成缩进的格式。 f3nib8B '
w+}KX ><r
基本格式如下： +1e*>jE
3n
X7$ $X
text-indent: 缩进距离 tr ):n @
m^p
Q55,
缩进距离取值： >5 Ce/P'R
<{e0 i
·带长度单位的数字 |
YvO$4=s
G.L4l|%W
·比例关系 y![h
28zt.9
但是需要注意的是，在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，其实事实并非如此，整个浏览器的窗口才是浏览器所默认的参照物。 5C/u`{4]Hg
KPKby?qQ^
另外，text-indent是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。
|
|
|
|
[楼 主]
|
Posted: 2006-04-04 13:44 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> CSS实用教程（二）
