|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。4 a- `: ?( R; R! i1 x* F( f& c
: x$ m' _5 {' g; L
1.基本语法规范
" P- v0 T4 X9 \! Y* L分析一个典型CSS的语句:$ y! s" M# F% j4 v; L- a3 q
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 Q( d) w* G1 D" z! \- [其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: ?+ l: g# N3 i2 ~4 E2 {样式声明写在一对大括号"{}"中;
3 [# f7 ?4 Q& \! U2 ^# oCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ! z1 d2 Y+ W& Q+ q. N+ x
"#FF0000"和"#FFFFFF"是属性的值(value)。, d7 A. ^8 t" o
2 S% m7 D$ K4 a( N T6 ^2.颜色值
& o1 _/ L( u m+ p- [. n. f- [& J" P' e+ u/ k! S0 b3 [7 s
颜色值可以用RGB值写,例如:
- O. r5 K: m* \% M. Z- F) y8 ]
7 A/ y. s& l# B- \8 \! G
8 ]/ J, f6 s4 k ]5 t k,也可以用十六进制写,就象上面例子% e6 W/ M% _( [* A. L
, B3 J' Z6 n" d) M5 W5 Q
; C5 x) a1 H6 e/ s5 _( o" g
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。- p: e8 k# q+ ]: i: |* ~+ B
; f, ?# D. b! S* w, c' X
3.定义字体
" a: V* f7 _; a, Lweb标准推荐如下字体定义方法' d5 H/ ?. m4 a
1 ~3 e" v' \* o" z' s8 s+ sbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 e- x7 _& Y* ~2 E. g6 r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
: U- j" C: M% e, e3 vLucida Grande字体适合Mac OS X; ; V) B! J* ?. M9 v0 s
Verdana字体适合所有的Windows系统;
5 W2 i/ I7 U& ^/ p2 D) b( jLucida适合UNIX用户 / h7 Q( w- J; {6 h6 J
"宋体"适合中文简体用户; `* A m& |6 ]
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;7 a% z Q! C" g" z2 x
$ v+ t1 U0 S+ {5 A' z
4.群选择器
- Q- ~2 a2 T5 _; w
/ F. Y; j7 w3 z$ D$ Z9 R* k8 l当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
9 I' K4 w3 a w( R( Y$ G* G# |: j7 K7 a; L' A
p, td, li { font-size : 12px ; } 7 ?$ ~1 x% A) Z1 U
就是给li下面的子元素strong定义一个斜体不加粗的样式
- u9 Z. A( ~. ^8 ^. R8 Y7 {. U7 N6 ~4 @ e% a, f3 ?& X
6.id选择器7 i% Y8 [4 i/ K
$ k/ T% |. K: Y4 g! x
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层# b+ W* v" c- H3 X; e& c5 w
3 d% Y5 R0 p. K2 d% B* ?2 l2 R5 v2 ~. ?( g! @" K' T' c3 T6 H
然后在样式表里这样定义:, T# {2 y3 n* @" C9 j6 k0 f' C
) U7 o+ o9 _6 d u9 `
" p I+ [" @# H9 u5 K$ l' z& n" g#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& i- b# d: c( Y% p$ U其中"menubar"是你自己定义的id名称。注意在前面加"#"号。: i" H* f' m. D u5 J5 U
) b5 n4 O# _4 ]8 A ?, Y6 zid选择器也同样支持派生,例如:% S6 i) q9 q' p) o
#menubar p { text-align : right; margin-top : 10px; } $ w7 o% A7 u0 c% o' }
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。5 a$ k# m% S3 ~
/ d2 b$ H1 n7 ~1 C
6.类别选择器$ `( r/ C" @$ t. f o, S
0 [& \2 \0 c- F+ j3 D9 k2 O2 Q在CSS里用一个点开头表示类别选择器定义,例如:0 I/ d' j: t9 B3 G2 E' a: [4 b
.14px {color : #f60 ;font-size:14px ;}
3 `: ]& ~/ [; o, w3 a7 r' p; S7 e) d6 g! l" G
在页面中,用class="类别名"的方法调用:! [0 ^, W+ `! e3 L% j9 W* V
<span class="14px">14px大小的字体</span> 4 |- t! B8 x5 u1 l' f' b/ Q2 ~
7 ]4 n e- r) H [0 j这个方法比较简单灵活,可以随时根据页面需要新建和删除。
! ^, S* R9 r. S8 T7 u% G( D0 Y' _# S6 o Q4 w
7.定义链接的样式
' Y6 q( e% i3 t3 a/ y- z$ UCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
4 E7 D/ U. V2 Da:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
* l5 P) z6 Q" s: ~6 _2 s$ z0 {a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 |1 @1 Q0 M% M+ c& @ wa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}$ t% B& w* C. D# S6 [5 y' b
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} + t; K4 i" d/ O' u* Q* h" Y
. U$ {0 s9 W8 d" B4 ]
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|