|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
' r, g6 S- J/ C& |5 Y3 O8 _
& `0 G0 @, D; H1.基本语法规范$ r& q1 Q( R. \6 @9 Z; Q
分析一个典型CSS的语句:4 y% b9 c; W/ V n& r/ o$ m
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
! P6 {1 h/ T# r: Y/ M6 y+ k其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ' G! R' K/ l/ Q. v, ~
样式声明写在一对大括号"{}"中; , @5 ^2 C$ b8 S/ Z8 q
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
u e9 c$ @% e* [4 p5 u"#FF0000"和"#FFFFFF"是属性的值(value)。5 z9 j8 V& R) t6 J( V2 b+ S
6 s) ]$ @% [/ A- G, |6 w, O$ p2.颜色值& l! D& M1 x w% _% H6 \8 X6 s; w
# D, k# h/ m6 b$ g8 q1 R" }( E
颜色值可以用RGB值写,例如:3 [( x6 @2 Z7 ~7 v6 r' p/ }8 [
; q# x7 x# Q/ c+ v- ]
& t( j6 h4 b$ }: O/ \6 M& T) J$ k/ |
,也可以用十六进制写,就象上面例子
' `$ R/ R2 N5 d5 J0 q
# x+ Q' p0 r" b6 U/ i
$ b6 F" d0 J* n- t) M如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。; c' V J- x, s# }, g. s, v
1 \1 b( v) E' w3.定义字体
0 c- D4 B+ Q7 Nweb标准推荐如下字体定义方法) |. k$ }4 m7 x8 \5 r
/ M# @/ N& n b' E2 o5 K6 R mbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ! z' R3 l+ K7 g
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
, Q+ `" Q0 x, }Lucida Grande字体适合Mac OS X;
' s' P( N3 A$ O7 N; YVerdana字体适合所有的Windows系统;
" z. r: w& |( g) m2 `& \: }/ GLucida适合UNIX用户 ' K8 g* C. }: T' v* x4 c5 s* P
"宋体"适合中文简体用户; % e8 F7 @( D' r6 i5 U" o8 W
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;2 ], P1 m' d) W7 n- c
( {7 Q/ ?6 ]4 d# f, A
4.群选择器
! k4 t# h T1 k& z/ g5 e; ~8 y; B2 {+ b7 {4 }" r
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
, r/ q9 F' t5 `6 [' T) d
! z1 ?5 ]/ K) d; e2 h p, td, li { font-size : 12px ; } 2 Z/ A. V A" v6 B: o* q/ d
就是给li下面的子元素strong定义一个斜体不加粗的样式 S. q% r! I8 J. G& S( l
7 I+ m h- e# V. D/ ?
6.id选择器
- s4 u* i3 e* k: ]9 [1 t4 `9 X" X5 u. Y# ~- j7 e3 N1 o& c
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
' }! ?- o1 O+ O+ R9 W$ z2 ^
0 C9 i# g4 H3 q; V- i" G7 ^9 M0 j
7 F! y$ i2 Y( G$ N然后在样式表里这样定义:- b; T' s3 g# R: _; @
% B& T( h5 D5 k9 B6 Y W, M
1 s7 _7 Q# u# W( D4 @#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 6 ~6 [% A9 A/ N4 Y, r1 p6 J) h
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
4 d3 H; y( Q& } J2 G+ f
" d$ t, |$ e- x! C7 \' o8 nid选择器也同样支持派生,例如:
1 u8 s* i6 \1 p#menubar p { text-align : right; margin-top : 10px; } 8 E# r$ B+ I! b. _/ ?
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
' x. C% W9 O3 T: T) W
& ~8 O( H$ e3 ]; ?# W6.类别选择器" H& I9 A P( V# u
9 E* X9 ]- l9 W0 h9 J2 u7 B8 K在CSS里用一个点开头表示类别选择器定义,例如:9 l7 W! g. U! b8 [- w0 W
.14px {color : #f60 ;font-size:14px ;} $ ?6 C* u5 \1 j
% O [* B; i$ T) P在页面中,用class="类别名"的方法调用:
9 m/ \3 |' q* m5 M. Z# W) u0 v9 l<span class="14px">14px大小的字体</span> " D1 h( B& i2 _1 e! U' U z
* ^$ @/ }8 h1 p3 ^5 z- ]6 u3 y
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
8 e# q) Y. j: R$ O
+ a |6 v( n* [- v3 @: m; S" ^9 ~- A* p7.定义链接的样式
% L. J5 h' r R" X# j5 q9 a+ n" vCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 i! _" F/ T+ R0 E! a
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
! d) q c4 I1 S, T& ]3 Q, Ha:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* u. G R* Z7 D5 U' T+ D
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( l7 \9 P: Q$ \( D! R9 i7 V' [" D. y' j
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} - O& [; J. R- A: J' q. `; D8 M' t" a) J
" g. B, W' t2 V' G8 ?1 L; ^* X
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|