|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
' `* p; t8 j% u' Z; s! D$ ~) w2 i9 {
1.基本语法规范& E! g$ |, W. S& E5 D+ i+ p- ^
分析一个典型CSS的语句:
W+ Q' O. V T0 G, M) wp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
% E) ?! U# h) W& M3 @其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; + ]1 Q" y [4 N! ~' v& G! b
样式声明写在一对大括号"{}"中;
9 @+ [4 m! p( [1 @: q; V. dCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; & ^- P+ i0 h2 {. x1 w
"#FF0000"和"#FFFFFF"是属性的值(value)。1 M4 s1 h# c. D
, U: u' j+ F8 X, x, p# [( ]4 j: }
2.颜色值! u/ I8 k( l! c2 s% \
$ H# P3 x( H; ^8 ^/ o, b颜色值可以用RGB值写,例如:
2 Y7 H& T2 Q8 ?) a3 k
) f: U2 B2 W; Z# F, e: N; [4 l
9 o% v& z6 Z1 E,也可以用十六进制写,就象上面例子
, ]7 }; z: j9 C" _- g. _+ I+ G; m* ]# ]/ i: q, m/ S
0 j6 I* G- N. w! C6 Y如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
& r8 H0 e1 m8 L ~ G9 N! E/ r6 f
3.定义字体
5 a/ B4 H6 }3 w4 ]/ vweb标准推荐如下字体定义方法
8 Q- J8 @8 M6 d {/ H. j, w% \: p$ L! T. _1 z$ j- @
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } * g% h/ j J5 E! a
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
5 ?9 H7 N0 C3 j0 W# ~Lucida Grande字体适合Mac OS X; * X( h% x9 G+ n! b, g$ M4 c
Verdana字体适合所有的Windows系统; " c0 M) @. i% }1 l- F0 w
Lucida适合UNIX用户 1 ] J# u' d5 B" z+ [$ \1 Q2 e
"宋体"适合中文简体用户; + ^/ Y, Y* x5 @& {
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
7 ~" I$ e8 e/ Q5 f7 F& ^
, s8 `+ S7 s, X/ i/ O- b4.群选择器) q; J% q: Z! ~/ m( ]6 M
9 E8 H. Z1 M" R5 s当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:% Y* @4 ], e: p# \+ ~8 V! [. s
9 z% N& I$ l: ^5 L( n, d
p, td, li { font-size : 12px ; } 5 @% b$ C: j+ {9 Q/ J
就是给li下面的子元素strong定义一个斜体不加粗的样式
# r7 o, l& N1 X3 f8 h+ v# H' X" ]0 U, t3 m) {
6.id选择器& m( E: f; x3 V) R8 `) B
6 }$ D0 }6 I2 _3 b3 x6 u2 S; H用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
: n, m! n" B/ `; G0 w4 j% {. _6 Q+ r* \: D! j
Y6 t3 m4 Q8 I0 P, g! g
然后在样式表里这样定义:
' h- u& c+ h8 H4 k2 D1 p' c, b7 G# s0 B2 c' a* c- f4 u O
* `0 u' b4 l/ L* ^. l#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
7 V. t1 X" G6 J) D! j其中"menubar"是你自己定义的id名称。注意在前面加"#"号。6 s+ k4 K+ ~, l. L
; k& ?6 c( g) ^: X2 Iid选择器也同样支持派生,例如:* H: ?- M, Q8 p
#menubar p { text-align : right; margin-top : 10px; } 3 V( _* a. ~8 O5 }" v1 }
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。/ \+ b0 `$ R9 b. s0 n( j' Y. \2 c
" w, Z: }- P0 D; q: P9 B6.类别选择器# [9 l q% u$ {9 t3 H
: m% W; m1 q' N) f* z
在CSS里用一个点开头表示类别选择器定义,例如:* \- T0 `" X7 n
.14px {color : #f60 ;font-size:14px ;} 2 W# e! l2 L# m' C: Z' e, W% a3 x
8 R' h, A) a- [& S& A+ b在页面中,用class="类别名"的方法调用:' E; y& x( W. j9 v. [
<span class="14px">14px大小的字体</span> 0 y, }3 P$ U, i: S( b
" a6 Q+ B7 G7 ~" _! S( g
这个方法比较简单灵活,可以随时根据页面需要新建和删除。- W6 \% I4 l3 C( Q( v& I7 L
$ r- p. a p5 N1 Z6 T
7.定义链接的样式
: w0 |. e. w$ T4 _( \7 @CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如: Z' w7 w6 A- m9 ?& }9 l
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
" |- U% \( n: D( Sa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}' p$ K6 K8 F9 n. }2 w: j/ t
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
5 @4 y9 O S. N9 j! y1 Z/ w2 T! qa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
* b5 _. f) f6 t$ A' b* W0 J% C, m$ c, s9 B
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|