查看完整版本: 从基础开始:CSS实用教程（二）

从基础开始:CSS实用教程（二）

七．控制文字的样式 $F9QeO!eq
LCwP"t I&o
{9w
控制文字的样式包括文字大小写、文字修饰两个部分。
B s8WPz9~_ B'D[0P5HT Bytf
1．文字大小写
@A%k}gj4f \ kE:l|!r
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。
4~R0}S y_ M Tp4Z j:y{I~I S~
基本格式如下：
Y(Q~4N o'R!C!E *J$`o@hfw1~
text-transform: 参数 v9_;|F5y0~%a

p)z0sTtc
K
g 参数取值范围： ;z7|h @z
R?I RyK
NAZOQ.[:j
·uppercase：所有文字大写显示
X5Mi3m O
:yd)Wz J(xN ·lowercase：所有文字小写显示
)d?:Q^ u#o%q&T
#P;toq)H#Dq ·capitalize：每个单词的头字母大写显示
;OX&WK$ES 4T8\ a_~6G*D5B{"q7|
·none：不继承母体的文字变形参数 #R y
[/q8n b&c

lM;j'A$sA$I.@
注意：继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 q(Cz
c
q5C
%^y(Y#^1Y'qq
2．文字修饰
+C6v9Xith,e&m |8Cm7r5o}?
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。
(Po,dj;t!w [[TAn!]@T
基本格式如下： :x/p1?+N+aT

V3zF[9Z0JyUb text-decoration: 参数 'fVO8k.~a6t`X

D.S8w[W#H.X 参数取值范围：
A%IKE*N'Q
An RNxM ·underline：为文字加下划线
A!q7VM yOI]Y~\q PDy^^(Wv{
·overline：为文字加上划线 Yr1N5afH f
Do

0[2\w{^R ·line-through：为文字加删除线 8R4YU7L*hARI
gv
Ap
OT)n(C
·blink：使文字闪烁 |qm{
@~:R
L{!U3X3_
·none：不显示上述任何效果 (gt!Xdj$]5T2q#WE.tP

7A_goes 八．控制文本的样式
A'I+S*^'y 9C.zS8tP"b"{3^
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 !h(\yS7|#H/e6c| ^

7i R|.k`,q)VG 1．单词间距
4j(Lu:vd&` OJ/vEu7f dG"l
单词间距指的是英文每个单词之间的距离，不包括中文文字。
W6Me,F&R `
WDg1|e%M h:rXy#L
基本格式如下： ,lep8w Rm4L
*M,Y+Ay5f&F*|*`
word-spacing: 间隔距离
V9F FMtpe R
NcOZ5^kG-jy 间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。 .`@N|{\@
7BTQ({F_2i
2．字母间距 ju~FKA
#[m8SK{Q
字母间距是指英文字母之间的距离，功能、用法，以及参数的设置和单词间距很相似。 RP
eW3^D$~$m:i;f
%fu3i3f-i0]
基本格式如下： \#GU }Ix
LCr9x Mp
letter-spacing: 字母间距
s&~8Z8z"Y+JR] |!jrP9v ~$e4Z
3．行距e$Yp(Y-q[2B
+dl0l3_*iS~\+rf
行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。2f"{^8G3t!D


y P6RC/niB M 基本格式如下：
$Z*G7J-p{:M Q:ou
!x$R/~4N(T't\ line-height: 行间距离[UZT1@9hMv

/ycyK[ 行间距离取值：pd[ d)lk n0w

E!T:n] ZL%otT Pt ·不带单位的数字：以1为基数，相当于比例关系的100%ADTS0zS1ef
+gE&J+U?;C Zf
·带长度单位的数字：以具体的单位为准3P9M8q4f6|;W
qXA5WM)Q8YT
·比例关系 {0Y/uZ?y
*d0z&Pf&jz:vW Uy
注意：如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。
+w,E2u2NV:B[ etY`'@/Xx;E
4．文本水平对齐#DjE)U-aK
hC&Q5Gk,V,D{
文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。g0U[\AQ#zof%mo
ZV e3H _wK
基本格式如下：
2R:~)G,k{h0[ !Vc.^WCk8x5n
text-align: 参数$y;W4eh JN/@
r5\r9r9I1pNK s
参数的取值：
N9?+x*]:]
;RI U/mT+z7PB tl ·left：左对齐GC$X~0qR
(P'Qy D;^g1Z&aY-C;h.?1?
·right：右对齐
*Fa3uG5KE\9|0y
"?yxKv&[ ·center：居中对齐
9NcdO-x?3T ea$k1{y}
·justify：相对左右对齐2Z+I hy7F#\wxbF

i#l0l
\-D _ 但需要注意的是，text-alight是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。"OcD{ce8q
`/f.Yk2Kb0u
5．文本垂直对齐m;? w F"g

3W/g lqL'WH 文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。
#Ln i @e
yo&|9R/E
rJ N!c
Db 基本格式如下：i:a y)?Z#qoB8ZyAC
Mi9}dN7J
vertical-align: 参数t\"l%Lw`;D

&Sn.^~Tdj \r 参数取值：
;N,mp-G)o"}
7TN^ Q~Jq ·top：顶对齐yR'h4i$Z\

H0y,@&VTr/e_$O%\-x:G+Y ·bottom：底对齐
YH W1@'c}l
n.@"cdoFp-G{ ·text-top：相对文本顶对齐.nx_4}+O.@v6V K

d+r3G8JV ·text-bottom：相对文本底对齐
va3^H(I%jo ZQ-] x~b_ o
·baseline：基准线对齐#r}ym+nG(L

:|0km L+y`z ·middle：中心对齐u(@*E-EI

0B(sa(h8}nV4?$by ·sub：以下标的形式显示
?p4y b.q.S } rY+n;R
·super：以上标的形式显示
%ht0cd;WL!z6Zp 2},jv ]{(D0\Y1S
6．文本缩进
Y j
Sd^| 0g/JF?ml%u;q
文本缩进可以使文本在相对默认值较窄的区域里显示，主要用于中文板式的首行缩进，或是为大段的引用文本和备注做成缩进的格式。
_Q#j/XB8m${)Z
v+u7_Ja a 基本格式如下：Asa+H9SQ T
p t}ej|bH
text-indent: 缩进距离.R$E*H*h
F
%X)G \"Q#{6a HLX
缩进距离取值：
b1@ BB%HL E*?/g&ZWebV#Q(D
·带长度单位的数字*Gh DlItb'\

Ce(xYa8R] ·比例关系+S8w9s:QaK
&lu ]gj[
但是需要注意的是，在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，其实事实并非如此，整个浏览器的窗口才是浏览器所默认的参照物。#IoW n-mp:M:r

@r{*Ba0^Q 另外，text-indent是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。

九．控制颜色和背景的样式 (go0br{
5|2G'GL V
控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。 mxa%I7Ol d^3w&]
/Y.L9yB axMh
1．颜色属性 R e@(NRS"A,T[
l T1k"UR J%u+{
基本格式如下：
(jjieW5s6w8o2Z}
4ozJeH[0R ~ color: 参数
)m8RBkU4h t{\
;gZG6`]a*~ 颜色参数取值范围：
$[ w9r)j-y6{:[T(m2X O5a !_/[2s5F_%ff
·以RGB值表示
uE2V1Yc`
_`
0\1\TVi\,ZQ+Y3l:C ·以16进制（hex）的色彩值表示
(vXN D[H
|7~@2N$S;J7i5y*I ·以默认颜色的英文名称表示
)w p"F%n+c 'G$D%PU"e2m
以默认颜色的英文名称表示无疑是最为方便的，但由于预定义的颜色种类太少，所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多，不但可以用数字的形式精确地表示颜色，而且也是很多图像制作软件（如Photoshop）里默认使用的规范，这样一来就为图片和网页更好地结合打下了坚实的基础。 k Z(?2Qtt
,S0}{3} qqv$E
2．背景颜色
7[#T%rb\o?D
qF3x0K/s xY 在HTML当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了，而且对象的范围很广，可以是一段文字，也可以只是一个单词或一个字母。 +@L`bi7mVG!h

pSl$X)k-J/H8l9JY\ 基本格式如下：
vJ&^/}Y]` t],[,F;c$o&A+b
background-color: 参数 *BG4VT5{m

f1B0t TOX3F;Cb)Q 参数取值和颜色属性一样。 4Z;k?;S)_

AZ*_0I%V 3．背景图片 %h^ zy~;t7a X1fq
ghYT\#mT{'y,i
基本格式如下： bIV,h|
~3Z{
@h9E"z
background-image: url(URL) f`?u \CX-t

,su@0\X
zn URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径，将什么也不显示。
,Zq+U"?$b @}N ;U?*Vj{mvMV p
4．背景图片重复 mKs)aHP-x&{

E TPDoV 背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。 JA{? l-s*N3b&rR
_3} ?-?!g1w0S"p
基本格式如下： "qTK}SL\
F wd(Rzy!M
J
background-repeat: 参数
_:MY%?xsRM*L_ U1GnxX8n"} P#J!q$Q
参数取值范围：
.o5\"||&U:RlC"d-z z-F!@#E]ZW
·no-repeat：不重复平铺背景图片
| nm
q5i5^ )R0V+v:nzYh
·repeat-x：使图片只在水平方向上平铺 l&K rf6g!{ s X
#?e|h.sS0Qz
·repeat-y：使图片只在垂直方向上平铺 xI4Oo&PQ\
,Cn QO?"gm`Y
如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。 +q
Ke+F3y
g'm+j6b3J
5．背景图片固定 'j!l]/K+J
b
I T0MLg5t
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。
h'R D?_g6^ #k"I@;X o
基本格式如下：
s"D/z"Z&M8BQ
Tr9F ;[G#W)]%n#pM o
background-attachment: 参数
8YMr'L2l*M(DIx L0R-ypm`
参数取值范围：
'Oe"V6n*b"Q9V/i"w*ws m|)A1E2eG$f,p3l
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动 rl}EEs7o np

3fW)o&x$oKc6x ·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动 .xM6O pXo(G

eCHLS"J{ 6．背景定位
u(Etm&B ^ tgR 5h9mm9P5d*X[p
背景定位用于控制背景图片在网页中显示的位置。 m7zVJ.T+}*CM5e8i0y7E

D:u5t6p,_ 基本格式如下：
nw)Fc7K/t;p? $b4e q,ul$@
background-position: 参数表
Cn2XuKR8i4Y^
SLQm(Fx 参数取值范围： +d'}2V~v

w b2_,w$~O.O*\ ·带长度单位的数字参数
nK
h,^%tB-QP6D
iybS[x0U ·top：相对前景对象顶对齐
0`;X Bp+N2_;kK:p$|
ei3xG!o1qhD ·bottom：相对前景对象底对齐 t$K.nD]`G
-E*j\Ed}&WW&r\!z
·left：相对前景对象左对齐 Tmv-r!c8{.D
(t^p(S;T,eg
·right：相对前景对象右对齐 $T6`g~*KDa

/Y9Hg'L_,[;S$W.g ·center：相对前景对象中心对齐 (XepuKQmJ

eS!Vt'w ·比例关系
f5d)^5_ uB+^-p o+u7M%NEkW
参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。

十．控制列表的样式
F)G7^3c/R_,yr{iM(Q
5X,P&q"e$O 列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。 0c!o(p wF!`#nt] M

yXSgwl 样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。
(_K;k9}xf'U-_*O6hv P1j4rH?$Q
1．列表符号 "ty
sdP%aI

xwTyI 列表符号是指显示于每一个列表项目前的符号标识。
u7N@"p$[ /H!QxO(B#r*}g
基本格式如下：
k9]|5MT|
hC `Rgz{KA list-style-type：参数
Y D&_9q/L@2L%~ b
K}m.R`
参数取值范围： 6|3~ \5U#zol&c,P

%k6\3KC6Wu!H ·disc：圆形
}3i3nSEypB#F#wb | UV qG*v0[
·circle：空心圆
}dNP2jGo@he S0Vn6q Q
·square：方块
Sd"c;lMM/` luo!n$h's%A?*w
·decimal：十进制数字 9n4c$hZ1JFI&T

:HAZ3e)^}'J| ·lower-roman：小写罗马数字 ]3fb2m,N1_E9m;M&bdg
5}9})jW-@,^#Wb.m
·upper-roman：大写罗马数字
%`&xS3[h zn QGP RX:~9D-c N
t
·lower-alpha：小写希腊字母
Y*c;\r)Uv"i[O
r O#ot8vl:E7Z|/p ·upper-alpha：大写希腊字母 M peiZVHr
WIb*S|?*P
·none：无符号显示
Q\'z uC/K%m@R
+C h
YE9b}kE 参数中的disc是默认选项。
&|ffHQC+u4Y `$i c
a/VF&A\
2．图形符号 V0M(y5si2C p x3Ps
X%D#O-z)Y2gH
图形符号指原来列表的项目符号将可以使用图形来代替。 )V5N ]$l2M+Tj$S ST

:p+v'[Pr5u!@2X3k 基本格式如下： %d
Z"Z p2@YwI
5^&cPCwoq
Z1M
list-style-image：URL `#| FK)?6H

.uX"Zd` URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。
w4@#w$N7g%Tj9n$Bg k Yu+H/j,J
3．列表位置 yjm\0w u?,C

#q9L }~8{!i 列表位置描述列表在何处显示。
Nl!^9eivY-a{w^ Vey6NUJ
基本格式如下：
j"j5Yo+zzr s FWS(D r
list-style-position：参数 Ex5`3S1?$E]:n

1p-YgD%S;K 参数取值范围： v \9H1?4n;MS9Xu1u{L c
9e!R RUu)e\~
·inside：在BOX模型内部显示 zHlW1Y FIS;a

,i;A:]%d| ·outside：在BOX模型外部显示 Y |u(u$]^7L

^l]r$s 这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。 Q)K5[C
v

]-].v!F?n3Sr 十一．控制用户界面的样式 3MW6ST:F%UB*X;aL

\V-g*nz&e3y'Q 在网页上，鼠标平时呈箭头形，指向链接时成为手形，等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么，但这些好像还不能完全地满足我们的需要。就拿链接来说，可以是指向一个帮助文件，也可以是向前进一页或是向后退一页，针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是，CSS提供了多达13种的鼠标形状，供我们选择。
0e*x:g{ }
fA
:@&B$w&V,N"HYcP 基本格式如下：
?y^6RZ | C&QF9Y]h0c#F
cursor：鼠标形状参数 fEn@x'oO)nn

] ]P4`9_4nq CSS鼠标形状参数表： wP^@8_+A8O O
pI&\s'x
CSS代码
F0ci.T+^
Kl@GgK0D o:^*c 鼠标形状
b8|!]Y6Wd9r;Q ^;V T&} b{nsH
style="cursor:hand"
8@(_ ~)P,q'n(Pj}f B?r
Qm4P"TV
手形 9j{ AG?5L+c @

&yUa[U;dN Z style="cursor:crosshair" 'XdKB7Jk#d
,Gr,HEg!mU
十字形 %D},i.v q5l FY"~4H

#b)B.zr5c Q_^*] style="cursor:text" 7W(uS)ec1T!\

An']3`@%Rj!}(r] D%_ 文本形
s1NK;xV\+d &d `/[ A L$b
style="cursor:wait"
2\SPwqaJx
"t#V
k}#r 沙漏形
%lrK
RD[mF.{F
Y0hV
Z| style="cursor:move"
ZfB,X&m'A(G ~
l C,Eb(}DJZ 十字箭头形 XQsdt f

[x'\I5^ style="cursor:help"
3`dX1`a8AXX$E6iNK +C)? B
C+Sz+X5{+xj
问号形 ;M;p J"~f3tpp

G%Y.GhhB style="cursor:e-resize" )n{4L+e0~-n2Dt

%hM]OZ8H 右箭头形
7|}/g7b/I;GN
P%|ok$qJSyc style="cursor:n-resize" 3aqRa?

f%xVXW/_ 上箭头形
9^^m.y0Q%?%h
'P4q}*I&Z eg
~B style="cursor:nw-resize"
MxRvo'Wq;u
d
X9[2Qr+Xg9O 左上箭头形
7bse%T9u5h !QW1A J6Fa4EmJ
style="cursor:w-resize" yx?ri_v#n-`

%@ f}cd'U{v0J 左箭头形 &G&z6S\5{FZc
,Z@)Yl"L
j)D9Eg
style="cursor:s-resize" "TCyB`3HDW.F
&`8Y8\ o R%Q
下箭头形 xQ%L~'N7BX`;v
M S"~/P7sS
style="cursor:se-resize" \#M/n'gV@q!Yu

#x8`H0gS4w;v7j 右下箭头形
G/a*V6I'a$D S0B)Fl5R/l#Y
style="cursor:sw-resize" VH KT)n(Xw

.f+W#aBQ 左下箭头形