|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
( P7 z8 _, w0 ?5 q& \$ S0 V$ V) ?( p
1.基本语法规范
& V9 b# j2 c" I9 P8 X6 i分析一个典型CSS的语句:
- @5 q0 P4 R# o/ ip {COLOR:#FF0000;BACKGROUND:#FFFFFF} - b: U; H+ r7 x) o, S' T
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
2 f0 g* ?9 Z) L: _9 L$ P/ ^% I2 P" Y样式声明写在一对大括号"{}"中; 9 ?/ s& j5 s# m$ A3 E+ m. J
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
# j( T: @' d/ v5 _/ G& j4 X"#FF0000"和"#FFFFFF"是属性的值(value)。
# n( f, }! p9 ?* [
& Z. u) b/ z3 T8 E2.颜色值
( x) {) g1 z0 ^% ?) e
c @: t" }+ c8 S- F x' u颜色值可以用RGB值写,例如:8 `8 ^, k) c7 G0 ? L
5 T k1 E( p: g! \6 j* S, y1 T
! z" S; v3 v3 X' X" T5 {/ A* l,也可以用十六进制写,就象上面例子* _) T+ M& @/ Y7 A/ N# h
( E' H- e/ B, m* o+ t) J7 j- a
" T9 e) y4 W$ W: y/ [3 ~4 x! M如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& b& q4 Y: k1 U! [/ r+ {5 G
& b7 V$ P6 ]! {% Z% ^9 O: q& b
3.定义字体' Y: R/ ^& {" l" h8 m0 F- a0 I
web标准推荐如下字体定义方法( I) u# P" v6 l9 _' {; i+ p
. p& w; Z9 Z0 f! j. S7 |4 ]body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } * w% a6 g- u( g4 v/ u" O! p
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
2 w/ b2 U7 k9 t6 lLucida Grande字体适合Mac OS X; . z/ a% {: X0 I: P6 C$ [7 Y
Verdana字体适合所有的Windows系统;
* I; P4 V. @' {' O, jLucida适合UNIX用户 , L& k7 j/ M0 z. g1 S; o8 A
"宋体"适合中文简体用户;
4 x7 r. s/ U1 l0 l' V. a如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- O' \. B) }7 e# W- F
. y) e# }: q# j5 j$ J# j4.群选择器) r; t9 e8 B. q! U d
) W( J2 s; K$ g6 \& f" f% o
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
( X! ]- | D+ Q) o- P
% i) ]( n6 G5 N) d9 h p, td, li { font-size : 12px ; } 6 U u( d h3 j9 B6 J
就是给li下面的子元素strong定义一个斜体不加粗的样式
3 v0 o3 q6 h9 O" t h+ I8 Q% \, M+ h! D0 T( [3 D/ b: E
6.id选择器
$ h) p ^8 @0 J* a! V( a, I6 ?6 V5 ^. m1 C0 X2 ~
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层# d1 ?; }0 @# q2 S
1 c$ R/ R, Z% q' e1 v
7 T: K5 }* ]- i
然后在样式表里这样定义:/ i; Y" ]; i1 [1 l/ D
- {" @7 N Q5 L: q, k. M2 ^
; c! s3 V. X/ a9 {8 P* a# Q#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
$ {4 S( j. r2 C4 o其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. W0 i1 N( d( U( ]/ F: F
+ g$ z, c v# L) P4 z& wid选择器也同样支持派生,例如:
$ Q3 A2 O/ |" s#menubar p { text-align : right; margin-top : 10px; }
) V8 `0 {+ Z9 j' ]: g+ M这个方法主要用来定义层和那些比较复杂,有多个派生的元素。7 B/ G1 G( c4 Y0 m5 D. i5 f
% \* O' _) M2 d' _9 P- [8 O6.类别选择器8 `, x- R9 a b2 @
4 F% z( E0 p: O( d$ F在CSS里用一个点开头表示类别选择器定义,例如:
& A% Y# e) }! G1 G, g y/ n2 y# A% @.14px {color : #f60 ;font-size:14px ;} " X& b1 \1 l5 K8 C+ w
, [) [5 X) J4 W `$ ?* f在页面中,用class="类别名"的方法调用:
9 B& ]+ f6 Z6 _0 P<span class="14px">14px大小的字体</span> 7 p+ n! K/ F, K h v! T& A7 j, f
$ d2 l; v0 L' L& o. W8 Z
这个方法比较简单灵活,可以随时根据页面需要新建和删除。6 n4 [3 {$ R' ^$ H) C
6 g- g# m8 s _ _8 h' e
7.定义链接的样式1 N7 o" T+ ?8 A! u+ @, [3 c8 ^
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:$ A/ m, g- n: _! O& c. p- N
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
' b7 a# U5 Z0 t: s# K1 Y1 ~a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}/ N' s2 i% S8 i" s6 A" g% V. J& ?
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
% _7 N g3 T- c( ?4 Z- `a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
" T' ]* M* {6 l3 J$ K% B/ I8 _- N( V# d. o' N
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|