|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
Q- X0 U) C! ^4 y+ J1 c5 }3 K: ^. {
1.基本语法规范
* v1 c5 |3 v% p1 x5 ]2 t* Y$ E9 o分析一个典型CSS的语句:$ f4 V, v( O7 h5 @8 G. L. ]: v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
, _9 J4 ^5 j U" Y其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
) Q* T( G4 H( G1 k. {; w" c* T样式声明写在一对大括号"{}"中; , x$ x) L' d' O( I. G
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ' ~* p0 L# U" \; Y
"#FF0000"和"#FFFFFF"是属性的值(value)。
: V$ s( C0 G7 g& U, F O7 N0 k4 B6 _8 C
2.颜色值) J2 M- U4 M# h$ j" k
" U8 t$ P& `: q9 L' u# G0 B# b
颜色值可以用RGB值写,例如:7 C5 B- S4 u6 W1 ~' j2 [
0 e7 @: L0 V) j0 [
. O% e+ Z; p4 Z J6 d& ~,也可以用十六进制写,就象上面例子+ g, P+ ]( H( @( I7 m8 R+ C
, u: i6 I% j. h1 D" m7 J9 \ z3 @0 x3 I) G( A: x
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。! K+ F% S5 h; S# h
! m7 o: p9 X7 x! J# L
3.定义字体
+ t% w: c& i6 R- u6 i3 t2 N' ~# [$ F0 Iweb标准推荐如下字体定义方法
1 g3 ~8 u1 }9 e+ C' F
1 m1 I3 W9 E& U1 D; n& Z; c) kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } # i" p0 x# F& L2 S2 ?* S% ~
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 0 X6 v' P Q9 y
Lucida Grande字体适合Mac OS X;
) ^. N% n/ f+ v' y1 q5 \, @Verdana字体适合所有的Windows系统; 0 m; G: }. |& v; j4 l1 f/ W2 K
Lucida适合UNIX用户
1 b) r6 `- E4 M"宋体"适合中文简体用户; 6 Q& i; Z/ j3 s! O1 K
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;3 R9 _1 Y# i& r! ]& c
1 T7 L1 E6 x L2 w9 I% W# d
4.群选择器
! b1 t; v8 ~" P# E- Q6 H% \
0 r. n' X( V# C; B- G当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
0 _" R) j9 t* l, A9 n P
5 r( \% a3 L( ] p, td, li { font-size : 12px ; } t. |, ^- i+ H: X6 Q* ^
就是给li下面的子元素strong定义一个斜体不加粗的样式
+ p8 r0 u" \! a6 s5 s- Q8 K3 ?" `3 U1 P
6.id选择器: r$ s1 r. m2 c4 n
7 E: V0 j4 a0 N$ L1 d" ?. t/ L* s
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- w8 V4 ^; [( G$ V
/ b/ N, T$ o, F9 H. {3 Q8 t1 ] u' C" @2 k7 ~# C
然后在样式表里这样定义: M ~7 ]6 ~. u& ?' t+ E% Z
4 D T4 [* m# p! {
( V9 o x0 E0 l& ~0 k#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} " F, W9 _$ g: A/ b
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
# D, C9 z: d6 _' Q! P
9 G2 }& a6 y$ Jid选择器也同样支持派生,例如:4 z3 d. V7 p8 W0 H& I, `: _1 Y) b
#menubar p { text-align : right; margin-top : 10px; }
% K% l i- ~; i* w" E这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& z5 U+ q. T7 E. U; m1 g0 ` N9 I+ { P
6.类别选择器5 G" ~' E6 D, L% m2 v2 u' Y
3 a/ t6 G: A: K7 ^1 }5 i1 Z# {$ Q9 @在CSS里用一个点开头表示类别选择器定义,例如:# b2 [# o; Z2 h! e9 A
.14px {color : #f60 ;font-size:14px ;}
0 h. f9 q k/ C0 D. c4 C$ W7 M3 M2 W$ y. K1 ]7 n1 b
在页面中,用class="类别名"的方法调用: a0 B" U" S* U% p7 U5 }, G
<span class="14px">14px大小的字体</span> + x& i" C5 C" {2 ~
0 T/ C$ Q: D$ b/ D; M
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
9 ~; f+ F# S5 b( {% v0 o: z* B
1 z+ @1 B: n! M: F! T6 i7.定义链接的样式. K: K/ @# D4 m% Z, A
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:2 I4 i5 Z$ G. j
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 \: [1 _6 T) ], i" Ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
- K9 G h4 c* _7 Y2 Da:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
" _/ n- u! v/ f9 a/ wa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
- y/ s* V: o! s9 T5 l7 a( a4 N4 I- Y2 W: t4 E1 P( K7 ~
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|