|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。2 V: c) v8 k# j( U- ~
6 O& i" r- h: H5 c9 o0 p4 ^
1.基本语法规范8 p1 u1 R% q, a7 A2 o5 h: z
分析一个典型CSS的语句:$ }5 A& v+ w5 s6 Z/ n: q* z- m
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 N" Y0 d& E7 B, t" r& A \其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
9 J. e* \) g9 I+ n样式声明写在一对大括号"{}"中;
6 g l8 h* x. k i: fCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
& T# T" k+ U# o) T |8 I$ g"#FF0000"和"#FFFFFF"是属性的值(value)。
8 t; c9 x! X: U6 `7 T' J7 y
* g0 N" T( P* ?2 u9 b! R, s7 d, T2.颜色值, B: T ` l2 e8 d1 T3 Z( |" ^
1 W- v) x( {1 T; Z颜色值可以用RGB值写,例如: L$ t; ]) v, l& b
) ~5 b- b R9 F7 T2 s+ ?+ |) e. L! C& V8 r. X+ G
,也可以用十六进制写,就象上面例子* |0 H) T5 b1 J
7 O6 K3 d J2 O$ x @/ T5 E
; O% f7 [3 K: X$ @" Q( l! ^1 T, J如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。1 A& ^- S! }* F. C
% u" }7 R- Y9 `9 ]" H9 {5 r' y3.定义字体2 q* l7 @1 W2 f0 v( S. c
web标准推荐如下字体定义方法
" q: ?5 N6 Z) R! v& n9 x
2 C% w9 g+ q) Wbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
% b' ]# Z' b" w字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - A7 ]+ m3 j: m$ c# T# G+ l% [
Lucida Grande字体适合Mac OS X; # q m4 R4 X N+ g: Q/ `3 v
Verdana字体适合所有的Windows系统;
% k6 J( P) B" y* W4 U0 n0 FLucida适合UNIX用户
/ W$ H- H+ S4 c1 H5 h"宋体"适合中文简体用户; ; p% z0 o {. z8 F; ^% P) M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
* P0 Q+ q1 x% C* j8 I
# x1 z% ]9 t: C; c f: v4.群选择器
/ o7 K! C' P' \" |- s
7 U7 m+ B7 g% C0 ?当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:5 f4 _+ r# Q: p j; a& x- }3 x ?
' m- `1 D: `. W0 X, F, @
p, td, li { font-size : 12px ; } " b" A9 E4 n3 d% Z" k5 t, s
就是给li下面的子元素strong定义一个斜体不加粗的样式- N! V3 p: L1 P# y9 { u1 J$ w
9 W/ _" W4 s: j* Q/ y6.id选择器& F- `7 s& V3 K
/ p& b9 p/ r1 S% a# J( U用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层9 J4 H$ E {; T/ A: C, V
- ~ z7 E% h, [5 B c
2 _1 u6 }$ G! U* @* W
然后在样式表里这样定义:: L8 Y& O: n1 V; r
; R) j; U; n2 ^
/ R- M4 w7 p* e% p' j' x7 K+ H#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 1 L d* E. y: Y5 M2 u' \/ v
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& H6 ^7 H0 W! b7 N& O' O- c6 o4 T$ v! l7 A4 ~$ g. H8 ]
id选择器也同样支持派生,例如: s7 `, e& w) n! x7 N+ J: \
#menubar p { text-align : right; margin-top : 10px; } ' {1 C* M7 X ^$ P5 X+ D" ]0 ]
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。 R' C7 w$ }: `5 E9 X
' H9 y3 F/ |& k3 U' e$ J% ~7 J
6.类别选择器
# ] O- a# ^* b7 g% t5 c/ _6 @/ \
2 \9 d: y' X7 X2 Z在CSS里用一个点开头表示类别选择器定义,例如:9 K# A8 S0 Y# Q
.14px {color : #f60 ;font-size:14px ;} $ [) x3 t+ C; w' p5 m* x! c4 a
- s- X0 o; ^ [在页面中,用class="类别名"的方法调用:
# J8 l6 n7 Y5 ?1 g. s" w& }) n, V<span class="14px">14px大小的字体</span>
* Y# H" D2 d- ~
3 I0 n7 Q& v9 d( }; K这个方法比较简单灵活,可以随时根据页面需要新建和删除。
+ j, J8 g2 E* G/ M- p2 ^0 C4 A+ {2 N5 f: Q+ n t
7.定义链接的样式 X; P f/ M& M0 ~9 p- L0 c( j7 U( o
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
4 ^# h( C1 x+ S7 H `3 oa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
) K$ T3 J" R/ B' c; o4 Za:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}- r* J% V/ R4 R
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
0 o, s& A, D" y: J" Ua:active {font-weight : bold ;text-decoration : none ;color : #90 ;} . y/ R' V4 }. j9 |# ]0 u a+ C
8 o) ^1 S! m& n
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|