|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
$ X' G6 c7 _) K' Z: T: G: x
* m, v0 _ G$ h2 p+ Z' {1.基本语法规范
, k3 t% n: z, L* ]4 i分析一个典型CSS的语句:/ Z/ ?! X2 p. _' D X; [! D
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- F: r4 w) d2 H8 I! z) N其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: L X% q. @$ i0 ]3 Y样式声明写在一对大括号"{}"中;
1 D6 v( r) R. ]COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ! z% B: e& k/ z) u. g: |7 X9 w7 U
"#FF0000"和"#FFFFFF"是属性的值(value)。5 D O* S% Q: x! j
, N( L; B s+ j2.颜色值
- X8 y4 A. v/ ~- l$ ~! p
* h2 O$ z, i7 n" n) }% K2 |2 y0 n6 s颜色值可以用RGB值写,例如:! I, v6 ?7 K1 F% X
7 P( {6 I8 L. q+ R" A
4 o5 D3 a! X3 o9 z: J( u* L,也可以用十六进制写,就象上面例子
# B1 P8 D+ h) b3 q$ Y6 Y$ e; ~+ g1 W' V9 b- z- F2 s. r9 S
# U8 `% s' P. x) h! J' g
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。, F+ j$ O' V& B& E
& w, X$ p. N: ^: `+ z
3.定义字体
4 j# l) R" b3 O1 Mweb标准推荐如下字体定义方法# a5 X! e8 T9 \
' f; X/ b4 a2 nbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } / F: m( J- r' g/ L6 o( B
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
. ]1 w" q1 l, u9 K1 X! aLucida Grande字体适合Mac OS X;
( p( Y3 f- a0 ~& J( _* a8 ?, r( {Verdana字体适合所有的Windows系统;
4 c* A2 h/ C7 Q0 N iLucida适合UNIX用户 $ u: {7 Q* _: M% Z2 e* S
"宋体"适合中文简体用户; , c7 u6 H( a, k. q7 W& H
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;( a- b' l- y e: _; Q
! I6 f( Q+ D" S' b- ^4.群选择器
- i2 ]! Y2 `: } ? m: r4 X9 l7 O. _( G4 ^( }/ |2 P% j
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:" a( k- N. g* |6 I0 z, M2 S( ?& }
1 R0 d2 ]1 K" E; X5 W- W0 U
p, td, li { font-size : 12px ; }
, |! W7 N0 k, z; a6 \8 S就是给li下面的子元素strong定义一个斜体不加粗的样式
, `' o! J( Z# K, x
- _7 m) E5 t+ k6.id选择器
# T. ]: x, V/ M5 A- t& o: W7 ]
i/ i" G- Z+ r) X; e9 P+ t3 p- q用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
5 H3 P$ l1 _) F- o
7 _9 D% [1 ], ]1 W$ ?9 |2 \# Z# z8 I: E6 C
然后在样式表里这样定义:
7 Q q3 K- q: g3 F3 ~0 W; t
$ X* ~/ H. l2 y! ?2 E! l6 Z; Q3 o. U6 \1 |+ Y
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
# E; d% h* ]) m0 M4 o- H5 o* e其中"menubar"是你自己定义的id名称。注意在前面加"#"号。- y- D9 g, x4 Q* \; { H% T
6 }$ ^) D4 h! S8 T4 Y1 \/ `3 v
id选择器也同样支持派生,例如:; ~0 t- `' d: ~% z6 `7 H
#menubar p { text-align : right; margin-top : 10px; } 0 b& C5 M9 i$ t" u6 ]0 h1 f# w
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
* p7 A; z6 l/ _5 {$ n6 |) B- z% k' |# ?/ @4 u! h
6.类别选择器# X6 X+ @& Y3 p& v, [0 | W
+ |3 T# n3 f* W4 d' m* ^
在CSS里用一个点开头表示类别选择器定义,例如:- O7 u& b. ^7 f# m: K
.14px {color : #f60 ;font-size:14px ;} 4 L0 W2 I* X ^! B; z
+ p, c6 P5 s3 [6 t+ r. ?' [
在页面中,用class="类别名"的方法调用:3 s/ x9 d0 |! v7 I5 x6 Z: f
<span class="14px">14px大小的字体</span>
0 h# X, z. h* X3 T- P. i/ ?$ E5 T) _ B
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
& z; {. j3 r ?9 j/ @! p+ f
! G8 Q9 ~% P0 p& c( g2 B6 Q7.定义链接的样式
P7 E' x, ]+ h4 Y6 w: l( n3 @4 [& kCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 ?0 \( v% x: \. G$ ^" d
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 i- E5 W( \8 W* m; h$ I7 [8 U! m! [a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}; S/ v& Y* C" _: q8 a
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
. n. |; V, m" T3 ma:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ; Q6 e- \. `6 E4 T' y, {
) ]/ R# a' Q# w9 V2 ]以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|