|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
9 f: g0 ?2 x% u. M c8 v8 M7 ~' O) g" ]
1.基本语法规范
1 D% P# b4 U; M7 ~- g y, N |) J: p分析一个典型CSS的语句:
0 Y5 p+ ]7 z$ a9 m: ?p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
/ y! e$ T8 R9 W! ~8 j4 [其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 2 M9 K* T! ~( H c2 y& O2 ?
样式声明写在一对大括号"{}"中; + x7 u3 Z% B" \
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
4 g* O( S) ]& j+ O% D: m- a3 u& _' q"#FF0000"和"#FFFFFF"是属性的值(value)。
1 Y4 v1 Z5 ]% B- N5 g- ?! ]+ ]5 l1 h8 Q4 y( i* U5 x
2.颜色值
/ S6 d/ h2 q8 }; r. d4 C1 j' Y
/ O: q3 F- [2 `. `颜色值可以用RGB值写,例如:+ b& ^: q5 w8 e7 m% A# ?0 a
6 w3 q/ c8 S' `8 q: Z
4 u5 l5 L, J |9 a: {5 P8 }! c2 V9 K/ g& x
,也可以用十六进制写,就象上面例子
8 u% ^% O+ q$ `& Q
* N- h4 u8 R+ U0 J' P4 E: z8 O% b& L
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。0 w( h D% ]! G3 M- I6 a3 F
; R s: B# T0 C7 k7 v0 l3 p3.定义字体. L* j# G0 ]* T1 u
web标准推荐如下字体定义方法, c2 K' }9 ~" z, }- U" {
8 I$ H* w- X1 r+ ebody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
& B# `% r% _3 ?* n% c+ C* j4 r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; _8 k! l# p+ {; h1 ]$ O
Lucida Grande字体适合Mac OS X; 7 \' u% J/ l) U9 \' s2 G( |- O
Verdana字体适合所有的Windows系统;
/ q) q5 ]: J5 P- cLucida适合UNIX用户
/ S$ U% w* w2 {5 M$ `8 k' U8 D"宋体"适合中文简体用户;
* [/ S3 `+ \& ]8 P6 x7 o$ t如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
- o9 ?9 y9 o! J3 k8 [# q: I. g( l1 ?/ M
4.群选择器
% |5 C: V& i! E) G+ P, y/ @8 }' m2 L, n0 w& K+ F1 V
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
' Q4 E. \$ i3 f. k; N0 ]. ~# p
3 o6 }, G4 ^2 p7 S' b; t! U f8 t p, td, li { font-size : 12px ; } + m& v" _# W0 u7 F, U- B
就是给li下面的子元素strong定义一个斜体不加粗的样式2 w" \/ j2 s# Q/ A2 H) Q# P/ A
7 o& r/ h) o' a7 x# ?6.id选择器
; u: Y5 e, m" {; ~- X6 Y! Z# p# b
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
" D$ o, M+ ~. J/ l. f& C* e( X7 I; P& H+ m6 G9 E2 v; r9 W
& K! y& o8 k1 o8 I4 {3 b* E. m然后在样式表里这样定义:
" V0 ?" e [0 T1 L1 F7 ^# b7 ~
0 b& p# B2 n4 R
! ?* |6 B+ e- U) f0 N#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& d* q+ ^) ?. m+ X% a其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& j6 H# k5 a+ A6 _+ K% O: S) [- |1 b5 ]" x& K" Y
id选择器也同样支持派生,例如:
# p; q3 N) O% j* @% p4 B1 M#menubar p { text-align : right; margin-top : 10px; } / V ^; C% t) Z" m5 L; J) x0 N6 u& N
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& I& C" |- l- l8 J" b- T- x/ V" } U) s2 z% j) B
6.类别选择器
: Z! J" e8 ^% B# | E( `
: R# l) y% ^9 W/ E9 E在CSS里用一个点开头表示类别选择器定义,例如:8 b% u6 ~3 @4 j5 c
.14px {color : #f60 ;font-size:14px ;} 8 d5 K& T5 N( t9 {
" U' B4 Y8 M) x9 M
在页面中,用class="类别名"的方法调用:
+ |8 p6 ]) \2 t<span class="14px">14px大小的字体</span> 4 z: q0 N1 s& p2 I6 J/ ?6 d7 |
, n6 ~; C$ E2 ^" B
这个方法比较简单灵活,可以随时根据页面需要新建和删除。 M1 ?$ \! c9 F. b
/ r& z4 }" E. P# |7 w* G/ i8 N
7.定义链接的样式; S4 _1 i8 q. V* v' o2 P( f; D/ Y
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:4 B2 T! F( t+ A0 s: y6 o$ E$ c! j/ W
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} }+ m+ m$ H1 z) u6 k+ E+ ?1 ?
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
; G9 f' A) K" O. _" |a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* M y e. {. N+ g( b
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 2 F, ^9 o4 B- R6 f3 j
1 C' I+ z$ d( f' b9 i! K" ]
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|