|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
6 y( D! c. K8 j* e& T* I# @% ~7 ^% M( A) N
1.基本语法规范( @8 I+ ^ L: _( j' Y2 ?+ K4 C
分析一个典型CSS的语句:
! k" k: [- x, K" [6 Bp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
, \2 x% j2 S0 S" `6 x* d* M# N' f其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 9 O& ~* @* w- g4 ]2 N
样式声明写在一对大括号"{}"中; 2 r/ f1 c3 ^5 o% U5 G R1 W
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 P+ i2 v/ G8 {; C l
"#FF0000"和"#FFFFFF"是属性的值(value)。
' H7 H7 x6 Q. Y' R2 V
6 U5 r( j! C% ~2.颜色值
. C) |8 w' X/ a- h
; b3 D: Y3 J* s# `, [颜色值可以用RGB值写,例如:8 f0 g3 z+ f6 p/ X3 f' r0 h8 T
$ {; x9 |- c9 ?* }" `
2 f/ }$ Y: O5 H7 h,也可以用十六进制写,就象上面例子
" ]0 Z- a( g- b; d& G
T7 Z$ a( ~' g; Z7 y0 m5 t0 F* f. v* |+ V- i' z
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& ^& I. D. _ M$ I. p3 |
2 ?0 ?# s, b2 g2 D+ r9 ?
3.定义字体
6 Y) V) G: ~0 c5 r) w0 Bweb标准推荐如下字体定义方法
$ e& r6 s: |7 ]# o2 X# ?1 i0 t; N2 @$ b5 [* B7 g$ r
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } % ^- p6 ]: O" ?$ ~+ s* y3 _; \, n
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 7 f. p8 l' l! C+ l% D
Lucida Grande字体适合Mac OS X; ; ^* ^. g( L: d# B8 w. w. u2 B1 L
Verdana字体适合所有的Windows系统;
+ z2 X2 i; p1 t) VLucida适合UNIX用户
, U$ X+ F, u8 I L: R$ q"宋体"适合中文简体用户;
8 _6 |* E! c& n! Q如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;: W4 s. x4 @5 o* |
# r& F9 U/ Y& y+ U4.群选择器
0 y3 j1 t4 `0 _5 s5 t4 ~7 ^1 p+ N/ B7 h% Y4 L! ^
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:8 [; R" L) h4 D* k/ Q4 r) G
4 q4 C4 w: g9 w( T" K
p, td, li { font-size : 12px ; } : n! U$ `% [' E. M! d2 c- I9 ^
就是给li下面的子元素strong定义一个斜体不加粗的样式
8 ~; G! Z, G4 j) M- L& c, X4 R2 c; N- ^* M1 m
6.id选择器
2 \ _: G# ~4 W- `" H8 U7 G
, L8 x6 u* f# c3 Q" Q& K/ _用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) l+ _8 m2 l: I( {# a
7 k- I B! T0 }9 l F9 ~' b" A% i* D6 a
然后在样式表里这样定义:
9 \# f# v8 f& S$ @% |3 k, y" L) |8 q& ]/ A8 j( O
7 d# d/ U; O J0 N* L* b#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} D" y- f7 g) [5 T/ J' J) b9 ^7 o6 e
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 M* ]- Y0 I* G$ C) K& d
; `$ W) ?5 u3 Y, G4 pid选择器也同样支持派生,例如:8 X( q$ P+ y* R [9 e8 W4 P$ I" L
#menubar p { text-align : right; margin-top : 10px; } / x+ W- b! J& y) P+ k I- |
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
, {" V; F! H" e) n
, `' }' W$ ]5 L# S6.类别选择器
: h, ~' C8 q, O/ c1 W# u( Y$ U
! [; r7 w' [2 A1 T在CSS里用一个点开头表示类别选择器定义,例如:+ e9 N9 O' j7 W
.14px {color : #f60 ;font-size:14px ;}
1 D9 W+ J- p; r& a
3 M: j* P4 @1 {( P, `* b+ ?在页面中,用class="类别名"的方法调用:9 I9 K9 _, a$ D& a* v3 \$ Y% U% O6 c R4 m
<span class="14px">14px大小的字体</span> ! [# P) C# n& U, H
/ L6 t! l8 W0 w1 ]* m$ i% ^ j
这个方法比较简单灵活,可以随时根据页面需要新建和删除。1 `3 E# \" a" I. g9 J! v7 y: E/ a: ~$ ?
. Z+ |& s) G, z0 z2 P. P6 s8 ~9 Q7.定义链接的样式5 z% q; l% i& z% I
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:! r; d2 v8 [3 H
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}2 S4 `1 S7 v3 L( }% p$ _9 r( K
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 A( b# Q* Q6 A' c% X7 B/ `' ya:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* j) f# \6 v; F7 |- T: G
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 X5 {4 w) a2 j* A3 t7 ]2 O3 H% y6 |. [+ d; W. u+ `2 V) L
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|