|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
% |1 y" S1 S- p- E/ p
/ q0 G. @) C8 `$ ^0 v5 Q5 m1.基本语法规范' j$ m5 ~0 m. l" d% i
分析一个典型CSS的语句:
( C) f2 m% V. l/ \p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 0 T: z0 a3 e0 J# G0 c$ W7 S
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; N& L" [2 }1 q: k/ ]
样式声明写在一对大括号"{}"中;
' C c& D5 V3 g! fCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
) q, G8 o+ u. Y7 @8 i! v% q0 ~" B"#FF0000"和"#FFFFFF"是属性的值(value)。0 [- D c# e+ q) C
- G- d) g; A- R. O2.颜色值
+ U$ ~# ^+ u3 c5 F$ j
% m0 f U$ a1 d$ d- y0 }颜色值可以用RGB值写,例如:
9 o q8 l: _ i# s0 ~7 W9 Q9 F) E
' v& w6 g5 |" s- f" j* Q9 C5 U6 J' p: M- A- T& H
,也可以用十六进制写,就象上面例子! p, F# g! m+ m, K* b
, h/ Z9 \; \" |
% d7 h3 a# c" R如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。3 {8 G2 H4 ~1 k
% j' n, q: i: l7 \' P/ s3.定义字体
$ v, y& b" t4 Z3 t9 P8 x& e& N# x5 t# Iweb标准推荐如下字体定义方法
. A9 G2 r3 W: K3 o* |' w, {) U
( v' }" o4 `9 z9 Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 9 D' v' G2 R' e: D
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 7 l- b- B' h. o; v% q1 f
Lucida Grande字体适合Mac OS X; * Z! R" W5 t& w b5 {: Z2 e+ o4 M
Verdana字体适合所有的Windows系统;
, _0 B/ h$ w0 r9 u8 xLucida适合UNIX用户
- H4 n' W9 _( z k/ D/ ^"宋体"适合中文简体用户;
- q: e" y6 U4 Y! ~6 J如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;3 B& ]# w" ` B. T9 U
' Y" t5 U' |; J4 e' X, M* j0 A, T; ]7 C4.群选择器
) e$ G Q' j& V$ r) Y! O. p/ k z' u5 U1 u+ T
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
( A( e4 m$ S0 o1 w8 n& ]; j0 O* N; i) g7 @. P4 `4 R0 k
p, td, li { font-size : 12px ; }
3 m& i& ~" o- l) b就是给li下面的子元素strong定义一个斜体不加粗的样式 c3 j( h% ?/ ?) F2 r0 }* T% Z
9 y0 G8 O5 x( J6.id选择器; G6 Z7 H4 n' Y% A9 t
! L2 x6 p* r) Y9 K用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- D2 ~% ] H, l$ F6 P
9 B1 A8 W' q! h: r0 N& o% z$ C- A& v: l+ a
然后在样式表里这样定义:
: O2 x' z7 M$ {: M* E$ ~# ^ O1 I- I C1 T4 L
. b9 _7 L6 I: j# G. o#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- H. h& ?8 ]- S* C4 M N其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. n! c0 g* ~5 v3 U$ g% W
1 l0 I2 [6 B) D* M
id选择器也同样支持派生,例如:
- w3 u3 }: K; M7 h' C$ \7 l#menubar p { text-align : right; margin-top : 10px; } + ?1 D2 T7 o6 B9 U' u
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。' I f( B" C% R6 P4 y! L# B& k
! _2 H, J9 v* X5 l; j! {
6.类别选择器
; T+ j% T0 Y7 c9 [0 g" ?2 O
6 k% J0 c+ H0 i在CSS里用一个点开头表示类别选择器定义,例如:
% K+ [; N: b. V1 C( K.14px {color : #f60 ;font-size:14px ;}
% \% ^( L- t2 r+ h1 e" c. X F& t4 K6 R) J; [2 `3 W! s4 q
在页面中,用class="类别名"的方法调用:
5 h- Z! X) X! l4 Q, b* v<span class="14px">14px大小的字体</span>
) `# D/ i, }5 m& z8 V! Q
6 T$ @& a/ z% Y6 }这个方法比较简单灵活,可以随时根据页面需要新建和删除。- c P/ K1 c: _1 C0 K; Y
9 S v. Q* [4 [( Q& m
7.定义链接的样式. \7 c. L( V4 T; v& u9 ^
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
, E! I/ d& X5 v+ A/ }% o$ Y" u: Ba:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}' U F( {/ E$ q
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* o3 J4 \8 E7 h
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
l* C1 N3 ~+ F& Oa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; y1 R5 @" A) a* ]! B8 P. E4 V' d, j4 y4 E% T4 [
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|