|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
9 h b; R/ m, \: C9 g" k% p# g% K. Q2 ]: _( q; D
1.基本语法规范
7 ?; Z1 _" n* u# @分析一个典型CSS的语句:% `( ]2 ]( u, A
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
6 P! Z& }( F9 ?9 M" U/ _- e1 @其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 6 x# j4 w8 O( J% h/ D. Q% [
样式声明写在一对大括号"{}"中;
. m3 t) b* p3 n- G) ECOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
# r T* w9 l; p' P$ D"#FF0000"和"#FFFFFF"是属性的值(value)。5 \7 m5 N( v% X5 C7 f; i! E
5 E `0 P6 ~# s7 F+ A U( z5 M
2.颜色值5 @: H7 h; D; M2 C& v# S( a
9 h# X7 V7 L, |1 ^* ~4 i; D" S, G( O
颜色值可以用RGB值写,例如:6 B& s9 K' [5 M! K
|; |3 @0 i$ l) T" Z; N7 }, p
( t6 s. y( C$ c$ d6 ?. F1 F) k
,也可以用十六进制写,就象上面例子& a6 J; W; H0 q/ ^
' C6 d4 O' \; m# P2 T1 e% n/ K# z/ w3 M
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
9 Z! l3 o, c8 d
6 P X2 F6 Q! z( g2 {0 P3.定义字体9 R2 Y" T( e0 p" ?9 n
web标准推荐如下字体定义方法
" V/ C# ^: r1 K& m7 ?/ P' w U* M2 q' E' F( v2 l/ n% l
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } - Y+ Y1 E7 m0 w0 d" D' x: l
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; l4 `& j$ [$ `& @
Lucida Grande字体适合Mac OS X;
0 b S$ t0 z# U) k9 NVerdana字体适合所有的Windows系统;
1 r: V7 I) D- M+ y! a6 ^& a0 qLucida适合UNIX用户
! P: T9 q; l& V8 u- O"宋体"适合中文简体用户; 9 ~3 e0 D' k4 O3 u$ l& ^# H' ~
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;. h9 D$ a$ E2 V0 C! L% q
9 W; Y# N. j$ C0 G9 s; H4.群选择器
3 c5 k0 Z! P/ A6 L9 ]8 w0 g: `/ E; Y3 H0 b4 a! ~3 \
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
$ t3 c! a" } W6 u* P3 r0 c4 T2 k4 E+ ?) I" I
p, td, li { font-size : 12px ; } / x1 K' h7 p! S9 D# ?9 e
就是给li下面的子元素strong定义一个斜体不加粗的样式1 O& i" {9 p( j/ ]+ Q
( Y+ {% s: K+ ]7 w6.id选择器
0 o- Q3 k$ i! l. {' w K& d" [
4 o' o$ `& v2 i Q" i9 ^用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ j* O! A9 a* Z5 @) }1 n8 J) c+ H
& d" b. ?( S+ [9 q
# s* F5 t* f6 {然后在样式表里这样定义:" b9 Q* V4 g* `; Z* [2 E+ _& k
: Y; u/ Y) o* F6 E7 X4 o8 e8 b
; M' o9 U4 i% w. A9 l- l#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
4 Z5 k( b4 G# |. J9 N1 `其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
: N' A$ V9 Z3 h1 G' y" {! m! N0 q4 x4 P
id选择器也同样支持派生,例如:
2 {1 u( x7 y9 X" U- [+ B3 G#menubar p { text-align : right; margin-top : 10px; }
7 J) h* i$ Y9 Y, [ U7 t, j; M这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
}5 c) D5 b" j8 L. l, a* y0 ?7 R7 d+ C) s* U$ p M" \6 u
6.类别选择器
: N, V7 W( m; u8 h( |- o2 R
7 x& D5 G) S/ X/ H5 f在CSS里用一个点开头表示类别选择器定义,例如:, J' n9 u. E, K
.14px {color : #f60 ;font-size:14px ;}
" c. u8 x* Q M+ {4 q& A( m! J; ]+ M9 E/ p2 o6 `5 a1 w8 H0 g0 N
在页面中,用class="类别名"的方法调用:1 ~/ F0 n' |# {: H3 d( {) w" A
<span class="14px">14px大小的字体</span>
$ a- a$ ~7 [3 f. M+ x% M1 R# G: x9 {: }, s5 C
这个方法比较简单灵活,可以随时根据页面需要新建和删除。4 O8 W+ W' }$ i- k6 X* m
$ L6 ^( q8 ^+ a) q# Y- I) w
7.定义链接的样式
: |! i/ q, U! e XCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
% U& U) m4 n% R5 u4 x& d! v, |a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
5 b( K% S& ^9 L9 J5 @! Ya:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}3 W' v, I: S1 u2 l) Y( L0 N
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# c6 s" a9 |! @+ X D! }
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 y# j* G! \* c4 D s) k3 D/ _2 I# O% C' R
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|