阿七
级别: 未验证会员
精华:
0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
|
CSS实用教程(二)
七.控制文字的样式 =`(\]t"I aC'#H8e|j 控制文字的样式包括文字大小写、文字修饰两个部分。 +x:VIi b$Bq#vdg: 1.文字大小写 .$x822
[z}$G:s 文字大小写使网页的设计者不用在输入文字时就完成文字的大小写,而可以在输入完毕后,再根据需要对局部的文字设置大小写。 k
|_
>I a5
g1.6hF 基本格式如下: X.)1>zk | qf8y text-transform: 参数 W9SEYkg DGAg#jh 参数取值范围: 37,)/8]lG f7]C1!] ·uppercase:所有文字大写显示 2-wvL&pi) ;{>-K8=>$ ·lowercase:所有文字小写显示 vC5 ( oxqD/fY ·capitalize:每个单词的头字母大写显示 kmL~H1qd Tq.%_/@M< ·none:不继承母体的文字变形参数 Uefw h@?BA<'S 注意:继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 {I
_I$x_ le`_ 2.文字修饰 $3n@2 N` kIUb`b>B 文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 B,dKpz;kFg 6JL:p{RLi 基本格式如下: K_~SJbl Z,Tv8; text-decoration: 参数 #6<9FY# ]hkway 参数取值范围: vN4
g#,< m)9qO7P ·underline:为文字加下划线 y/@.T\p rj].bGQ,+ ·overline:为文字加上划线 ztS'Dp}q< LA^H213N| ·line-through:为文字加删除线 /\9X0a2h|E .<`Rq' ·blink:使文字闪烁 ='cr@[~i e$^O_e ·none:不显示上述任何效果 ^CwzAB obE_`u l# 八.控制文本的样式 Y<S,Xr;J: ?9801Da#/ 控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 $u9y
H Z m+Yj"RMx& 1.单词间距 \TrhJ ZIx,?E+eJ 单词间距指的是英文每个单词之间的距离,不包括中文文字。 pFg9-xd% bewi.$E{
基本格式如下: F3b[L^Km] `1KZ14K word-spacing: 间隔距离 eRa1eRgP Au,}5=+`P 间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。 7oDr`=q1]r HzT"{N9 2.字母间距 mYN|)QVKy zTP3JOe( 字母间距是指英文字母之间的距离,功能、用法,以及参数的设置和单词间距很相似。 4y+]V~p dQt*/]{q 基本格式如下: XH0R
:+s d]k>7. letter-spacing: 字母间距 kG+CT b#.hw2?a` 3.行距 #uT-_L}sw 0bpl3Fh.v 行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。 ewk62{ gR(*lXm5w 基本格式如下: BjJ$I^ >'8.>f line-height: 行间距离 fdzD6KZI c% 0h!zF 行间距离取值: 'UT 4x9&z `yHV10 ·不带单位的数字:以1为基数,相当于比例关系的100% Tfgx>2 U,+kV?Z ·带长度单位的数字:以具体的单位为准 p/'C
v zie])_8|h ·比例关系 c
u|#AW KC?hsID{ 注意:如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。 E'&UWDh ^`\c;!)F< 4.文本水平对齐 Jnm{i|6N ZqkP# ]+Y' 文本水平对齐可以控制文本的水平对齐,而且并不仅仅指文字内容,也包括设置图片、影像资料的对齐方式。 .7Ys@;>B Hv<%_t_/ 基本格式如下: iH(
K[F / x"v5'EpL text-align: 参数 Wb!%_1dER i,FG?\x@ 参数的取值: 0:h;ots' ]^&DEj{ ·left:左对齐 hn.9j" \%EZg ·right:右对齐 s>"=6gb vP3Fb;
·center:居中对齐 Cr4shdN34 R?>a UFM ·justify:相对左右对齐 q uv`~qn W]_+3qvZ 但需要注意的是,text-alight是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 RXt`y62yK \Q*3/_}G 5.文本垂直对齐 >?b/_O GfJm&'U& 文本的垂直对齐应当是相对于文本母体的位置而言的,不是指文本在网页里垂直对齐。比如说,表格的单元格里有一段文本,那么对这段文本设置垂直居中就是针对单元格来衡量的,也就是说,文本将在单元格的正中显示,而不是整个网页的正中。 H4KwbTT"+ ePIBg( 基本格式如下: ^P:9iu)+]~ j"_V+)SD vertical-align: 参数 h}z^NX 15uVvp/ 参数取值: 2*Z~JM [_L:.,]g8 ·top:顶对齐 0OEyJ|g X LA ·bottom:底对齐 4'Vuhqk
z6|P]u ·text-top:相对文本顶对齐 u+[ZWhKUp =
Yh>5A ·text-bottom:相对文本底对齐 2p@Rr7 lx U}HM ·baseline:基准线对齐 "]*0)h_ M`Y~IG} ·middle:中心对齐 _
97F ZaH<\`=% ·sub:以下标的形式显示 +S^Uw'L$=T cEve70MV ·super:以上标的形式显示 o8
q@rwu3 9i yNR! 6.文本缩进 WkXa%OZ E:&=A 4% 文本缩进可以使文本在相对默认值较窄的区域里显示,主要用于中文板式的首行缩进,或是为大段的引用文本和备注做成缩进的格式。 !wJ~p:vRdY ysGK5kFz 基本格式如下: %:N5k+} oSx]wZZ text-indent: 缩进距离 BNQ~O^R0 (gvaYKvr 缩进距离取值: f
g*IHha \uQ(-ji ·带长度单位的数字 Cbx/ ;pBSGr9 ·比例关系 dF5EIPl;J
BV9B}I
V 但是需要注意的是,在使用比例关系的时候,有人会认为浏览器默认的比例是相对段落的宽度而言的,其实事实并非如此,整个浏览器的窗口才是浏览器所默认的参照物。 jXSo{ GBHv| GO 另外,text-indent是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。
|
|
[楼 主]
|
Posted: 2006-04-04 13:44 |
| |