常州五颜六色网络技术有限公司 -> 网站建设 -> CSS实用教程(二) 登录 -> 注册 -> 回复主题 -> 发表主题

阿七 2006-04-04 13:44
七.控制文字的样式 HLDv{G'7  
h/\ Zq  
控制文字的样式包括文字大小写、文字修饰两个部分。 Pzzzv^+  
N<<wg{QO  
1.文字大小写 P??P"^hU  
:* |WE29U  
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写,而可以在输入完毕后,再根据需要对局部的文字设置大小写。 1N$OXLu  
X1B)(|7$  
基本格式如下: WP\kg\o  
^^ix4[1$Z  
text-transform: 参数 apJXRH`  
V_$<^z|  
参数取值范围: 8u)>o* :  
ECL{`m(#n  
·uppercase:所有文字大写显示 \bF<f02P  
F7C+uG Ts  
·lowercase:所有文字小写显示 <^> nR3E  
/<T{g0s  
·capitalize:每个单词的头字母大写显示 M<l<n$rYS  
]:F !h2  
·none:不继承母体的文字变形参数 \>oy2{=;'  
*\:sHVyG(  
注意:继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 `j'1V1  
#G(ivRo  
2.文字修饰 KIY`3Fl09  
Y#9bM $x7  
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 45-x$o  
(0y!{ (a  
基本格式如下: >u0XV"g$  
R9-mq; u+  
text-decoration: 参数 fbdpDVmpU  
H^o_B1  
参数取值范围: k&[6Ld0~56  
a)S6Z  
·underline:为文字加下划线 2V; Dn$q  
q l5&&e=-  
·overline:为文字加上划线 dqB N_P%  
\AI-x$5R*  
·line-through:为文字加删除线 VL"Cxs  
T_wh)B4xW  
·blink:使文字闪烁 m%;LJ~R  
)B+zv,#q  
·none:不显示上述任何效果 /`#JM  
/VEK<.,aMv  
八.控制文本的样式 yZoJD{'?Sw  
.n.N.e  
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 ^HuB40  
 (t@!0_5  
1.单词间距 BVus3Y5IJQ  
c1R[Hck  
单词间距指的是英文每个单词之间的距离,不包括中文文字。 XN\rq=  
.*+jD^Gr  
基本格式如下: 3)e{{]6  
<dXeP/1w`  
word-spacing: 间隔距离 i&)([C0z$  
Wi\k&V.mE  
间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。 9`H4"H>yG  
# eFdu  
2.字母间距 _T805<aUW\  
Ui1s ]R  
字母间距是指英文字母之间的距离,功能、用法,以及参数的设置和单词间距很相似。 #Lk~{  
/&czaAR-  
基本格式如下: P_p\OK*l]o  
sC2NFb-+&  
letter-spacing: 字母间距 u2fp~.'P  
+RiI5.$=Z  
3.行距 S$40nM  
z7P~SM  
行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。 J5<1 6}*  
$n47DW &  
基本格式如下: /m^G 99N  
GlC(uhCpV  
line-height: 行间距离 AG;KXL[V  
g"c7$  
行间距离取值: Gfy9YH~  
;"RyHow  
·不带单位的数字:以1为基数,相当于比例关系的100% MpJ\4D5G  
UV{})T*s  
·带长度单位的数字:以具体的单位为准 6iHY{WcDj  
>'WTVj`  
·比例关系 c7WOcy@M  
,I]]52+?4  
注意:如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。 0G Q8} r  
zF? 6"  
4.文本水平对齐 ]ab q$Y'  
(Gapv9R  
文本水平对齐可以控制文本的水平对齐,而且并不仅仅指文字内容,也包括设置图片、影像资料的对齐方式。 QvOl-Lfc  
k$DRX) e  
基本格式如下: mjk<FXW  
bwszfPM  
text-align: 参数 i3$G)W  
vD/l`Ib:  
参数的取值: j>.1RG  
F/:%YR;  
·left:左对齐 3.ShAL  
P"@^BQ4  
·right:右对齐 WqCj;Tj|  
CEzdH!nP  
·center:居中对齐 Q+_z*  
t.bM]QU!1  
·justify:相对左右对齐 *7L1SjZw  
x~D8XN{  
但需要注意的是,text-alight是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 :eevc7  
NMrf I0tbG  
5.文本垂直对齐 txX>z R*)  
l!\~T"-7;:  
文本的垂直对齐应当是相对于文本母体的位置而言的,不是指文本在网页里垂直对齐。比如说,表格的单元格里有一段文本,那么对这段文本设置垂直居中就是针对单元格来衡量的,也就是说,文本将在单元格的正中显示,而不是整个网页的正中。 KO"+"1 .  
?T|0"|\"'  
基本格式如下: 3mg:9]X9  
']1a  
vertical-align: 参数 REsw=P!b  
A#i[Us|  
参数取值: aQ&K a  
&W `7 b<  
·top:顶对齐 cveQ6 -`K  
p^ OHLT  
·bottom:底对齐 sEL0h4  
#hXvGon$?  
·text-top:相对文本顶对齐 WWOj ck #  
(>lH=&%zj  
·text-bottom:相对文本底对齐 u6MU @?  
:6o|6MC!  
·baseline:基准线对齐 zzd PR}VG  
)6o%6$c  
·middle:中心对齐 S&J5QZjC  
3Lv5>[MnN  
·sub:以下标的形式显示 :1]J{,VG  
3h A5"G+7  
·super:以上标的形式显示 kcMg`pJ4<  
% <U0  
6.文本缩进 g{kjd2  
s={IKU&m[  
文本缩进可以使文本在相对默认值较窄的区域里显示,主要用于中文板式的首行缩进,或是为大段的引用文本和备注做成缩进的格式。 GSfU*@L3  
[N"=rY4G  
基本格式如下: M.EL^;r  
K@:t6  
text-indent: 缩进距离 pP# |: %  
M(^ e) 7a1  
缩进距离取值: 5%@~"YCo  
Tiimb[|  
·带长度单位的数字 ##Qy6Dc  
T!^v^m@>y  
·比例关系 6X!jNh$oF  
2|NQ5OA0  
但是需要注意的是,在使用比例关系的时候,有人会认为浏览器默认的比例是相对段落的宽度而言的,其实事实并非如此,整个浏览器的窗口才是浏览器所默认的参照物。 k(@W z>aCv  
:0bjPQj  
另外,text-indent是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。

阿七 2006-04-04 13:44
九.控制颜色和背景的样式 jzwHb'4B3  
0oqOX  
控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。 BA8!NR|  
~(=5`9  
1.颜色属性 *r7%'K{ C  
Yjl:i*u/  
基本格式如下: r"t,/@`n  
g[\8s~g,  
color: 参数 ]LMtZUz  
[jGE {<Je  
颜色参数取值范围: -KZ9TV # R  
:b!&Xw$  
·以RGB值表示 #vAqqAS`,  
E?VOst&  
·以16进制(hex)的色彩值表示 E 5mYFVK  
def\=WyK  
·以默认颜色的英文名称表示 Digx#'#jf  
J0o,ZH9  
以默认颜色的英文名称表示无疑是最为方便的,但由于预定义的颜色种类太少,所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多,不但可以用数字的形式精确地表示颜色,而且也是很多图像制作软件(如Photoshop)里默认使用的规范,这样一来就为图片和网页更好地结合打下了坚实的基础。 3{TE6&HIa  
L[U?{  
2.背景颜色 : 4LWm<P  
O:8Ne*L`D  
在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。 -U;=]o1  
_,f7D/dq  
基本格式如下: \KKE&3=  
"#h/sAIs  
background-color: 参数 Q<yvpT(  
BHU=TK@GR  
参数取值和颜色属性一样。 162Dj$   
<@y(i kp>  
3.背景图片 [}}q/7Lp  
oq,*@5xV2  
基本格式如下: :w7?]y6~S  
4{0vdpo3F  
background-image: url(URL) f9O_M1=|lo  
uc J8l(?Qc  
URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。 (@bq@0g  
=6=l.qyYK  
4.背景图片重复 iEbW[sX[ 4  
8 k_hX^  
背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。 X<f4X"y  
V|<'o<h8  
基本格式如下: c4bvJy8  
7324#HwS  
background-repeat: 参数 om6`>I*  
2<d'!cm  
参数取值范围: 9j5B(_J^  
z$VVt ?K  
·no-repeat:不重复平铺背景图片 IU"8.(;o  
H)rJ >L  
·repeat-x:使图片只在水平方向上平铺 HaF&ooI5+  
q35=_'\W  
·repeat-y:使图片只在垂直方向上平铺 !|cM<}TF,  
hK3Twzte  
如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。 YI]/gWeu  
X3y28 %R   
5.背景图片固定 @}' ?o_/C  
]puDqu5!  
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。 r'@7aT&_  
ft!D2M  
基本格式如下: Iomx"y] 9  
m`4N1egCt  
background-attachment: 参数 o ,8;=f,7  
Xod/GY G  
参数取值范围: WISK-z  
j ~I_by  
·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动 M1*x47bN  
:1~4X  
·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动 r]S"i$  
S5cs(}Bq  
6.背景定位 i{r[zA]$  
(T.j3@Ko  
背景定位用于控制背景图片在网页中显示的位置。 W^ eQ}A+Z  
<4I`|D3@  
基本格式如下: "a<:fEsSE  
gj }Vnv1[  
background-position: 参数表 yx7y3TSq  
04a@  
参数取值范围: `U>]*D68  
c Hnd gUW]  
·带长度单位的数字参数 A|m0.'/   
%htwq]rZd  
·top:相对前景对象顶对齐 V7k!;0u v  
"}0)~,{x B  
·bottom:相对前景对象底对齐 NH'QMjL)  
EEHTlqvR  
·left:相对前景对象左对齐 rt\.|Hr4s  
PE6ZzxR|U<  
·right:相对前景对象右对齐 G6X5`eLQ  
:=K+~?  
·center:相对前景对象中心对齐 mqiCn]8G  
~;oaW<"  
·比例关系 = @ 1{LF;  
<"7Wb"+  
参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。

阿七 2006-04-04 13:44
十.控制列表的样式 5$*=;ls>J  
RVr5^l;"  
列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉。 6vg` 8  
/7WdG)'  
样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。 ?4_ME3$t  
0fN; L;v  
1.列表符号 } ;d=  
|zy` ]p9  
列表符号是指显示于每一个列表项目前的符号标识。 R vd'uIJ  
3O|2Z~>3  
基本格式如下: QGnUPiD^  
Dp?lgw  
list-style-type:参数 bMqFrG  
@CKMJ^#|  
参数取值范围: 7H?lR~w  
K!v\r"N  
·disc:圆形 jT4 m(j  
JcC2Zn6  
·circle:空心圆 :,.HJ[Vg&  
$?DEO[p.  
·square:方块 m1RjD$fM  
Q3[nS(#Z/=  
·decimal:十进制数字 D@m3bsMwe  
AH^ud*3F  
·lower-roman:小写罗马数字 jM>;l6l  
k8,s<m  
·upper-roman:大写罗马数字 P9M%B2DQ6f  
hcR^?  
·lower-alpha:小写希腊字母 U[hokwZ  
;b 'L2  
·upper-alpha:大写希腊字母 ,hCbx #h  
eRg;)[#0>$  
·none:无符号显示 Mz; KXP  
m>!aI?g  
参数中的disc是默认选项。 UGP&&A#T-  
m" ]VQnQ  
2.图形符号 a@! O}f*  
4Dasj8GsV  
图形符号指原来列表的项目符号将可以使用图形来代替。 +ux`}L(  
A9z3SJ\vXl  
基本格式如下: w=thaF.  
5oo6d4[  
list-style-image:URL ;V bB]aUg  
.~|[* q\  
URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。 ~l*[=0}  
@QDpw1;V'  
3.列表位置 AH^'E  
o}yA{<"  
列表位置描述列表在何处显示。 hfs QAa  
hPt=j{aJ%<  
基本格式如下: X rut[)H  
 ;ih;8  
list-style-position:参数 5Z13s  
GQ*or>R1  
参数取值范围: R_#k^P^  
1:4u]$@E  
·inside:在BOX模型内部显示 avUdv V-  
>skl -f  
·outside:在BOX模型外部显示 /L` +  
TtgsM}Fm  
这里又出现了一个新的概念:BOX模型。BOX是指一种容器,包含了应用样式规则的对象,具体介绍将在后文中给出。 Qi|k,1A0  
yg"FF:^T  
十一.控制用户界面的样式 hjp,v)#  
4cDe'9 LA  
在网页上,鼠标平时呈箭头形,指向链接时成为手形,等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么,但这些好像还不能完全地满足我们的需要。就拿链接来说,可以是指向一个帮助文件,也可以是向前进一页或是向后退一页,针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是,CSS提供了多达13种的鼠标形状,供我们选择。 T|uG1  
s_U--y.2r(  
基本格式如下: K%;= i2:  
ilQt`-O!  
cursor:鼠标形状参数 COA>y?  
5B;;{GR  
CSS鼠标形状参数表: #}[NleTVt  
y.::d9v  
CSS代码 _: !7M ^IU  
Pe` jNiI  
鼠标形状 e,l-}=5* P  
l <yYfGO  
style="cursor:hand" n"nfEA3{`  
BxesoB  
手形 o RK:{?Y  
Z5[g[Q  
style="cursor:crosshair" Uf~5Fc1d =  
MZ>Q Rf  
十字形 eCG{KCM~_Z  
p+${_w>pl{  
style="cursor:text" 5e&;f  
^t,haO4  
文本形 '|G8yojz  
{N@Pk[!  
style="cursor:wait" 1+qP7 3a^  
l6.&<0pLT  
沙漏形 Ka$lNL3<j  
[ZS.6{vr  
style="cursor:move" D{JwZL@7k2  
~Jlq.S'  
十字箭头形 }Zfi/^0U  
r"dR}S.Uf  
style="cursor:help" Y /l~R7  
qpq(<  
问号形 #{J+BWP\o  
AsI.8"   
style="cursor:e-resize" WnA Y<hZ|  
<|hrmwk|  
右箭头形 zO0K*s.yK  
Jv!f6*&<  
style="cursor:n-resize" 6xu%M&h t  
oslj<  
上箭头形 im F,8'  
w{GEWD{&  
style="cursor:nw-resize" %Lq}5zB  
iDYm4sY  
左上箭头形 )/Oldyp  
^!x qOp!  
style="cursor:w-resize" %1)JRc  
m3XT8F*&  
左箭头形 ed#>q;jX  
ri4:w_/{,Y  
style="cursor:s-resize" ] ~ }~d(  
[~?6jnp  
下箭头形 IEWl I  
}TDq7-(g  
style="cursor:se-resize" IG~ Zxn1o  
v+CW([zAx#  
右下箭头形 a&[>kO  
[5Zi\'~UH)  
style="cursor:sw-resize" lo36b zbT  
#q8/=,3EG  
左下箭头形


查看完整版本: [-- CSS实用教程(二) --] [-- top --]



Copyright © 2005-2014 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Time 0.017664 second(s),query:6 Gzip enabled