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

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

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

阿七

2006-04-04 13:44

七．控制文字的样式 {dk%j~w8
W :qQ
控制文字的样式包括文字大小写、文字修饰两个部分。 O:hCUr
;n"Nv}<C
1．文字大小写 7E}.P1
>0kZ-M5
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写，而可以在输入完毕后，再根据需要对局部的文字设置大小写。 L]_1z
}0%~x,
基本格式如下： &E(KOfk#
6n
text-transform: 参数 a'U}.w}
oOj7y>Nm
参数取值范围： K:osfd
qMj'%5/
·uppercase：所有文字大写显示 !qF U
^/H9`z;
·lowercase：所有文字小写显示 ?mRGFS
1F*3K3T {
·capitalize：每个单词的头字母大写显示 oQ=v:P]
&:3uK`
·none：不继承母体的文字变形参数 +;ILj<!Z7
?c$z?QTMJ
注意：继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 ks}J ke>
ry2ZVIFa
2．文字修饰 d[p-zn.
~eVq Fc
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 V5ySOgzw,
b#17N2xkT
基本格式如下： Q|gRBu
O@Ro_sPG(
text-decoration: 参数 ;F/yS2p
,bLHkBK
参数取值范围： npj_i /&g
vjzpU(Sq#
·underline：为文字加下划线 24}?GO
vq.~8c1
·overline：为文字加上划线 U@6bH@v5
{D6E@a
·line-through：为文字加删除线 MKnG:)T<?l
sp2"c"_+
·blink：使文字闪烁 5)T=^"IHXi
iPD5 KsAOA
·none：不显示上述任何效果 |SO?UIWp
&yQi lyU{V
八．控制文本的样式 &EELq"5K
tR! !Q
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 `.Oj^H6
-= tf)
1．单词间距 L7gZ4Hu=`
MM+xm{4l
单词间距指的是英文每个单词之间的距离，不包括中文文字。 c7E|GZ2Hc
#[Z1W8e
基本格式如下： {.D^2mj|
MHuQGc"e+4
word-spacing: 间隔距离 ^P NE6
j,]KidDWm
间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。 r I-A)b4
NSsLuM=.
2．字母间距 ^`HP&V
F+c4v A})
字母间距是指英文字母之间的距离，功能、用法，以及参数的设置和单词间距很相似。 ]12ypcf
dN8@ 0AMSf
基本格式如下： b3zxiq x
*-zOQ=Y
letter-spacing: 字母间距 +K@wh
b_'VWd:am
3．行距 hHu?%f*
o>#ue<Bc6
行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。 VJ8"Q
bg =<)s
基本格式如下： Z{MR#.I
@_ZE_n
line-height: 行间距离 0-=PP@W
jQV.U~25Q
行间距离取值： KeGGF]=>
; xz}]@]Ar
·不带单位的数字：以1为基数，相当于比例关系的100% fx"~WeVcO
]46-Tu H
·带长度单位的数字：以具体的单位为准 G]$.bq[v
,WA[HwY-
·比例关系 @ uF$m/g
CZ~%qPwDw
注意：如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。 *oW^P~m/
,~TV/l<
4．文本水平对齐 Vt[Kr
Tp.t.Qic
文本水平对齐可以控制文本的水平对齐，而且并不仅仅指文字内容，也包括设置图片、影像资料的对齐方式。 "A>/m"c]*
"fq8)
基本格式如下： q ?qpUPzD
Rr!oT?6J?
text-align: 参数 zg[.Pws:E
?!{nNJ
参数的取值： Cbq|<p# #o
-:P`Rln
·left：左对齐 {<k}U;uiO
Y;B#_}yF
·right：右对齐 (e~vrSk+)~
yClbM5,
·center：居中对齐 ,<cF<9h
@9}SHS
·justify：相对左右对齐 4or8fG
&l| : 1
但需要注意的是，text-alight是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 oKlOcws}
OpT0V]k^"9
5．文本垂直对齐 ;i,:F`b~
8>(DQ"h
文本的垂直对齐应当是相对于文本母体的位置而言的，不是指文本在网页里垂直对齐。比如说，表格的单元格里有一段文本，那么对这段文本设置垂直居中就是针对单元格来衡量的，也就是说，文本将在单元格的正中显示，而不是整个网页的正中。 Hrdz1:#6,
uV'w0`$y
基本格式如下： P:3%#d~q
j}devpO
vertical-align: 参数 aDreN*n
_;x7vRWmN
参数取值： { +.ai8
G"'[dL)N>
·top：顶对齐 Ov5*&*P
61}hB>TT:
·bottom：底对齐 }K%y'D
HNj6Iw
·text-top：相对文本顶对齐 ]*Tnu98G}
)ZP-t!).G#
·text-bottom：相对文本底对齐 VSJ08Ngi
Gf|qc>j.b
·baseline：基准线对齐 6x_tX
:.k)!
·middle：中心对齐 ONkHHyT
KJf~9w9U
·sub：以下标的形式显示 ;J)8#|
]("5O V5
·super：以上标的形式显示 f4k\hUA
ZMVQo-=
6．文本缩进 b[MdA|C%j
)L%i"=<Bdy
文本缩进可以使文本在相对默认值较窄的区域里显示，主要用于中文板式的首行缩进，或是为大段的引用文本和备注做成缩进的格式。 Fk 5;
^uy2qO4Yw
基本格式如下： kr_!AW<.tz
%Ny`d49&
text-indent: 缩进距离 4G%!t`?q
V`n;W6Q17
缩进距离取值： ^lP_{c
RRNoX}
·带长度单位的数字 SQZUkKfb
4+V+ SD
·比例关系 Au6*hv3:
qXGAlCq@
但是需要注意的是，在使用比例关系的时候，有人会认为浏览器默认的比例是相对段落的宽度而言的，其实事实并非如此，整个浏览器的窗口才是浏览器所默认的参照物。 sh6F-g
A-GRuC
另外，text-indent是块级属性，只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。

阿七

2006-04-04 13:44

九．控制颜色和背景的样式 Gd)@PWK
P-L<D!25
控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。 ui4H(A'}
&0O1tM*v
1．颜色属性 DJeP]
W'\{8&:!
基本格式如下： OHzI!,2]
+MKr.k2
color: 参数 \oPW
m,3?*0BMp=
颜色参数取值范围： " *xQN "F
^3QHB1I
·以RGB值表示 w%cd$"EH
+ )?1F
·以16进制（hex）的色彩值表示 @R>4b
8vB~1tl;
·以默认颜色的英文名称表示 h2+vl@X
3|RfX
以默认颜色的英文名称表示无疑是最为方便的，但由于预定义的颜色种类太少，所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多，不但可以用数字的形式精确地表示颜色，而且也是很多图像制作软件（如Photoshop）里默认使用的规范，这样一来就为图片和网页更好地结合打下了坚实的基础。 \cvui^^n
Oh<[8S7]C
2．背景颜色 bF:vD&Sf
RX:\@c&
在HTML当中，要为某个对象加上背景色只有一种办法，那就是先做一个表格，在表格中设置完背景色，再把对象放进单元格。这样做比较麻烦，不但代码较多，还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了，而且对象的范围很广，可以是一段文字，也可以只是一个单词或一个字母。 gOa'o<
JP9eNc[
基本格式如下： $k*E^~qT
\uQB%yMoz
background-color: 参数 I(/W+ o
2|(J<H
参数取值和颜色属性一样。 mgX0@#wFn
}S3m wp<Y
3．背景图片 @DfjeS)u^
^]^Y~$u
基本格式如下： Lie\3W
J`;G9'n2
background-image: url(URL) jE2k\\<a
,\4@Ao
URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径，将什么也不显示。 `4}zB#3
d4/snvq
4．背景图片重复 Fe%Q8RIh_
{_|~G|Z
背景图片重复控制的是背景图片平铺与否，也就是说，结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。 SoS[yr
T/MbEqAf
基本格式如下： m*|3
9s6, &'
background-repeat: 参数 2!cP[Ck
6gY5v@!w
参数取值范围： lLxKC7b
=et=X_3-
·no-repeat：不重复平铺背景图片 X8<<;?L
Uc! }D
·repeat-x：使图片只在水平方向上平铺 ;:vbOG#aSN
}N:0%Gk[;
·repeat-y：使图片只在垂直方向上平铺 x,@cU}D
D&0*+6j((
如果不指定背景图片重复属性，浏览器默认的是背景图片向水平、垂直两个方向上平铺。 L qMH]W
`]_#_
5．背景图片固定 zK(9k0+s
y+_GL=J
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性，浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力，所以可以解除背景图片和文字内容的捆绑，该为和浏览器窗口捆绑。 lJpD>\$}@R
q%bNT
基本格式如下： $L)9'X
CSRcTxH
background-attachment: 参数 ={~`0,
/PE3>"|wE
参数取值范围： ;}#tm9S;
|#^u%#'[2
·fixed：网页滚动时，背景图片相对于浏览器的窗口而言，固定不动 2BS2$#c>
H|tbwU)J
·scroll：网页滚动时，背景图片相对于浏览器的窗口而言，一起滚动 1?]Gl+}
) 2wof(
6．背景定位 ^SpD)O{
_:x/\8P
背景定位用于控制背景图片在网页中显示的位置。 ^DS9D:oE
lj/?P9
基本格式如下： $2A%y14
UO5^4
background-position: 参数表 CN#`m]l.
Vl5 }m
参数取值范围： n,hHh=.Fu
H[U$4 %t
·带长度单位的数字参数 yw41/jHF
NC)Iu
·top：相对前景对象顶对齐 qXR>Z=K<
|lm
·bottom：相对前景对象底对齐 sn '#]yM
hC4##pAa
·left：相对前景对象左对齐 v T2YX5k&,
F&<si:}KB
·right：相对前景对象右对齐 8G; t[9
T~J6(,"
·center：相对前景对象中心对齐 -'QvUHL|
7pH(_-TF
·比例关系 UX}ZE.cV
*kY\,r&!P
参数中的center如果用于另外一个参数的前面，表示水平居中；如果用于另外一个参数的后面，表示垂直居中。

阿七

2006-04-04 13:44

十．控制列表的样式 E;.<'t>
Gl}[1<~o
列表是HTML里一种很有用的显示方式，可以把相关的并列内容整齐地垂直排列，使网页显得整洁专业，并让浏览者有一目了然的感觉。 ~B;kFdcVXn
_eb:"(m
样式表为列表增加了一些功能，控制列表的样式包括列表样式、图形符号、列表位置三个部分。 fDt#<f 4;
MlaViw
1．列表符号 DP ,owk
0O<g)%Vz>
列表符号是指显示于每一个列表项目前的符号标识。 JwG$lGNJ
|TL&#U
基本格式如下： Wd#r-&!6j
JJ`RF
list-style-type：参数 ]Q1?Ox:'
#=C!Xx&
参数取值范围： /.B7y(
Gx/sJ(
·disc：圆形 Y'7f"W
&x6Z=|Ers
·circle：空心圆 GcN[bH(@
#^%HJp^
·square：方块 aVkgE>
ERD( qL.J
·decimal：十进制数字 S. my" j
Hl-!rP.?0
·lower-roman：小写罗马数字 7|Z=#3INw
GF4k
·upper-roman：大写罗马数字 u'Ja9m1
|dNJx<-
·lower-alpha：小写希腊字母 r\nKJdh;ka
7|$cM7_r
·upper-alpha：大写希腊字母 ZqT8G
>f)/z$ qn
·none：无符号显示 pc9m,?n
#?=?<"*j
参数中的disc是默认选项。 `zf,$67>1
n1 k2<BU4b
2．图形符号 '+?L/|'
JH3$G,:zM
图形符号指原来列表的项目符号将可以使用图形来代替。 !~sgFR8W
t<8vgdD
基本格式如下： 6(#fGH&[
U(xN}Y?
list-style-image：URL ~H<oqk:O-
;4(ULJ*
URL是用来代替项目符号的图形文件的地址，可以使用相对地址或绝对地址。 WG~ |sLg
,=TY:U;?
3．列表位置 \\ZR~f!<
JAt$WW{
列表位置描述列表在何处显示。 h?Y->!'
N@qP}/}8
基本格式如下： 5OJ8o>BF
k4n4BL
list-style-position：参数 #'5C*RO
B|\JGnNQ
参数取值范围： Xu.Wdl/{Ra
-RLY.@'d-M
·inside：在BOX模型内部显示 E{wnhsl{
kT@m*Etr{
·outside：在BOX模型外部显示 ?IN'Dc9&%-
\X*Es.;|x
这里又出现了一个新的概念：BOX模型。BOX是指一种容器，包含了应用样式规则的对象，具体介绍将在后文中给出。 QLPb5{>KDS
C{*' p+f
十一．控制用户界面的样式 @sr~&YhA
.S_7R/2(?
在网页上，鼠标平时呈箭头形，指向链接时成为手形，等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么，但这些好像还不能完全地满足我们的需要。就拿链接来说，可以是指向一个帮助文件，也可以是向前进一页或是向后退一页，针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是，CSS提供了多达13种的鼠标形状，供我们选择。 }OsAO
`MLOf
基本格式如下： a23XrX
FHK{cE
cursor：鼠标形状参数 +QW|8b
Ueb&<tS
CSS鼠标形状参数表： S{Q2KD
"- ?uB Mz
CSS代码 X T<SR ]
{y%|Io`P
鼠标形状 |muZv!,E
!{+a2wi
style="cursor:hand" .WVIdVO7
E)iX`Xq|0{
手形 \v_R]0m\
20 Z/Y\
style="cursor:crosshair" X@Bg_9\i
[$D%]]/,
十字形 iOB*K)U1
H1d2WNr[
style="cursor:text" =X;h _GQ
M%#F"^8v
文本形 "!R*f $
jSQM3+`b
style="cursor:wait" A\})H
"9#hk3*GqX
沙漏形 Fu>;hx]s
IqFmJs|C
style="cursor:move" cp&1yB
ui80}%
十字箭头形 sitgz)Ki^
c1xX)cF
style="cursor:help" Ch)E:Dvq 6
YbF}>1/"
问号形 I9h{fB
x@*?~1ai
style="cursor:e-resize" Ckhwd
USJ4Z
右箭头形 qE.3 :bQ!`
@9lGU#
style="cursor:n-resize" . |`)k
93 /`e}P"o
上箭头形 ;x &3tN/I
[6?x 6_M
style="cursor:nw-resize" *-'`Ea
UMH~Q`"
左上箭头形 qv`:o `
`F~Fb S
style="cursor:w-resize" JEfhr
)+.AgqxI
左箭头形 R%JEx3)0m
=|d5V%mK
style="cursor:s-resize" z.W1Za
xG(:O@
下箭头形 fVZ_*'v
Q8DKU
style="cursor:se-resize" B,Jn.YX
N]|U-fN\
右下箭头形 ;e~K<vMm;y
dTVM !=
style="cursor:sw-resize" ,=P0rbtK
uMBb=
左下箭头形