|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。 m i* @7 D( R8 B2 |
1 Y$ _3 C7 L1 X ]! @1.基本语法规范
9 `9 f/ h! ?" X分析一个典型CSS的语句:
: ~2 ^& Z* V7 U, sp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 S" X( N; a% S9 ~0 i( d8 B其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; / | U8 G3 @- Z+ D1 c4 q/ H+ Q
样式声明写在一对大括号"{}"中;
. }( M! Z0 ~6 ~% M5 Y/ v0 lCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 6 f# c/ c* G4 m
"#FF0000"和"#FFFFFF"是属性的值(value)。
1 a# Q7 L: Q% w' `0 c& r0 G! f- ]& N2 L6 ?; o
2.颜色值, ?7 ?# p7 j" Y( r
' E3 n1 t9 T9 {1 N8 w" }9 B颜色值可以用RGB值写,例如:4 o, L. u4 ]8 B, x, c0 d
7 n1 l9 C! ?8 p4 B0 F5 J' j0 ]2 m
0 Q# w" D) y6 o+ S7 T5 K,也可以用十六进制写,就象上面例子; W4 x3 J4 G4 b& [9 `% t
& s# k1 K; ^) m) Q, d! x3 c5 |7 G$ g3 w4 W/ }$ u& i' F! u: Z% y
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。0 R6 V4 M$ }- A3 {+ B& t: N
1 q: ~1 x, c, \8 z3 c
3.定义字体. ^3 W/ h, j0 o4 b! A- M
web标准推荐如下字体定义方法
; ~& B. F& i$ X. m* J# I
( H9 S5 V/ W$ g4 G' i, Lbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: e# N0 F( Q7 w- B9 \8 g字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; / K! O( T0 f5 ]! G( x
Lucida Grande字体适合Mac OS X;
" y* m' X& j$ O1 U" jVerdana字体适合所有的Windows系统;
; v/ j0 m3 y- H/ YLucida适合UNIX用户 ) }- {1 }( i2 H/ Q7 f7 A; _5 [
"宋体"适合中文简体用户;
7 }2 x5 G+ o: ?+ o2 y! j如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
# S( `: r* L9 O8 m
3 ~: x: n$ D2 a. k/ _) k7 i5 j4.群选择器
$ W. I$ x* f- T1 G3 _
\: }7 A1 R& ?+ R) Z当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
( P9 y( u8 z5 i4 b, }; {& J+ R3 E! [6 o# G. `: B
p, td, li { font-size : 12px ; }
6 e6 V6 f6 y6 C" L7 F1 b' z, c' n) ^就是给li下面的子元素strong定义一个斜体不加粗的样式2 k' x& K& A: P
0 K9 I! A! D* x6.id选择器7 U/ M5 W5 }2 S! H8 M; M; H
7 U% g2 B% |7 q3 o
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
! O+ V, | ~1 v5 o! j9 S7 ^9 Y
! S6 h" ]' F- n; R2 L9 q* n5 u: ?3 k/ B. T9 U, N/ H. W. p
然后在样式表里这样定义:/ L5 v* j- y7 A: p
1 \2 K& \& l; M, `' x7 [0 D4 _3 m$ V9 o2 v/ \+ J
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
1 {) U' s8 J3 O, p其中"menubar"是你自己定义的id名称。注意在前面加"#"号。4 b% k: r1 A, k% P0 e
O! U# _ b' @& W+ R
id选择器也同样支持派生,例如:* `8 d1 g* E- j( ]9 J
#menubar p { text-align : right; margin-top : 10px; }
: x: ~7 t1 |8 u" _5 ^这个方法主要用来定义层和那些比较复杂,有多个派生的元素。8 [' v+ ?" n1 K3 ]9 L) Z9 M; l
3 h* Z3 f, G8 t) q) V/ H" Y6.类别选择器* |; Q6 `& }' B4 m. @/ p
; L) m7 t+ y+ i" F. g* s; V" T
在CSS里用一个点开头表示类别选择器定义,例如:
" h2 b# q" k T0 @& k: j.14px {color : #f60 ;font-size:14px ;} 1 L$ L4 Z# x- D; h* N" I
3 Y3 f! }: E- D8 g' r+ P
在页面中,用class="类别名"的方法调用:! p( t+ o0 G( h' Q3 ]2 I1 m
<span class="14px">14px大小的字体</span>
, c7 k8 D5 k: @" T# [+ ?2 R3 r3 `3 \+ q' Q/ k1 ~9 J
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
% l$ J) }/ w1 X" ~: C5 _# B$ z' y% m4 e& c, x* q
7.定义链接的样式
+ t- q" k4 S- w1 J! Y' ICSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:6 x/ ?1 P2 U1 G. x, E$ R
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}" |1 w+ [5 {$ `. h! e7 z
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* u0 l( h( v8 M( c+ {' R
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}4 I& n) e7 q* C: Z. }
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
) D2 G4 s) C m y8 K1 s5 P! A& s. k) A$ P) }3 H: b9 h% o. J
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|