|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
- C4 @! [3 B6 z4 Z9 R, D9 W
) g/ m, v8 P3 z2 Z+ \4 j1.基本语法规范: s1 ^$ v3 d4 O& d
分析一个典型CSS的语句:
0 x6 }1 [# r* v- Z; Tp {COLOR:#FF0000;BACKGROUND:#FFFFFF} ! v* ~2 E. M. \+ K" Y- }
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 9 I% L: s/ P0 G2 L; W" v( o
样式声明写在一对大括号"{}"中; 0 z0 o8 [! ^4 ~2 T" B
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; $ L7 f$ [1 p8 z. f3 W8 ~" H
"#FF0000"和"#FFFFFF"是属性的值(value)。
/ g: f/ T5 S6 u% D% w! [
8 x5 G) t3 R. d5 k- Z+ N" Y1 [2.颜色值9 d. \0 h+ {4 ?/ j; M3 j
( M: \" L& G6 I; c# Q# I5 W7 k. \颜色值可以用RGB值写,例如:
# |5 _7 q" [% @8 m# W
; E' c8 i3 E! S+ V( V/ U+ v
" E M4 D& I, b6 [$ D, }" | s& ~,也可以用十六进制写,就象上面例子
0 _' u+ ]% y5 i7 E5 v
" I$ Z" x+ u+ f: ^! L) A4 o) s
5 M o8 G$ L7 H- ]& N如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。* _/ V1 c- ~- Y" d0 ]) F$ b# W6 T
8 y+ ~2 k( l3 [; D& b% o# s9 P
3.定义字体
7 D& y* X9 [! k3 v2 m5 Z3 z+ ?web标准推荐如下字体定义方法
, {$ W9 a* ~7 U6 M- J- Q$ ]7 Z, h+ n- v& @' \
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 6 V3 E& S" U% Z8 I, F" x
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 _! V$ _/ ^" O, a
Lucida Grande字体适合Mac OS X; 7 F7 z; ]0 ?2 I6 F) u" ?3 M7 c, Z
Verdana字体适合所有的Windows系统;
% c6 v9 ?6 y* gLucida适合UNIX用户 4 Y+ m w; d) C5 {) D
"宋体"适合中文简体用户; 9 F5 _2 j9 b& M+ Y' ^
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
" _% k9 W# M0 P6 }$ S( _
( f" S- x; W2 A N3 g3 e4.群选择器; E) |4 Y( n3 m
- i) W5 E# m) R6 l% M! O& h( k当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:+ f* C5 U" J1 q5 f7 B; ]& i
3 M& Q; O5 P' D4 w+ p+ `- ~ p, td, li { font-size : 12px ; }
' b! j" P; ], v7 W就是给li下面的子元素strong定义一个斜体不加粗的样式
; f: V& m! ^8 ~
( l/ z5 n- z6 m8 q: O6.id选择器
; X+ \! n6 ~/ E! L
1 p3 ?7 T& m# l7 b用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
2 L# D! ~. M( V3 J1 L, S9 g6 V \2 M1 {# Y
* i2 W+ n6 V7 d2 ^% R% _然后在样式表里这样定义:
3 w7 \' k0 R/ U2 o
2 }/ i" C- \* S3 d" b' t) \
$ y$ A9 c4 k8 [" x1 p#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
5 `' A/ z1 P2 ^" p其中"menubar"是你自己定义的id名称。注意在前面加"#"号。& N9 W3 |6 w( f3 l2 w$ ]. K& K# M
" E2 y9 h, \& S& r8 b2 Yid选择器也同样支持派生,例如:; n# Q5 w) N' O/ u3 T% ~/ K0 k
#menubar p { text-align : right; margin-top : 10px; } ) j9 Y3 P% b+ |. N! t) V
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
' v/ n; q! v; n2 V4 g' M k/ `$ V5 f' I
6.类别选择器0 |+ k' I" z5 H+ O6 M
4 Y# D( E- F" u5 z0 f
在CSS里用一个点开头表示类别选择器定义,例如:
7 W5 y4 j8 l5 V9 O.14px {color : #f60 ;font-size:14px ;} 1 T1 _5 B5 ^3 X) j+ S
* X; j1 I9 _1 [% g. {% N3 ^2 s( \在页面中,用class="类别名"的方法调用:2 ~# ]7 a( P( i+ @/ {6 n- _
<span class="14px">14px大小的字体</span> l9 e6 C0 v/ e" `( O; ^* v/ Y/ T9 |
& n. v' |: i7 J( ^9 H8 |这个方法比较简单灵活,可以随时根据页面需要新建和删除。1 ^; L' i/ f' X0 ^: r1 n
# r- p' p% ^; R! h3 W d- J3 u
7.定义链接的样式
4 h2 A4 H# y9 [8 d& u* jCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:9 m$ p, ?& u& N& m. ?5 H5 X1 g
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
, A7 F: P6 K9 Y, c2 qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}+ }* l* W5 y# I7 o8 _9 T
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}/ j' R9 }. X/ z+ T/ p. `7 s. O8 c0 T
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} # U. \4 m7 z" m3 B
5 a3 c3 L& u2 Q/ S7 b/ j7 I( m
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|