|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1 z8 a. X7 S' j2 d, N. u6 e6 w8 D- s, g6 ~& o. Y6 u
1.基本语法规范9 V+ k1 ^ e/ F }
分析一个典型CSS的语句:
: R: g5 S$ Q& hp {COLOR:#FF0000;BACKGROUND:#FFFFFF} * w* H( d2 @$ ]* a8 z/ Q& C
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
7 e- Q# y* h& F样式声明写在一对大括号"{}"中;
- b2 K+ w& K1 UCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ; p4 C8 {" I3 t. f2 K0 K J% a
"#FF0000"和"#FFFFFF"是属性的值(value)。" q; ?; `- l4 g3 k" T8 P
# n5 e9 G0 }/ ~0 p5 q( g* ], u
2.颜色值
0 B! q3 v! j0 Y5 {. P" ~+ L
, i7 y1 C" p X# p0 x( d8 t& z颜色值可以用RGB值写,例如:6 F( o6 V9 r0 j, X( X( N
, d& r0 O$ C- Q+ S6 w0 n
/ y0 Q' |; a6 b,也可以用十六进制写,就象上面例子
1 d8 Y5 j$ J" H+ c0 d0 L0 q5 Q) [2 g7 y( S* C
6 _" W/ C# L8 T+ |$ s$ u如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
8 h) |- Y$ \3 G* n! `7 E# i) q6 g: O
3.定义字体
" q4 N% U7 c& ~2 u) a5 Hweb标准推荐如下字体定义方法. j* h+ [) V8 ?, y' d/ { c8 ?
+ o3 ?$ u4 F3 f* Zbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } % p0 h& M. ~& E0 j
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 9 C" |3 g- M* z+ g
Lucida Grande字体适合Mac OS X; ( Y6 u* L" Q% n5 L! f$ b
Verdana字体适合所有的Windows系统; 0 Z; ]% b, v+ R* {8 \ l; l& K! w
Lucida适合UNIX用户 : X& C B8 [5 K* E
"宋体"适合中文简体用户;
C1 j3 x' v. d0 B" ^2 A7 F2 \如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;% S" H6 P+ @$ r1 k: B
: ^6 @' l0 Z+ X! B# c
4.群选择器
v2 N. u8 P& K5 W, q
' G. J5 b! D$ R. a) L/ w4 m* X当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:9 W! d% u" o5 w6 s. z) U* ?
; m8 ~3 z: Z) q1 l7 r% Y3 {1 D0 d
p, td, li { font-size : 12px ; } ' V b% o5 P; f6 E4 @7 J
就是给li下面的子元素strong定义一个斜体不加粗的样式
6 A2 i" Y$ c/ H, L1 H- L" r+ `3 @! H' m3 U7 k
6.id选择器1 R& \& c3 Z; q7 j
( z% Y4 f. J7 M/ P用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
4 s, o( H. G1 \% t# \/ ]" b8 p- l/ Y# ~3 ~* w6 d
' [; T/ j( c: A. H9 O) O
然后在样式表里这样定义:" a% F6 \7 d; F9 E- H- `+ X% {
3 u: d5 a: h m) D& J. A5 }5 Z7 M" ?
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
5 w d* {0 z% O) r v0 e, n其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
# l7 Z, F4 |% h, F9 o. w, F( V& o
id选择器也同样支持派生,例如:
" x4 @3 ~: ]8 w) Z+ q( ]5 k. s8 u#menubar p { text-align : right; margin-top : 10px; } ! @& m( G( Y' T, T Q/ J* z
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
; ?5 }3 V' L+ E- [0 i* J
3 o. F1 j6 ^) f; E/ C N ^6.类别选择器+ }& N" I- Q8 M3 J* r
7 o) o3 b8 v) d9 P$ U1 k
在CSS里用一个点开头表示类别选择器定义,例如:) @" S* D4 l/ `/ @
.14px {color : #f60 ;font-size:14px ;}
) J$ O2 B2 E7 n, f$ q2 F
9 J: q$ e8 S- {/ Y0 M$ N在页面中,用class="类别名"的方法调用:
, `# i1 N. A5 D3 h. [# o' j<span class="14px">14px大小的字体</span>
3 d0 r8 v* i% h5 {; _% Q; X
8 }4 |( M) X& J. T2 g% ~9 p) {' P这个方法比较简单灵活,可以随时根据页面需要新建和删除。" |$ a! ^+ C4 q7 w/ v. b
) X- _ \& d4 ~: }- ^. L7.定义链接的样式- G: j/ x% ^- O8 l
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如: S# w+ X2 ?2 y4 K; n0 `, }7 E1 b, d
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}, ~8 S* l8 I% S, M/ _! B# O
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}$ F6 X% |& u; m, X3 i
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}$ A! P+ |+ w- s
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 7 y1 v( J) [# u$ B" Q2 `
" ?; u2 o; b1 s6 U4 d% l以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|