» 您尚未 登录   注册 | 社区服务 | 帮助 | 社区 | 无图版


常州五颜六色网络技术有限公司 -> 网站建设 -> CSS实用教程(二)
 XML   RSS 2.0   WAP 

--> 本页主题: CSS实用教程(二) 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子

CSS实用教程(二)

七.控制文字的样式 YI&^j2  
Y7!,s-v4W  
控制文字的样式包括文字大小写、文字修饰两个部分。 /38^N|/Zr  
E]_sl/`{od  
1.文字大小写 PlTY^N6Hn  
Q]IpHNt[>  
文字大小写使网页的设计者不用在输入文字时就完成文字的大小写,而可以在输入完毕后,再根据需要对局部的文字设置大小写。 C!~&c7  
>qAQNX  
基本格式如下: :;)K> g,b  
0u -'{6  
text-transform: 参数 Z`q?pE>R  
tb{l(up/a  
参数取值范围: [fO \1J  
$6BXoh!  
·uppercase:所有文字大写显示 <Cn-MOoM  
v34XcA  
·lowercase:所有文字小写显示 umSbxEZU@  
? vk;b!  
·capitalize:每个单词的头字母大写显示 O62H4oT  
1r|'n aiZ  
·none:不继承母体的文字变形参数 Pou`PNvH  
b!ot%uZZ  
注意:继承是指HTML的标识符对于包含自己的标识符的参数会继承下来。 >%'|@75K  
`NyvJt^<  
2.文字修饰 "P"~/<:)  
LIirOf~e;!  
文字修饰的主要用途是改变浏览器显示文字链接时的下划线。 Da)9s %_4  
Fl<BCJY  
基本格式如下: :a[L-lr`e  
kImS'i{A  
text-decoration: 参数 / ~w\Npf0  
IF$f^$  
参数取值范围: *:aJlvk  
gGH<%nHW1  
·underline:为文字加下划线 aXhgzI5]  
$ R,7#7bG  
·overline:为文字加上划线 mJ)o-BV  
<p-R{}8  
·line-through:为文字加删除线 %Z}A+Rv+*m  
Qt+ K,LY  
·blink:使文字闪烁 OB>Pk_eQK  
NYm2fFPc  
·none:不显示上述任何效果 jDqe)uVvtV  
G= !Gy.  
八.控制文本的样式 ggzg, ~V  
)apqL{u:=  
控制文本的样式包括单词距离、字母距离、文本行距、文本水平对齐、文本垂直对齐文本缩进六个部分。 cX 9 !a,  
&CV%+  
1.单词间距 %J5zfNe)&  
*[) b}?  
单词间距指的是英文每个单词之间的距离,不包括中文文字。 CC;T[b&  
C1:efa<wV  
基本格式如下: ,JYvfCA  
J'G 6Z7  
word-spacing: 间隔距离 b*+Od8r  
CE=&ZHt9  
间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。 NldeD2~H  
WZOi,  
2.字母间距 %AwR4"M  
F.<sKQ&A  
字母间距是指英文字母之间的距离,功能、用法,以及参数的设置和单词间距很相似。 N,0l5fD~T  
f"\G"2C  
基本格式如下: (C dx7v2Nh  
dMK| l   
letter-spacing: 字母间距 /o Q^j'v  
Rf||(KC<  
3.行距 +&6R(7XC  
..` J-k  
行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。 [xe(FFl+  
!C]0l  
基本格式如下: i0; p?4`m  
A\nL(Nd  
line-height: 行间距离 }F=scbpXj  
wl|cipy"  
行间距离取值: scZdDbL6+  
XUTI0  
·不带单位的数字:以1为基数,相当于比例关系的100% 8@pY:AY  
kcGs2Y_*&  
·带长度单位的数字:以具体的单位为准 5i `q  
>={?H?C  
·比例关系 :)hS-*P  
/R\]tl#2j  
注意:如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。 A Ws y9  
tl5}#uJ  
4.文本水平对齐 YL*yiZ9  
`L n,qiA  
文本水平对齐可以控制文本的水平对齐,而且并不仅仅指文字内容,也包括设置图片、影像资料的对齐方式。 T:k-`t0":N  
7 L2$(d4  
基本格式如下:  &ig6\&1  
QCjC|T9  
text-align: 参数 kY MKVR  
9HJrMX  
参数的取值: 9C9>V]  
tgeX~.  
·left:左对齐 od\-o:bS  
Fb8~2N"3  
·right:右对齐 R<wP O-dX  
;J<K/YdI  
·center:居中对齐 nKxu8YAJe  
:g@H= W  
·justify:相对左右对齐 _4~'K?  
N`o[iHUj \  
但需要注意的是,text-alight是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。 ^xz*%2@  
R1A|g =kF  
5.文本垂直对齐 $"#2hVO  
9U bD =}W  
文本的垂直对齐应当是相对于文本母体的位置而言的,不是指文本在网页里垂直对齐。比如说,表格的单元格里有一段文本,那么对这段文本设置垂直居中就是针对单元格来衡量的,也就是说,文本将在单元格的正中显示,而不是整个网页的正中。 (t Y0/s  
cviPCjM  
基本格式如下: Cf&.hod  
'#Yqs/V  
vertical-align: 参数 SLGo/I*  
IhRWa|{I  
参数取值: TDqH"q0  
^}VAH#c  
·top:顶对齐 #Cy9E"lP  
yAyq-G"sO  
·bottom:底对齐 on0MhW  
d<,'9/a>  
·text-top:相对文本顶对齐 16pk4f8  
tV'>9YVdG  
·text-bottom:相对文本底对齐 PjxZ3O  
!=/wpsH  
·baseline:基准线对齐 JI5%fU%O#n  
|O! G[|/3  
·middle:中心对齐 _{k-&I  
wr`+xYuuC=  
·sub:以下标的形式显示 ZYMacTeJjg  
XCAy _fL<B  
·super:以上标的形式显示 PKxI09B  
ORdS|y;:  
6.文本缩进 V s"1:gi&  
dm(Xy'*iQ  
文本缩进可以使文本在相对默认值较窄的区域里显示,主要用于中文板式的首行缩进,或是为大段的引用文本和备注做成缩进的格式。 /%F}vW(!  
1 x'H #  
基本格式如下: \OlB (%E7  
Dr oa1_FX  
text-indent: 缩进距离 ]iq2_{q  
cxig<W  
缩进距离取值: ?LAiSg=eq  
<0h,{28  
·带长度单位的数字 Acl?w }Y  
+U^H`\EUr  
·比例关系 s9\N{ar#  
N'@E^ rYc  
但是需要注意的是,在使用比例关系的时候,有人会认为浏览器默认的比例是相对段落的宽度而言的,其实事实并非如此,整个浏览器的窗口才是浏览器所默认的参照物。 {k15!(:i~a  
n~mP7X%wE7  
另外,text-indent是块级属性,只能用于< p>、< blockquqte>、< ul>、< h1>~< h6>等标识符里。

[楼 主] | Posted: 2006-04-04 13:44 顶端
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子



九.控制颜色和背景的样式 3\Tqs  
V:h3F7  
控制颜色和背景的样式包括颜色属性、背景颜色、背景图片、背景图片重复、背景图片固定、背景定位六个部分。 FC q&-  
|TQa=  
1.颜色属性 ewO e A|  
B "3uuk8  
基本格式如下: 4#&w-W  
z:W|GDD1  
color: 参数 .-?Txkwb  
N/8_0]Gf  
颜色参数取值范围: aFd87'^  
m* rw?nLZ  
·以RGB值表示 wak`Jte=}m  
+O?`uV  
·以16进制(hex)的色彩值表示 (Nn)_caVb  
.,&6 x.  
·以默认颜色的英文名称表示 Hq0O!Zv  
~4=XYYcka  
以默认颜色的英文名称表示无疑是最为方便的,但由于预定义的颜色种类太少,所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多,不但可以用数字的形式精确地表示颜色,而且也是很多图像制作软件(如Photoshop)里默认使用的规范,这样一来就为图片和网页更好地结合打下了坚实的基础。  G4{TJ,~  
T&u25"QOf  
2.背景颜色 QB6. o6  
WF`  
在HTML当中,要为某个对象加上背景色只有一种办法,那就是先做一个表格,在表格中设置完背景色,再把对象放进单元格。这样做比较麻烦,不但代码较多,还要为表格的大小和定位伤些脑筋。现在用CSS就可以轻松地直接搞定了,而且对象的范围很广,可以是一段文字,也可以只是一个单词或一个字母。 x>[f+Tc  
tr$d?  
基本格式如下: ^)S<Ha  
uE^5o\To  
background-color: 参数 g<s;uRA4O9  
drd5o Z  
参数取值和颜色属性一样。 ,Lr}P  
'tMS5d)4:  
3.背景图片 Bt(U,nFB  
)g[7XB/w  
基本格式如下: .( X!*J]G  
?Suv.!wfLl  
background-image: url(URL) I^!c1S   
0uhIJc'2  
URL就是背景图片的存放路径。如果用“none”来代替背景图片的存放路径,将什么也不显示。 k?`Q\  
.7r$jmuFs  
4.背景图片重复 ydf;g5OZ  
?Y'r=Q{w  
背景图片重复控制的是背景图片平铺与否,也就是说,结合背景定位的控制可以在网页上的某处单独显示一幅背景图片。 v0,&wdi  
$X]Z-RCK3  
基本格式如下: 0&2eiMKG?n  
%lqrq<Xn  
background-repeat: 参数 &d&nsQ  
L; 'C5#GN  
参数取值范围: [A46WF>L  
$[g8j`or!  
·no-repeat:不重复平铺背景图片 EV|L~^Q  
*}Nh7 >d(  
·repeat-x:使图片只在水平方向上平铺 5gbD|^ij  
pb}4{]sI  
·repeat-y:使图片只在垂直方向上平铺 Jec<1|  
?J's>q^X  
如果不指定背景图片重复属性,浏览器默认的是背景图片向水平、垂直两个方向上平铺。 A^@,Ha  
UVaz,bXla  
5.背景图片固定 ky0,#ZOF  
\aB"D=P\ok  
背景图片固定控制背景图片是否随网页的滚动而滚动。如果不设置背景图片固定属性,浏览器默认背景图片随网页的滚动而滚动。为了避免过于花哨的背景图片在滚动时伤害浏览者的视力,所以可以解除背景图片和文字内容的捆绑,该为和浏览器窗口捆绑。 "7_qB8\  
'QxPQ cU  
基本格式如下: jW0aIS2O  
">rt *?^  
background-attachment: 参数 ["XS|"DM  
0/0rWqg /  
参数取值范围: $-;x8O]u  
k80!!S=_>  
·fixed:网页滚动时,背景图片相对于浏览器的窗口而言,固定不动 <]kifiN#  
jG~UyzWH;  
·scroll:网页滚动时,背景图片相对于浏览器的窗口而言,一起滚动 J&jig?t  
>? ({  
6.背景定位 2Ik@L,  
NZ?|#5 3  
背景定位用于控制背景图片在网页中显示的位置。 4 Q FX  
"f3KE=cUm  
基本格式如下: wO3K2I]>0  
&4-rDR,  
background-position: 参数表 ]z_C7Y"4BR  
DC8,ns]!y  
参数取值范围: Dt8wd,B  
b6~MRfx`7  
·带长度单位的数字参数 &+>)H$5  
BdZO$ALXL  
·top:相对前景对象顶对齐 sT"h)I)]*  
w =S7zzL)  
·bottom:相对前景对象底对齐 A`qb5LLJ)  
\qh -fW; #  
·left:相对前景对象左对齐 p$A`qx<M_  
smt6).o  
·right:相对前景对象右对齐 M=aWL!nJ  
UCP4w@C  
·center:相对前景对象中心对齐 1*Ui=M4  
C5jR||  
·比例关系 X[ o9^<  
wf8GH}2A  
参数中的center如果用于另外一个参数的前面,表示水平居中;如果用于另外一个参数的后面,表示垂直居中。

[1 楼] | Posted: 2006-04-04 13:44 顶端
阿七




该用户目前不在线
级别: 未验证会员
精华: 0
发帖: 909
威望: 0 点
金钱: 2161 RMB
贡献值: 0 点
在线时间:512(小时)
注册时间:2006-03-29
最后登录:2008-08-07
查看作者资料 发送短消息 推荐此帖 引用回复这个帖子



十.控制列表的样式 (mJqI)m8  
kGZ_/"iuO  
列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业,并让浏览者有一目了然的感觉。 @Pc]qu  
g(0 |p6R  
样式表为列表增加了一些功能,控制列表的样式包括列表样式、图形符号、列表位置三个部分。 {A2SG#}  
sgn,]3AUq  
1.列表符号 wZECG-jr/  
t;@VsQ8  
列表符号是指显示于每一个列表项目前的符号标识。 LyB$~wZx~@  
Gd~Xvw,u  
基本格式如下: >_biiW~x:  
%8T:rS  
list-style-type:参数 I,r 3.2u  
Y p`6305f  
参数取值范围: O\  T  
,0#5kc*X  
·disc:圆形 .d5|Fs~B  
W.ud<OKP90  
·circle:空心圆 OH28H),}  
G^F4c{3c~  
·square:方块 W9?Yzl  
-0Q:0wU  
·decimal:十进制数字 :XMw="u=  
Wx&AY"J  
·lower-roman:小写罗马数字  j$#pG  
WIo^=?%  
·upper-roman:大写罗马数字 aI |<t^X  
)}?'1ciHI  
·lower-alpha:小写希腊字母 MjG=6.J|`  
RC8{QgaI  
·upper-alpha:大写希腊字母 Um\Nd#=:  
~\K+)(\SNp  
·none:无符号显示 uG3t%CmN  
xkOyj`IS  
参数中的disc是默认选项。 v|jBRKU99  
9p(s FQ [  
2.图形符号 E/(:\Cm^  
4D[W;4/p  
图形符号指原来列表的项目符号将可以使用图形来代替。 zb~!> QIz{  
au5 74tj  
基本格式如下: XN] kNJX  
J']1^"_'  
list-style-image:URL /g'F+{v  
E$f.&< >T  
URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。 R |8)iW^  
B4GgR ,P@S  
3.列表位置 TeG5|`t],  
I2%{6g@  
列表位置描述列表在何处显示。 zF(I#|Vo  
]gkI:scPA  
基本格式如下: pF#nj`L  
>mT2g  
list-style-position:参数 &K)c*' l  
<"AP&J'H  
参数取值范围: ,S:LhgSP  
hI;tB6  
·inside:在BOX模型内部显示 r.[!n)*  
[st4FaQ36  
·outside:在BOX模型外部显示  MI!C%  
}Hrm/Ni  
这里又出现了一个新的概念:BOX模型。BOX是指一种容器,包含了应用样式规则的对象,具体介绍将在后文中给出。 P$N\o@  
%IW=[D6Tg  
十一.控制用户界面的样式 U8?QyG 2A  
TNUzNA  
在网页上,鼠标平时呈箭头形,指向链接时成为手形,等待网页下载时成为沙漏形……这似乎是约定俗成的。虽然这样的设计能使我们知道浏览器现在的状态或是可以做什么,但这些好像还不能完全地满足我们的需要。就拿链接来说,可以是指向一个帮助文件,也可以是向前进一页或是向后退一页,针对如此多的功能光靠千篇一律的手形鼠标是不能说明问题的。值得庆幸的是,CSS提供了多达13种的鼠标形状,供我们选择。 :|M0n%-X  
' F?T4  
基本格式如下: (m\PcF  
B~V^?."  
cursor:鼠标形状参数 VW I{ wC  
6^s=25>p  
CSS鼠标形状参数表: n87B[R  
+S5"4<  
CSS代码 J p!Q2}  
\&`S~cV9  
鼠标形状 CQW#o_\  
&#F>%~<or  
style="cursor:hand" p}.L]Y  
xJa  
手形 (g`G(K_  
!=3[Bm G  
style="cursor:crosshair" t Q385en  
Q35$GFj"jD  
十字形 s% 2w&Us*  
R7r` (c!  
style="cursor:text" :$~)i?ge<5  
NGOc:>}k>  
文本形 l<>syHCH;L  
(, /`*GC  
style="cursor:wait" )q 8w+'z  
s {p-cV  
沙漏形 $l@n k@  
{`2! 3= "  
style="cursor:move" rkugV&BhV  
ON.C%-T-  
十字箭头形 47 xyS%X  
HT0VdvLw  
style="cursor:help" 1G$fU zS  
E #q gt9  
问号形 Yj3j?.JJk  
mSF>~D1_  
style="cursor:e-resize" Q>Voa&tYn  
^aYlu0Wm  
右箭头形 vikA  
_<s[HGA`z  
style="cursor:n-resize" a9]F.Jm  
ecaEWIOG  
上箭头形 @{N2I$%6  
9'nM$ a  
style="cursor:nw-resize" TgMa! Vz  
HY-7{irR~  
左上箭头形 H@Yj  
(mbC! !>  
style="cursor:w-resize" 9<0TF+}>  
^{Wx\+*!  
左箭头形 aT|SKb`  
2E5n07,  
style="cursor:s-resize" !|4fww  
F{*{f =E!B  
下箭头形 Q1f)uwh  
%G6Q+LMwm  
style="cursor:se-resize" Ac^hZ.qPz  
pHKcKqB*13  
右下箭头形 P:D@ 5  
, e^&,5b  
style="cursor:sw-resize" 9;2{=,  
WO;2=[#O;  
左下箭头形

[2 楼] | Posted: 2006-04-04 13:44 顶端

常州五颜六色网络技术有限公司 -> 网站建设



Copyright © 2005-2009 5y6s Inc. 苏ICP备05001866号 Powered by PHPWind 5.0.1
Total 0.020682(s) query 7, Gzip enabled
会员言论不代表本站立场 本站法律顾问:北京汇泽律师事务所 韩律师
QQ:点击这里给我发消息 /点击这里给我发消息 /点击这里给我发消息