|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
* b8 z+ h4 x c* t: b
r2 X1 K9 s* m# k; z6 Y1.基本语法规范( D$ S. s, n# {
分析一个典型CSS的语句:
" z8 ?; S% U) |p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* \$ O: L) D# p9 d5 L其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
4 O4 }* K7 q6 O7 i. W( x1 r9 e样式声明写在一对大括号"{}"中; * t5 y' ~& K* d: R& Y2 F. L
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
% M$ E# s2 z) W9 x$ T, l% k1 u+ `"#FF0000"和"#FFFFFF"是属性的值(value)。( q3 d6 l& D3 z! @. Y
1 ~" Q" N' p7 B6 K( U
2.颜色值
4 j4 {" [9 G; K
0 B( d: b5 ^" v9 w- ?+ N颜色值可以用RGB值写,例如:
$ \- c- G( ]4 l- b5 C: ?+ {/ C9 o$ C3 ?2 [+ U9 Q
3 O5 Y+ t' R/ d" m. V, k Y$ P) H
,也可以用十六进制写,就象上面例子
& b Z0 x& i. i/ h" K7 d* U, _
* R8 d' O, @1 y8 E
* G: b/ b U8 @! ]8 j% f* K" T如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
& P/ S1 ^3 T! B0 I/ U. c0 ^5 n! _" c8 K" c9 K: z' L( _+ ^( G* n4 R5 z
3.定义字体3 K6 B- e- @) T( h/ j/ S
web标准推荐如下字体定义方法
$ @# e q) R. y. S4 y" p
- l! C! W% ~6 B1 |body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" S5 d0 m9 j6 S, k8 G$ t# U字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
9 T+ k" d0 v, k0 o5 T8 QLucida Grande字体适合Mac OS X;
6 A( W$ P1 x7 w5 m J- j4 g7 dVerdana字体适合所有的Windows系统; 2 T" q. b/ M2 ~
Lucida适合UNIX用户 5 F0 y- v! U C: B2 Q+ h6 T
"宋体"适合中文简体用户;
8 ]: c' F, x1 l+ ]; e3 f7 ~如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- s9 ~$ \' w; \! C
! \. I& d; ~: `
4.群选择器
0 `8 B# |& g2 @3 z+ } l8 D7 z% }, g$ d
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
1 q5 [' [. M+ [; ]7 P) B- _$ q4 l: U, z6 c( ]* w$ O/ u ^
p, td, li { font-size : 12px ; } / z. w+ L4 d6 ~) u( \9 m
就是给li下面的子元素strong定义一个斜体不加粗的样式
! U, v q( y( s/ D/ d& h. a6 D% c# R2 e! d" A$ U9 S' Y7 Q
6.id选择器
, }0 V9 M h" ?! ]) ]. ^) ]
% l, M q' d4 e& }4 G& @用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层7 j) g4 \0 @5 l) j
" \. Q+ f I$ U
, S2 H# |$ b6 Y, u6 J然后在样式表里这样定义:# P4 {/ z. Z) i/ D- f% N* i( z
6 @7 S, }" A% c1 O. X& Z- Z
) Y c) l# @2 H4 ]' Z#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : N6 ?' ^* o. `9 u) y5 Z$ P
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
+ b0 q* j; c0 D( b# E! l j3 r/ a& Z) v1 u& P) J# I
id选择器也同样支持派生,例如:. }( s" }; a# O; d
#menubar p { text-align : right; margin-top : 10px; }
! q8 w$ ~5 r0 u8 Y3 O3 B这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
' E4 p& a, k1 r" O) U/ {6 }; r/ z/ C
6.类别选择器( j5 X0 n! F8 W7 d
6 k c, u; ~( ^3 U% i5 C# c/ Z
在CSS里用一个点开头表示类别选择器定义,例如:5 ~- s: G# C3 c8 P" b% s
.14px {color : #f60 ;font-size:14px ;}
7 D& @0 Z: G1 x% y0 \* w8 e# N8 p4 m: v7 |3 e
在页面中,用class="类别名"的方法调用:4 M D, W, g* n F3 N6 p: t9 m
<span class="14px">14px大小的字体</span> ! R5 j9 \( Z; ^7 Y/ ?
0 u# G$ ^. ?' P( [; U. |/ [3 i这个方法比较简单灵活,可以随时根据页面需要新建和删除。
w* g! ~4 r+ x+ }3 f* o6 ~% N5 K( c# f8 x- @2 j
7.定义链接的样式
- f9 B1 |8 `& l+ ~$ LCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
) p5 ]$ k9 q( M0 u% h( Xa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}3 e% N. C9 s, h' ]3 X% T
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}: Y6 E' v, z$ J( ]6 K3 r
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}' T4 E4 |& p: B
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 0 y' a2 a& ]( V* H" h6 n
7 k9 H; a+ ~. G0 H: I. V9 d4 b' u- u
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|