|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
7 W P3 `' ?! L) p/ V- J+ B
- Q4 x+ E; H5 d5 D2 `/ d/ z2 D: t1.基本语法规范# X. T: N& h0 E) g- @2 V
分析一个典型CSS的语句:. G3 X% `) Y/ f+ b
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
6 `8 y% N- r: t6 j, i6 b! V& E# ~# j其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 0 _4 k2 y _/ ?. z( b' D7 Z h
样式声明写在一对大括号"{}"中; 4 t: a, U" @+ D- @7 T
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
; y) r* u- X+ ~" N# T"#FF0000"和"#FFFFFF"是属性的值(value)。
) e/ \4 _ s& K: i' K" y0 f \3 ]8 y" E! @ F' Y
2.颜色值
- J& O% S6 V9 M4 ]3 ~( s i4 Z# M( f# m0 b
颜色值可以用RGB值写,例如:" h- D4 L4 S! l/ D6 q/ Q7 P; X
* `" A0 @; M3 c. T- f
0 n- S+ O4 J! x8 Z7 S9 T! R6 W,也可以用十六进制写,就象上面例子
4 o& p+ } F% I( d; n b
" z e2 T @. q3 ?! o, z; b, h# ~ m4 n- J; f6 t
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
" N4 e( L% n' A; O" P3 I! L8 W7 p& J' x* c5 I( q
3.定义字体
( l; m. W8 \+ N! `web标准推荐如下字体定义方法
: Z5 g. I6 s5 q% h
8 \0 Q, H2 g Abody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } * d, E" B. ` A" K8 a) r" K
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
6 \/ Q" k2 M4 s8 Y4 qLucida Grande字体适合Mac OS X; 3 @8 G& E) B4 V# {
Verdana字体适合所有的Windows系统; 8 K9 @# f2 `3 A z
Lucida适合UNIX用户
8 H6 z# Q% H( \3 I% Y0 s"宋体"适合中文简体用户;
) v5 A& ` k# f9 z3 J$ W如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;% e. P5 S, H' F
; V" B( w; Z2 }* ?$ i
4.群选择器
, H6 b2 [0 a. k! `7 R+ z$ N
, ?- \6 z7 ]9 o) Z0 H+ b s当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
( A: }. s k' c( p" j4 [0 A$ D) M. p7 d' F
p, td, li { font-size : 12px ; }
5 H% `' o, Y4 k7 ^; x t就是给li下面的子元素strong定义一个斜体不加粗的样式
4 t! I5 M8 b/ }0 \0 w2 U1 T. `
0 N- j% f( g, x2 b0 ^$ t6.id选择器
. K. T+ L, j: M; @
0 U5 w' d: ^$ J% z: f- N用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
$ o0 t5 j& V7 b" O8 b
1 ?* l F6 L$ V5 N' A" f. |: {& K7 I$ q$ U- h/ F
然后在样式表里这样定义:$ t( k0 k9 Y+ A: U5 j. R
7 t4 T6 V$ T1 l0 M% w: O. }9 D
5 G' V A J# j& q+ l5 k#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} - u( A: x& u! S' X0 `1 M6 e, O% Q
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
; u% e7 j4 H, J+ l/ K% k0 n$ j: u5 ?. I% O4 J
id选择器也同样支持派生,例如:' e% P6 C; g: R5 m( i: n
#menubar p { text-align : right; margin-top : 10px; } % u' T- O1 p; G. ] f; k
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。5 n! \, f/ o1 l1 p* M1 o: s
6 S6 U- e5 K8 S: c5 c4 o
6.类别选择器
* ~0 ^% ~4 \2 D# b5 d$ F1 Z" i1 X6 S* Q: g* \7 I. P
在CSS里用一个点开头表示类别选择器定义,例如:8 y' j" ^9 R: r; A( t7 T
.14px {color : #f60 ;font-size:14px ;}
4 _+ c; ], f" I$ i3 Y7 a l9 E0 ^& J3 Z
8 t- B5 e+ j+ W/ K9 O5 k在页面中,用class="类别名"的方法调用:- @& B s% t, w
<span class="14px">14px大小的字体</span> : g/ g1 u; {# T b/ v
' i9 w1 _3 }/ Y8 ]这个方法比较简单灵活,可以随时根据页面需要新建和删除。/ M+ @+ v$ S. [2 d# }/ d
. O$ V+ f1 A7 w5 K( s1 m% d/ u4 m) h7.定义链接的样式
- Y2 `! y& [, J" z( jCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:) H& S; O2 y' ]/ `; S
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}% _ [2 ~% c5 b1 F9 M4 `
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 v' b; R- e3 x& [: E8 r
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 S3 {! B4 z, a% l/ h. ]a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
' \' J; Q# z4 N% u1 W7 I5 i: @0 `
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|