阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
CSS实用教程（二）
七．控制文字的样式 bmJ5MF]_fG
1=t>HQ
控制文字的样式包括文字大小写、文字修饰两个部分。 (gEBOol
O#b6mKPt;t
1．文字大小写 c$ao:nP)D
U(a#@K !H
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。 Fa?~0H/DL
Mc =$/ o
基本格式如下： uPhK3nCGo
E;,u2 [3
text-transform: 参数 .}&` TU
e7@ ojOQ%
参数取值范围： FQm`~rA~zt
7" aN#;&
·uppercase：所有文字大写显示 2w59^"<,
&atuK*W>
·lowercase：所有文字小写显示 2#P* ,
M*!agh
·capitalize：每个单词的头字母大写显示 Xp >7
iX!:
>CrA;\l
·none：不继承母体的文字变形参数 5Eg1Q
YVt
G]D+Sl4<7i
注意：继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 \!>3SKs(e
cU;iUf
2．文字修饰 F=`AY^u0
s1=X>'q
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 ^?U!pq - `
i'4B3
基本格式如下： j:5=s%S
_]yn"p
text-decoration: 参数 0KYEb%44
)T';qm0w
参数取值范围： ]+(6,ct&.
`!XY]PI+e
·underline：为文字加下划线 V" *O =h
.uuO>:
·overline：为文字加上划线 %`OJ.:k
`dFq:8v
·line-through：为文字加删除线 [pl'|B
}2< r,
·blink：使文字闪烁 [K9'<Qnu
{. 2k6_1[
·none：不显示上述任何效果 @W va tD
V
j/>$,
八．控制文本的样式 p;._
HJ(
q<\
,
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 $]{k+
Jf
]vgB4~4#LP
1．单词间距
Jd %H2`
f
#?fxUH~
单词间距指的是英文每个单词之间的距离，不包括中文文字。 {U!8|(
GqWB{$J;"
基本格式如下： TR<<+
9A} # 6
word-spacing: 间隔距离 6,d@p
*$p2*%7Ne
间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。 "i U}]e0
G s 9:6
2．字母间距 %K\?E98M
Cz 72?[6
字母间距是指英文字母之间的距离，功能、用法，以及参数的设置和单词间距很相似。 IkBei&4F `
nX(+s*Y+w
基本格式如下： )^4\,u\@
3T"j)R_=l
letter-spacing: 字母间距 m\$\ 09
A T9q3
3．行距 h&`e) a>+
5$wpL(:R(
行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。 r9 ui|>U"
&K/ya7
基本格式如下： } w
5 l
HRiL.DS
line-height: 行间距离 ag*mG*Z
,!dh2xNH^
行间距离取值：
KnsT \>[K
s<oNE)xe
·不带单位的数字：以1为基数，相当于比例关系的100% !1q 9+e
gF[ z fDm
·带长度单位的数字：以具体的单位为准 FI3)i>CnW
zgs (Dt;
·比例关系 *M$0J'-BQ
A j2OkD
注意：如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。 r6&5 4 f
hRt y [
4．文本水平对齐 R
}lsnX<
``OD.aY^s
文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。 XLL/4)
'ow.=1N-
基本格式如下： 'g$(QvGF 9
iVd.f
A
text-align: 参数 i{ \%e
cG?cUw).E
参数的取值： =:/BV=tv
e 46/{4F,
·left：左对齐 Hd,
p !_
D b6om7N
·right：右对齐 )l!3(
[ o.B
·center：居中对齐 Fd#m<"
l'\p k<V
·justify：相对左右对齐 cIp
D~0\
`&-Mi[1
但需要注意的是，text-alight是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 3"G>>nC&
WHlYo5?
5．文本垂直对齐 Oi:<~E[kz.
|]aE<`D
文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。 *P#WDXRwd
Q4*fc^?u
基本格式如下： Gkp< o
j
S]><rm
vertical-align: 参数 ZKXo-~=>
.VkbYK
参数取值： y| Ir._bt
k WNV%RlSx
·top：顶对齐 ONCnVjZ
P1NJ^rX
·bottom：底对齐 gq" gUaz
Dc+'<"
·text-top：相对文本顶对齐 r YF #^
qY >{cjo
·text-bottom：相对文本底对齐 +Y
V|ij
KL ?@@7
·baseline：基准线对齐 TAR Xx>
]XTu+T.aT
·middle：中心对齐 8HZ s>l
e#B#B
·sub：以下标的形式显示
NNF>Xa`9,
UK{irU|\
·super：以上标的形式显示 +z9gbcx
_$p$")
6．文本缩进 7c ;9$j
I( S)n+E
文本缩进可以使文本在相对默认值较窄的区域里显示，主要用于中文板式的首行缩进，或是为大段的引用文本和备注做成缩进的格式。 Iu{kP yx
;P;((2_X9
基本格式如下： 'oN\hy($,h
ZlHDi!T
text-indent: 缩进距离 S=x
A[%5
kvh
&d|
缩进距离取值： rS0DSGDq
&h~Xq^
·带长度单位的数字 a,o_`s<
<jS~ WI@
·比例关系 unJ R=~E
s!9dQ.
但是需要注意的是，在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，其实事实并非如此，整个浏览器的窗口才是浏览器所默认的参照物。 CdUAy|!`R
?DH"V7bs
另外，text-indent是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。
|
|
|
|
[楼 主]
|
Posted: 2006-04-04 13:44 |
| |
常州五颜六色网络技术有限公司 -> 网站建设 -> CSS实用教程（二）
