|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
. x, X5 i! o$ |1 I2 h/ ` ~6 e5 u# p8 \3 P, a |
1.基本语法规范7 Z `7 e: x4 j% \7 \; H( f/ k
分析一个典型CSS的语句:$ O3 s! U7 [7 b6 R
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
( P1 Y- X- a- F C! Z+ a$ B/ S+ q$ A其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 1 [# Y3 q& _- u, ^9 }
样式声明写在一对大括号"{}"中;
! Q9 D# @% E+ S5 k; WCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 ~7 G! b* l/ C; v5 _
"#FF0000"和"#FFFFFF"是属性的值(value)。4 t% P% D" X p6 X- [9 b
" d6 p' `- {+ q* x& R. o: I2.颜色值
2 r/ F' D0 H$ W9 x8 d2 D# f' ^4 T; _8 Y* D; T
颜色值可以用RGB值写,例如:7 X6 j' \: `9 s4 {: O
; W7 [9 c4 _9 Y9 D% ^* U( m' j
- m6 b6 y5 m3 d* y* `" G,也可以用十六进制写,就象上面例子" w8 a0 s; c7 H
" R! s- Y3 t. P( g" y( k; q7 V+ q
" e) g+ S- r+ y5 \4 h如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
' s% T8 K6 I# `* M1 @( o4 d6 J- S1 C; A& F& k" S
3.定义字体: M; W* f% F6 ^7 V; B: `% \ Z( I, T
web标准推荐如下字体定义方法, `1 }) v* x+ ^9 p" ^, c
' {1 l# q5 ?3 s* t, O H
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
3 |0 r% }7 k1 w6 y字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
+ r- }8 Y/ J% @7 k! ^6 oLucida Grande字体适合Mac OS X; $ u, G9 j8 R$ D+ M7 {7 Z$ f
Verdana字体适合所有的Windows系统; $ F2 M8 {* D, p v( z
Lucida适合UNIX用户 ; q7 L' d1 _& y8 Z
"宋体"适合中文简体用户; ) _( v* z% ]" [' h; L6 H" U
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: L1 e1 v- f& y% k
6 k, F; R. L" h4.群选择器
- {' G. ?2 w0 |# L( @. \ ] |) n9 [' L1 P
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
; e4 ^) |4 E3 Z3 X) o$ {' j9 c2 z
) `# ^4 P. |. N" ] p, td, li { font-size : 12px ; } & T, }* r: O( D# |9 ~2 F6 `: ^2 `
就是给li下面的子元素strong定义一个斜体不加粗的样式
# P) G. [2 `$ F5 E9 S' B9 }- v; m% z- I2 J4 R
6.id选择器& q2 W1 C" i$ t9 ^, t7 c
, \+ n/ N* u: \; C5 B- \, X' c用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层* |* J4 x4 |" ]3 t2 c W1 l
7 v* O" m A3 v. {7 L1 W, x. s7 I0 `1 f5 [( m( M/ I. r; O6 l
然后在样式表里这样定义:; V, ~9 C- t0 e% y- y$ ^* w: m1 k6 G
; w, i. D" z+ P/ `. {/ s+ i) M
& i0 w* f' N5 |7 _
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 6 w, T0 d4 _) s
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。8 @6 n* \% f/ a! d/ V
$ v/ E% l2 c* n0 f
id选择器也同样支持派生,例如:! U. J- ~( Z/ t5 X! g
#menubar p { text-align : right; margin-top : 10px; }
4 F! s0 ~! g% v0 K/ P2 h- o这个方法主要用来定义层和那些比较复杂,有多个派生的元素。4 O0 u1 f! }" I" i/ Y3 p7 G
# K( H: q# K! f& B
6.类别选择器$ |' {+ V' X: }. U
& Z) d; H4 _' s; h5 |) h, r在CSS里用一个点开头表示类别选择器定义,例如:
" M* N3 e0 e; o7 v* p+ b; e; Q. V9 M.14px {color : #f60 ;font-size:14px ;} 0 J! |" t' V" `
. t$ L) N+ S ~, J: C$ m* K在页面中,用class="类别名"的方法调用:
7 m. e0 R2 x4 X- [3 t<span class="14px">14px大小的字体</span> r# H* }" v" o8 ]; i
- E: U( c% n+ K' s$ w* a/ r! s$ ~
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
k5 C l1 x6 n2 p5 E( D" M" k+ R1 U9 }2 B. Z$ n; ^& C0 O
7.定义链接的样式
2 g* z+ x1 q( z& bCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:# T5 E+ N! M! A& R" ~! c
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
: T* Y. d( H) Ia:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! l$ G* p5 V0 Y: e+ f' B8 V2 i6 qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
0 E1 _7 k1 h- Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 1 d' U: E) ~0 A; D& D( ]8 C4 V
: u9 R+ }( R+ L以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|