|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。' R9 a- u' {3 K6 |
( m4 N% v) Z0 ^. s1.基本语法规范" k2 `' k8 q, v \" f# J7 J0 g
分析一个典型CSS的语句:
. L0 a9 `% q; v2 u; Op {COLOR:#FF0000;BACKGROUND:#FFFFFF}
0 n5 p. G# w" W, w" i$ J/ X# o$ X其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
" i+ ^2 i' y# B3 T! H: o) G2 z+ j样式声明写在一对大括号"{}"中;
" `# ]1 q- N+ p {, j. zCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
+ t" Y8 w1 \: J7 x"#FF0000"和"#FFFFFF"是属性的值(value)。
9 L( \: s* h% ?! M/ t: B4 D) S, t- i; [) g- B2 a/ q1 n: l" s- ?: s% r
2.颜色值
}3 A! o) J. b# ^: b7 w
- {* U7 s- _0 k# z颜色值可以用RGB值写,例如:$ O& {6 p9 \2 H H( e) j% L
! c. y* u: {1 ~: B
* X/ {* k; [+ U+ v,也可以用十六进制写,就象上面例子
; s n& Z0 t* C" u o
; D. t @7 t5 G( U' e8 V' @ {4 N2 w' S4 G
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。5 X. _, T0 H$ f8 M! Y0 p, k! f7 K& w
; B6 ]2 D8 G/ B, S1 x3.定义字体" c, A# m$ H8 Q. B9 l. y
web标准推荐如下字体定义方法) Y/ o( d! Z/ h% W W7 e
! R- g# W7 Q* r( A& ]body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ) J3 |& O' ?$ K' ~8 S1 e
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
( L1 j. q' I3 xLucida Grande字体适合Mac OS X;
9 U1 U# |3 n8 s6 H* \Verdana字体适合所有的Windows系统;
0 n( F* V& u3 x* ULucida适合UNIX用户 % m) N- L( @# z; L7 p
"宋体"适合中文简体用户;
) r# O; n; d/ s如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;& e$ Z+ V- f |8 ? G" B1 R
# D4 N/ \& L0 D; }$ } Q4.群选择器
' s2 @5 z) M; d+ d1 _, _" w7 a3 B4 i; O* E
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
: Q3 p3 f9 `6 [
2 \0 A& @/ t. q1 l3 ^7 ? p, td, li { font-size : 12px ; }
p; I, T$ m0 O( M( U就是给li下面的子元素strong定义一个斜体不加粗的样式( `$ S# W ?8 t# z) G9 @: {" M% C
) n. Q2 c+ z# u; M7 Q6.id选择器7 i# G" u w: Q( ~4 Z
1 w! Q2 \* v' x$ z0 t7 w用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层& B# G. c* }, y. A- E' R1 g
' J- W6 L8 b3 u: u7 a- r, z" |; l5 I: Y
0 a! ]- m0 T1 B# y. a+ _7 l% A然后在样式表里这样定义:
1 [. V8 k; T9 e: T+ e' z. |
! r9 h( @, J# `6 t5 C* l" X
. K$ d2 o" }& [0 @6 k* A#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 0 m' M0 A2 H$ ] t' O
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
6 H$ q+ W5 W9 o3 Q
. T( N% E }' K7 ^6 B9 i; Bid选择器也同样支持派生,例如:' @( V2 E, P6 s/ ]' P2 b. H
#menubar p { text-align : right; margin-top : 10px; } ( s% F/ q; _/ q
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。" S! {, H( t( n) B I8 Q' f0 V
0 H: O2 q1 c- D# Z N" |
6.类别选择器
* a$ U$ {+ c. J
$ |$ C: {3 ^7 |& C$ n: j在CSS里用一个点开头表示类别选择器定义,例如:# F, N+ V, o" K( _/ W# D* M
.14px {color : #f60 ;font-size:14px ;} 9 _5 y; ^" h6 ~8 m; ]
5 ?$ b& n, s6 g& s/ Q: q; V
在页面中,用class="类别名"的方法调用:6 Z9 X# E3 \. V5 g3 B* O
<span class="14px">14px大小的字体</span>
9 P8 r& U9 l7 u `! P7 t* u( u2 G! U/ o( C
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
( P( Q' R( x/ Q6 M* d+ J. Z2 G7 X; ^9 x
7.定义链接的样式2 w5 c9 I1 h6 S( _8 K1 e
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
/ y' {9 B* m% C# E! B$ C# L! pa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}" n8 {6 }$ }8 U
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
; D& y3 {% G3 T2 n$ @0 a, S: Ka:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 g: P# ~1 j4 {+ \7 K2 l6 _
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
2 ?9 r! m5 \- f' Y! e( H- a
; h# A/ C$ ]* d/ Q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|