|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
6 d! Y6 I& m- q4 f% B% f
+ t" l3 G3 S- m0 ~. s; X1.基本语法规范
4 {- C4 a: ?1 k8 M G# }' V分析一个典型CSS的语句:4 Q/ h" G/ i% u7 B, o3 L
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
% @% y1 G" @/ w3 L3 x8 W其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
" E" S) s. P, h7 v. ^: }7 F0 \样式声明写在一对大括号"{}"中; N/ Q$ s9 l, p' x. f" b
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 0 r! [) p# k5 m3 z. v
"#FF0000"和"#FFFFFF"是属性的值(value)。
& W7 E m2 @5 V4 R9 `
0 s; s4 D; q- i0 s3 @5 G/ v4 b2.颜色值; W* t( D- o2 g% X3 _1 y: @
* I# K, G- ~0 ~1 ^) P颜色值可以用RGB值写,例如:
/ U, Y* G( j2 q( Y' b u! v& t m' O
, v% }2 c' ^# u: c. r
,也可以用十六进制写,就象上面例子
; |; J4 g, D. T9 a# h5 U9 M4 f( G2 d- T0 \% @
0 r4 V3 Y- W. O. w' e如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。3 i8 ^; u( Q5 b0 S0 B% R
2 V2 U, m& G# j1 x& W0 e4 p3.定义字体
& m4 r0 f- b. m0 \web标准推荐如下字体定义方法
; F0 G, T8 x9 C9 S6 P8 \
* Z% y0 q9 t3 `7 H- K' ?5 Pbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } " i: g7 A' }; F* A! V0 E
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
# }' W) s! e) E* sLucida Grande字体适合Mac OS X; $ i) H) q# h/ C) H0 A
Verdana字体适合所有的Windows系统; 9 [3 \! N& y7 l/ ?: y$ K9 I
Lucida适合UNIX用户 7 ]$ E6 |3 {( f
"宋体"适合中文简体用户; 5 z% z. s) I# K m3 x' c7 F; k
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
9 _% y+ V# j4 i( z$ D2 q; u
C$ b( ?' n3 m) T" q! x4 e ]4.群选择器
. d) O; ?% Q* b6 t5 s" l" }9 e m% Z9 ?! p. O A
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:2 ~+ Q- M/ c$ t+ F0 X
$ X# M. \+ [& e: c9 K O7 M' U p, td, li { font-size : 12px ; }
1 o9 Z8 |: U1 N# C* G4 r就是给li下面的子元素strong定义一个斜体不加粗的样式9 T6 S$ G. l8 w& Z% t- q
; { E( z1 n, B1 n( ]8 s# F6.id选择器5 ~, P' @& R: f- I
( A7 K8 B, [0 ]6 R) v- `! A& t
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. d" o2 ~: S. P; P- r" C- B0 _' n" [0 @* Q* z) v
. R& C c$ R; W [" q. |& b' `然后在样式表里这样定义: \2 g+ R5 |3 e/ T p6 _
2 l+ m9 k f% r. N) T; u/ D. w g) ~
7 v4 p( h4 Q) e#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 0 D# @5 {; o" ^$ L3 d; h
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 L3 W$ X n+ p) g# Y: ^; @* X7 w9 o" @
$ H2 u+ r* M% z0 q. Xid选择器也同样支持派生,例如:4 c2 D1 f0 Z3 q- u4 q5 y3 o: @
#menubar p { text-align : right; margin-top : 10px; }
4 [: i7 W# u: n1 D: m+ {3 w这个方法主要用来定义层和那些比较复杂,有多个派生的元素。) a5 o- [% }9 G
. F( T5 ]9 t( Z! m H) q
6.类别选择器
0 Z: j! g) u' h2 G6 U8 x2 B8 a* l3 _; h6 Z: N- P
在CSS里用一个点开头表示类别选择器定义,例如:
1 _' K. }! t8 J8 J3 k p& l* {.14px {color : #f60 ;font-size:14px ;}
5 u7 U' N6 o. [& h* }) `
+ q; a# D' R2 L4 q: C: A在页面中,用class="类别名"的方法调用:
6 j, B$ L9 T0 X' u P8 V V) K5 L<span class="14px">14px大小的字体</span> 8 X' }, L8 f5 w7 C% }. h- b _* z
! z' q1 p2 I# ^" \% R这个方法比较简单灵活,可以随时根据页面需要新建和删除。' q. a, |; D) L4 P; I: Y
6 | N( U7 w" h8 @7.定义链接的样式9 j4 V3 z; K/ y0 W
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:0 \. c2 C0 G$ ^4 _* h
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}! }3 m! k l9 G2 Y* ^/ H$ j
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
# f- y3 Z9 K+ \* Ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ S- {4 O V1 i2 @+ K7 z' va:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
2 S: B. O% `+ m9 ?9 C, q ?. P- v; r
0 U) U; t U7 B以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|