|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
7 @& ]0 F; @+ L( L z8 F
! {0 Q1 D: x9 ~" P8 l1.基本语法规范
2 q8 n3 p; y4 n4 l% H/ b分析一个典型CSS的语句:! R' A6 E8 v9 s6 N9 R0 B) q* {
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 4 o* ]# x3 X% Y" R0 f- Y* |" L
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
( r9 E; v' ~* ^6 g1 M样式声明写在一对大括号"{}"中; 2 E9 E% }' N* p4 j& ]! D0 {5 L& J! r) J
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
# f9 O+ S3 |2 c/ k, j9 q' Q"#FF0000"和"#FFFFFF"是属性的值(value)。
' @1 I* {/ }9 z( N; d
" M7 }% Z, K+ p; Z2.颜色值
. @+ J5 I, Z8 s/ _3 k8 \9 c0 _9 q
5 Y9 Q. N/ B3 k6 K颜色值可以用RGB值写,例如:
8 ?' y& w7 [+ k3 w/ M* b- n5 }9 b: d5 ~) U/ m& h
, K- }% i# ^2 g1 q7 m
,也可以用十六进制写,就象上面例子# A- g% r7 R% u" O. y+ W) y: H8 a
# Q* c) ?7 G& Z7 K
0 Z& P1 F9 h+ e, q$ U如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。5 Q# b( l( w5 c7 B2 ~% i+ C0 ?+ I9 N
% b* k3 k+ E1 w. N6 l. w- V
3.定义字体
" d, Z$ c1 ?2 T' x! a) E& vweb标准推荐如下字体定义方法5 l- O3 O8 d2 k; m/ r5 h
% v$ I, O E& Y
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } $ R! V, G8 ^8 C3 F
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ) l0 D4 A6 D7 v6 R) w9 B
Lucida Grande字体适合Mac OS X;
0 x/ L- N( G) M6 R8 sVerdana字体适合所有的Windows系统;
9 H( R: X9 I0 v: H2 M0 I7 hLucida适合UNIX用户 4 Q1 s' {$ W+ u2 i2 x
"宋体"适合中文简体用户;
- L0 b/ P/ W0 ~4 e1 E如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;5 n( l+ b% Z5 P
5 a% n2 _3 Q; n0 P$ o6 r+ u4.群选择器2 P8 X. i1 g1 x2 P) z5 I: ~! y/ M8 V; K8 p
3 j8 i* ^# O+ u) m- P- F
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:; L g3 c" p8 \! a% t
: t2 {- B3 a" L5 u- R p, td, li { font-size : 12px ; } : ^% b, ?) l! w0 k+ R7 A
就是给li下面的子元素strong定义一个斜体不加粗的样式
# W( P2 z9 ~. R4 Q, K
' o# M* R: O& y% E4 ? Y/ }+ `6.id选择器" v7 l( q0 w; M- S2 C! m' i$ J. F
* @) J1 s: v/ x8 R用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 L# W) k* {7 l: T+ H J2 ]2 N
) m/ R' J! q6 c* B1 G/ S6 R' B5 H
2 |- T1 C% X8 Q9 K, Y9 h/ @
然后在样式表里这样定义:+ B4 O8 R( b& ]
. Q2 [6 Q! V z' m. @. X/ f
& i+ ~3 L! b8 ~% K2 K
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
4 a# Y: K4 ?: ?5 O `6 @其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
, m- `8 x; d, b+ w! Y* P1 D! p) l* W& I* _, P
id选择器也同样支持派生,例如:, [5 q. u/ R+ S \/ R! f1 Q3 b$ C; w
#menubar p { text-align : right; margin-top : 10px; } 3 o$ e3 i6 v! G+ F% L4 ^" F* o, U- c. F
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
/ }% @. ]* D9 L8 L
a: J9 ]2 _! d' |6.类别选择器" I8 P& k- m5 k6 J
l) _" u2 Y1 w' E在CSS里用一个点开头表示类别选择器定义,例如:
( i8 X9 ?' a' H: B6 b9 {.14px {color : #f60 ;font-size:14px ;}
2 q* }) O6 o3 C! u
* f% [; Z( B" V1 v. [) k" c在页面中,用class="类别名"的方法调用:- h" K' M8 L! ^, C) E% u
<span class="14px">14px大小的字体</span> : L; T( }5 y, @
! c- f7 e$ y" O& ]( W9 V1 R+ J7 A这个方法比较简单灵活,可以随时根据页面需要新建和删除。% W e7 L" {3 ~ S5 `2 l
# J* E! P' |- y# k) z7.定义链接的样式5 U, Z( A1 d- }; V. X+ g A
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 @& L9 w& o* Q1 f+ i* X& {
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
+ E; B0 X8 k0 i( w3 E. U9 Ha:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
5 d8 D5 G P+ [* g* \1 |a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
o6 y! M4 R! S# ^* wa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% c! d" k% y3 x1 ?, t7 F# J
( m( \+ w1 n( E7 b0 |以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|