CSS实用教程（二）网站建设常州五颜六色网络技术有限公司

常州五颜六色网络技术有限公司 -> 网站建设 -> CSS实用教程（二）

登录 -> 注册 -> 回复主题 -> 发表主题

阿七

2006-04-04 13:44

七．控制文字的样式 T$!. :v
b0t/~]9G
控制文字的样式包括文字大小写、文字修饰两个部分。 ~~z}yCl
Tw8$6KUW
1．文字大小写 T=%,^
r761v tC#
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。 O,u$L
cJ=0zEv
基本格式如下： V_^p?Fi#
/GRkQ",
text-transform: 参数 E&9BeU a#
VBo=*gn,$
参数取值范围： DgW*Br8<
P9c!
·uppercase：所有文字大写显示 ?NWc3 .
d0YDNP%,_
·lowercase：所有文字小写显示 54r/s#|-3
Qq+$ea?>
·capitalize：每个单词的头字母大写显示 [7_1GSS1
7Ji|x{``
·none：不继承母体的文字变形参数 @L0xU??"|
u0p[ltJ,
注意：继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 4MUN1/DId`
#p$iWY>e~
2．文字修饰 =Z}$X: $
0i[v,eS
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 ;8m )a
JCFiKt9n
基本格式如下： (P'{A>aHl0
8n??/VDRl
text-decoration: 参数 |r['"6
Nux
参数取值范围： FJQ=611@
=hY9lxW
·underline：为文字加下划线 u43W.4H13
G9_7jX*
·overline：为文字加上划线 =aBc.PJ^
cY]BtJ#
·line-through：为文字加删除线 Q%r KKOX8
-kzp>=
·blink：使文字闪烁 >)^Q p-
T{:8,CiW
·none：不显示上述任何效果 #?"^:,Y
L.2!Q3&
八．控制文本的样式 r(j:C%?}C
WeZ?L|&%w0
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 `l2h65\
9CG&MvF c
1．单词间距 U3u j`Oq
7bk`u'0%
单词间距指的是英文每个单词之间的距离，不包括中文文字。 \AeM=K6q+D
W#&BU-|2
基本格式如下： LEuDDJ-
ZiW&*nN?M
word-spacing: 间隔距离 jP#I](\eG
m*|G2
间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。 ra;:
m yy*rt
2．字母间距 ?{L5=X@$$
%mAwK<MY`
字母间距是指英文字母之间的距离，功能、用法，以及参数的设置和单词间距很相似。 (QTQxZ
CC)Mws+2
基本格式如下： ivg W[]
Lb#PiTJI
letter-spacing: 字母间距 `-MCI)Fq_R
.oM;D~(=9
3．行距 tIk$4)ZAl
2?F?C
行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。 97dF
*B)10R
基本格式如下： :w]NN\
d ATAH}r&
line-height: 行间距离 Tol V3
v6H!.0
行间距离取值： P{HR='2
hcpe~spz9|
·不带单位的数字：以1为基数，相当于比例关系的100% \!"3yd
5S[:;o
·带长度单位的数字：以具体的单位为准 5&.I9}[)j
xt6%[)
·比例关系 'Z|Czd8E
Tv `&
注意：如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。 +i[@+`
w4FYd
4．文本水平对齐 !C(PfsrR/
P'<j<h6
文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。 3vkzN
8?rq{&$t
基本格式如下： C)~%(< D
_;R#B`9Iu
text-align: 参数 a]J>2A@-I
Vh^ :.y
参数的取值： 2V~uPZ
~.#57g F"
·left：左对齐 a5(9~.9
|WNI[49
·right：右对齐 %q.5;L
7%&e4'SZO
·center：居中对齐 *q;83\
^Nt^.xi7
·justify：相对左右对齐 ti3S'K0t
=@&>r5W 1
但需要注意的是，text-alight是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 p}JGx^X~
'+GY6Ecg
5．文本垂直对齐 WqS$C;]%
(!?% "e
文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。 =iB$4d2
>jnx2$
基本格式如下： lanU)+U.
.yHK
vertical-align: 参数 lv~ga2>z
:fUN c^\2
参数取值： ,|]k4F
]VEc9?
·top：顶对齐 "`mG_qHI[
-al
·bottom：底对齐 \^!<Y\\
of >
·text-top：相对文本顶对齐 eT?vZH[N
k^#*x2b
·text-bottom：相对文本底对齐 >wR)p\UEb
9JeT1\VvHY
·baseline：基准线对齐 :*R+ee,&-
o#D'"Tn!
·middle：中心对齐 PG@C5Rnu
Dc 84^>l
·sub：以下标的形式显示 jF(R;?,
F3 g$b,RMH
·super：以上标的形式显示 -zZb]8\E
3ly]DTbz
6．文本缩进 %WqUZ+yy
U.=TjCW
文本缩进可以使文本在相对默认值较窄的区域里显示，主要用于中文板式的首行缩进，或是为大段的引用文本和备注做成缩进的格式。 |Qpd<L
=AF;3
基本格式如下： .R#<Q
QVmJ_WT
text-indent: 缩进距离 [(vV45(E
cnDF`7xrT
缩进距离取值： g>a% gVly
ACI.{`SrQ=
·带长度单位的数字 MRHRa
6I|9@~!y[
·比例关系 7c<_j55(
K]^Jl0
但是需要注意的是，在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，其实事实并非如此，整个浏览器的窗口才是浏览器所默认的参照物。 s-F3(mc(
M?DXCsZ,)s
另外，text-indent是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。

阿七

2006-04-04 13:44

九．控制颜色和背景的样式 Fz]!2rt
eGI&4JgJ.
控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。 V&d?4i4/Q
z|zd=3c
1．颜色属性 >yr3C
q/3co86c
基本格式如下： :;o?d&C
a&gf0g;@I
color: 参数 m8&XW2S
JvD`RUh
颜色参数取值范围： Q0TKM>
u6P U(f
·以RGB值表示 * Vymb
C] |m|`
·以16进制（hex）的色彩值表示 @C5%`{\
T`)uR* $
·以默认颜色的英文名称表示 fq0[7Yb
-257g;
以默认颜色的英文名称表示无疑是最为方便的，但由于预定义的颜色种类太少，所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多，不但可以用数字的形式精确地表示颜色，而且也是很多图像制作软件（如Photoshop）里默认使用的规范，这样一来就为图片和网页更好地结合打下了坚实的基础。 A Zv| |8p
,+RoJwi m
2．背景颜色 A|P `\_
Td ![Id
在HTML当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了，而且对象的范围很广，可以是一段文字，也可以只是一个单词或一个字母。 U,nQnD"!t&
SwmX_F#_
基本格式如下： bqUQadDB
QEl~uhc3
background-color: 参数 :,=Z)e
x:IY6 l
参数取值和颜色属性一样。 0mR
LY(h>`
3．背景图片 ij1g2^],4
n0ls a@l
基本格式如下： }F (lffb
\(xQ'AQ-
background-image: url(URL) hdee]qLS
.;~K*GC
URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径，将什么也不显示。 6c&OR2HGqO
E{6X-C[)v
4．背景图片重复 `G.:G/b%H
@5(HRd
背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。 &0S/]E`_M
p=J9N-EM
基本格式如下： a fhZM$
d@t3C8
background-repeat: 参数 L\asrdL?=
t9 m],aH
参数取值范围： SvGs?nUU
E|Z7art
·no-repeat：不重复平铺背景图片 pvJPMx
ihdtq
·repeat-x：使图片只在水平方向上平铺 *npe]cC
-d6*M*{|
·repeat-y：使图片只在垂直方向上平铺 T3 k#6N.
h8_~ OX
如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。 #`H^8/!e
F I\V6\B/
5．背景图片固定 >zDnJb&"&
SbW6O_
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。 )WFSUZ~
RycO8z*p
基本格式如下： XOy#?X/`
oos35xV.
background-attachment: 参数 J;wA
Zb7:qe<UN
参数取值范围： gZs8BKO
lFY;O !Y5\
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动 prY9SQd
^$y_~z3o#7
·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动 (IR'~:W
'm=9&?0S
6．背景定位 (Rk g
EF{_-FXY
背景定位用于控制背景图片在网页中显示的位置。 -~h2^Oez
5aTyM_x
基本格式如下： 4>^ %_Xj[
E}qeh"sJt
background-position: 参数表 6P;1I+5m{q
vwzTrWA=
参数取值范围： B%9[
$hO8 S=
·带长度单位的数字参数 qhpq\[U6in
M T#9x>
·top：相对前景对象顶对齐 k>n^QHM
4#=!VK8ZH
·bottom：相对前景对象底对齐 eeb8v:4
g m],
·left：相对前景对象左对齐 a@,tf'Sr
Ye!=
·right：相对前景对象右对齐 Hv0sl+
miHW1h[=
·center：相对前景对象中心对齐 Z/uRz]Hi
L*h X_8J
·比例关系 Yjk A^e
kC9A
参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。

阿七

2006-04-04 13:44

十．控制列表的样式 r?/>t1Z
W {dx\+
列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。 GJy,)EO6{
|Be.r{l
样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。 9fl !CG
J;q3 fa
1．列表符号 xI:;%5{LN
"l +Jx|h\
列表符号是指显示于每一个列表项目前的符号标识。 x=au.@psBS
J;_JHlK
基本格式如下： ={L:q8v)
B4|%E$1+
list-style-type：参数 s:]rL&|
At bqj?
参数取值范围： ki+9Ln;
v@t*iDa?7
·disc：圆形 D *LZ_
06Hn:IT18
·circle：空心圆 y:|7.f
h0^V!.-5
·square：方块 nW drVT$
W>DpDrO4ml
·decimal：十进制数字 o$-8V:)6d
)E[5lD61
·lower-roman：小写罗马数字 s~]nsqLt9p
$Jr`4s
·upper-roman：大写罗马数字 O5=ggG
PO%]Jme
·lower-alpha：小写希腊字母 "BVz5?
\W(p)M
·upper-alpha：大写希腊字母 %~W }262
f^% E]ki
·none：无符号显示 k]>k1Mi=
=6W:O
参数中的disc是默认选项。 h?ia4t
-y\N9
2．图形符号 Bs1-UI}+
E%;'3Qykva
图形符号指原来列表的项目符号将可以使用图形来代替。 H]!y |p
.gPsJ?b
基本格式如下： mhVoz0%1X
*g,?13Q_
list-style-image：URL R_N<j
oOL3O@)w>
URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。 3w9 ]@kU
ipzUF o<w
3．列表位置 bK].qN
NSgHO`gU8
列表位置描述列表在何处显示。 >C-_Zv<!T\
/-hF<oNQ
基本格式如下： nM; G; T
(En\odbvt
list-style-position：参数 wr$}AX
:HE]P)wz-
参数取值范围： f~q&.,I(
lQsQRp
·inside：在BOX模型内部显示 `JE>GZY
>#:/ GN?
·outside：在BOX模型外部显示 NI1HUU Zz
XsOOkf\_
这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。 9_Re,h
|tg?b&QR
十一．控制用户界面的样式 FR}H$R7#
=_'cG:=)
在网页上，鼠标平时呈箭头形，指向链接时成为手形，等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么，但这些好像还不能完全地满足我们的需要。就拿链接来说，可以是指向一个帮助文件，也可以是向前进一页或是向后退一页，针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是，CSS提供了多达13种的鼠标形状，供我们选择。 f)zg&Ib
nP3GI:mjL
基本格式如下： Y/S3)o
_on p%*
cursor：鼠标形状参数 N4To#Q1w
B\_u${C
CSS鼠标形状参数表： gFT~\3jp=
A(n=kx
CSS代码 M?B(<j1Ri
~+#--BhV
鼠标形状 ,8IAhQa
j/9QV
style="cursor:hand" 5(|M["KK~
4VNb`!e
手形 :Nz?<3R0\
<M,H9^&#l3
style="cursor:crosshair" rh`.$/^
,Us2UEWNv
十字形 EB>B,#
*kQCW#y0
style="cursor:text" 8},<e>q
kz0=GKic
文本形 T@|l@xm~L
(s"iC:D6U
style="cursor:wait" 'yd@GQM&
Lq-33#n/
沙漏形 Q)S>VDLA
3%R{"Q"
style="cursor:move" R|1xXDLm*E
ck+b/.gw`
十字箭头形 `4%;qLxngP
:wU_-{>>2
style="cursor:help" &|N%#pYS
NQC3!=pQ}Y
问号形 &$c5~9p\B
h}|6VJ@.
style="cursor:e-resize" nG"n-$A?<
gcg>Gjp
右箭头形 w(/DTQc~d
mP pvZ
style="cursor:n-resize" :)p)=c8%
$J"%I$%X=
上箭头形 YOV :
WRD A `
style="cursor:nw-resize" W|d pFh`
k&)K(
左上箭头形 VLsh=v
qL| 5-(P
style="cursor:w-resize" H`m:X,6}
f.oP
左箭头形 pe()f/Jx(
[ -ISR7D
style="cursor:s-resize" p9-0?(]
J&eAL3"GF
下箭头形 ]@X{dc
HG2GZ}~^1
style="cursor:se-resize" _Vjpw,
.^i<xY
右下箭头形 {A|bBg1!
n]+.
style="cursor:sw-resize" ?6i;)eIOI
?g2zmI!U
左下箭头形