|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
& g5 T _% Y5 |9 f
: T' z2 S% f4 l' r0 U, `1.基本语法规范
$ y) p4 l2 ]7 z) _, o分析一个典型CSS的语句:
# {. x6 ?( @: J+ Z' up {COLOR:#FF0000;BACKGROUND:#FFFFFF} $ }5 c0 u9 R( P% z+ X
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 f) N" t+ |/ E. V2 u* E样式声明写在一对大括号"{}"中;
( O( a# Y4 e0 E$ |/ N' ICOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 K t" f5 K* m, V
"#FF0000"和"#FFFFFF"是属性的值(value)。
V5 N7 e& t; \: z9 O
( z6 a: ~0 H# `1 x/ v( [, r2.颜色值
) S1 U6 G6 O% i0 f" L+ _ ]- X3 c1 t* d. e& g& H Q' f- X X
颜色值可以用RGB值写,例如: { P7 Q; n+ }
! P; O0 v7 L2 y. j, `8 b1 L- p. x5 {
/ e" H) V7 k1 B8 N; x, ~% Q
,也可以用十六进制写,就象上面例子" ]. H S) i" |" C: J& [
O0 f- s& Y7 E* D% t J7 m
: H& g7 |7 v+ U如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。! ]/ ^! O1 c' O3 Z" {
5 R. N ~6 r, D9 E7 w2 R
3.定义字体: y8 A, m' C9 v" U
web标准推荐如下字体定义方法! `1 d: E- `$ Z2 n2 H1 R {
, H/ [; @5 G: D* Q; [, s+ l9 `% _/ r
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
4 z+ E) O, F. c/ Y2 Z字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 ?* W" m' r5 L {5 F( b; G" R5 ~' [
Lucida Grande字体适合Mac OS X; 1 e( t8 Z* O6 n, I( S2 R& [- o
Verdana字体适合所有的Windows系统; + p" L+ ?/ i9 |. [9 X3 Z, A" L
Lucida适合UNIX用户
3 X% Q _+ k3 [; |% X D+ y5 j2 V/ c"宋体"适合中文简体用户; 2 i! F3 t- r- m" h4 ?& v- s
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
! `. E, \& q2 s5 r
. J8 o8 _7 p: ] E" m1 ^$ y4.群选择器2 N, Q4 P+ T1 U; @: g, @1 P8 F
$ }1 u4 \/ }7 m% p; M* \当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 `( N8 b8 m7 H* j
* r: v' [, G" q, t/ \- Z p, td, li { font-size : 12px ; }
1 [# J' S1 \1 t$ g* q: m5 O. u就是给li下面的子元素strong定义一个斜体不加粗的样式0 t, { \! E% S/ Z4 K# A
- X; {9 x& H8 b& ]& f9 M# }& ~
6.id选择器/ N9 l" ~% |' x7 Q" b% P* R6 ^
* U' L' b+ i( |+ o6 D7 m用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* o7 c+ E# r# V- X7 N
& e6 [9 q2 Z# H) s, Y7 @: F7 F* @; U3 Y( d
然后在样式表里这样定义:( t* [/ }% M% t# J6 b; i9 i, a \
; \9 o7 ]7 [& s" o- n b
9 m6 h; C8 v9 \7 u* {7 O1 b7 R6 b#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
3 c+ R% \' s8 M; I' b9 P1 i4 @其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
: G+ G% }4 d! x3 ] ^- O: h
3 ^' E s3 K0 }" \: k& ^id选择器也同样支持派生,例如:2 x2 i1 u5 x- l/ M" L3 t. Y
#menubar p { text-align : right; margin-top : 10px; }
2 q8 q8 V4 R" c- z这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
) _5 @6 D+ W( b" l0 E$ d: d3 ?) u+ ~
6.类别选择器
0 `6 l% K# v6 Q, F, F, R+ A9 Y4 @$ }( [4 ?
在CSS里用一个点开头表示类别选择器定义,例如:, G0 F9 M9 I: i: `, c' V
.14px {color : #f60 ;font-size:14px ;}
1 G9 i7 d7 B1 q/ L A# z/ a
) b3 Z4 `( W- ?0 @. d在页面中,用class="类别名"的方法调用:
: M, z- F( `/ K& T' \6 `<span class="14px">14px大小的字体</span>
' }, w: y, G: ?+ Y+ b
/ _6 Z0 U" Y, |* n$ X& S这个方法比较简单灵活,可以随时根据页面需要新建和删除。0 s7 x, K4 ^' R: b# k6 X0 s9 Y
. `# ]8 [6 j! s, H0 B: u
7.定义链接的样式$ O, V. Q% o Q
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
2 ]7 V* F6 k, U% t- \7 i; ~a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}9 K7 a# l& e& G8 ~7 ^" H
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! _0 V. _, G4 D+ V4 Ua:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
4 H# U) _7 u5 f. w- ya:active {font-weight : bold ;text-decoration : none ;color : #90 ;} - j7 O: j4 ^; j- _, b9 O+ c) R9 B
( Z1 Q/ m9 s, i% }0 Y3 A) M以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|