|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
3 ^' b% N/ y6 a; q: e0 `/ K |+ T1 G! W) B; S' t, p) L
1.基本语法规范$ R9 s% h0 ~5 t3 L" ~! b2 i
分析一个典型CSS的语句:
) y6 H. {: G# \, z3 zp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- H/ r# ]4 U- z其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; : H1 D' f# R, J1 |
样式声明写在一对大括号"{}"中;
7 @' \9 f7 Y7 J" a% P6 ~) J+ CCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
* m4 v1 B$ q2 H- c# }* Q( T"#FF0000"和"#FFFFFF"是属性的值(value)。: ^! z; U) S0 a ?5 T2 C: F
9 @( O# F9 J- M
2.颜色值* ?4 ^* w7 m/ d9 t+ Q! L7 }
0 Y' _6 t# U, q$ s B+ f7 g颜色值可以用RGB值写,例如:
C- J7 U3 N; {) b2 |# {4 a; M
3 g( e* b( l/ Q' @) u4 |
5 A$ n A0 t4 r3 `0 }5 Y,也可以用十六进制写,就象上面例子
H. T8 @! G& A* e& C6 q9 H; }3 @; E4 z1 b9 s; h* Z
' j( ^2 H. N# L6 o
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
, C+ [- y1 N( c+ W# \) O, e0 S9 @* @$ D" Y! Y$ H* q4 @
3.定义字体
: R3 }% C, r' o7 f0 A6 xweb标准推荐如下字体定义方法
! t% T0 b. D9 e( [
0 H, U3 C& J" f# f) }. |* F. E Abody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ) a( o0 S2 C& `# R0 K1 J/ A! \- g
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
7 E6 J$ w: D: G1 y1 B2 {) A rLucida Grande字体适合Mac OS X;
& ?- G3 b7 H8 SVerdana字体适合所有的Windows系统; - [, F! ]2 g1 k; d' k
Lucida适合UNIX用户
6 D* l8 P* ~" `# ["宋体"适合中文简体用户;
; \' K. o( {( k0 X如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;1 ~ E* i+ \) u, w* i: P1 Z
. \( q9 B, I+ y, L$ ]% j4.群选择器, Y/ [, A( z6 Z5 z8 W; d7 ]
3 @) J: F; u W1 c4 F3 S, d: l
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
+ Y# G, }0 Q; g. R
; @2 b4 F. Z% O( G6 W p, td, li { font-size : 12px ; } 3 i; T: u& i7 e+ b7 X
就是给li下面的子元素strong定义一个斜体不加粗的样式
1 K; M0 b# D% c! {, r& D6 ]" I/ U% w8 P6 M
6.id选择器
1 U/ G% D3 r) V9 F# O1 }8 E+ B5 T2 `6 W; b5 x
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
6 w/ C, P; g' O( s+ |+ x% M: S: @' L* F# M: O8 i8 ~# ^6 |
: [! x$ I& ?8 o1 @5 C5 f0 n7 f然后在样式表里这样定义:: {! B/ V- ] W Q' V- A4 X
, ^, T$ A3 R6 @$ d7 J& O: v; _$ k% i
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} . s5 J. U; B) \0 V* ~
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
) F* d% `$ @0 Z, `% [) I8 @# Y( t# n6 f( j3 {+ W5 r6 `1 d
id选择器也同样支持派生,例如:: D/ M! U; ^, M
#menubar p { text-align : right; margin-top : 10px; }
7 z% m/ `! x3 h9 E$ L% V3 o) v$ f这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
: D9 D7 @# P' e' Y* `+ [, T. w- N8 G8 O
6.类别选择器4 u! ^9 z- u/ y+ n/ E3 r% ~
3 X7 P0 s3 O7 v在CSS里用一个点开头表示类别选择器定义,例如:- |- d2 w' y; q: P
.14px {color : #f60 ;font-size:14px ;} $ m- `6 K" H1 C: q0 X6 g. v4 K* `
! R) x' s2 j1 k5 e在页面中,用class="类别名"的方法调用:' V4 o" H8 d& _: J3 b3 e
<span class="14px">14px大小的字体</span> : }( A. Q- r7 |+ M! f! z- A6 I
l4 W- o: Z- |( [8 ~这个方法比较简单灵活,可以随时根据页面需要新建和删除。
! }) j& r5 t& X3 b& ]8 u2 [- v' |% m8 [" Z: `1 |4 Y f! {. M
7.定义链接的样式
9 i. X! Z! L4 S$ h7 l. G: N/ ]CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
4 H9 j) m' }# M/ L. c, ka:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
8 X$ u S0 ~. I8 J* za:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
, l7 T% p: ^1 ~1 s2 A# Ta:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# }0 Z' h$ y7 M2 c' y
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 j' R" j y+ D1 |$ d# t) F/ y
; `6 P: A J, C* {5 F2 h8 s以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|