|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。' D2 k s& N* o0 n
) f! J' u: d* W: l( A7 V) ?
1.基本语法规范
3 U1 z0 u3 `; y! o3 h! W分析一个典型CSS的语句:. ~! x! ]: E) z: u0 Q
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
% |/ w7 W4 [) R/ n% N; t% M其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; - i3 m9 c% j/ Z4 Z+ @7 \$ w0 t' N
样式声明写在一对大括号"{}"中;
% T5 w: `0 T3 Z- U2 UCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
* V' p& l4 |3 t( r( o6 B% B"#FF0000"和"#FFFFFF"是属性的值(value)。
1 X2 q# P: L2 |3 L7 ~0 f
* |, W9 I5 c6 Z% B1 K# f2.颜色值
6 m0 c) r9 m2 S& {$ s2 o4 j" u
3 k, Z, G/ u' s+ I) x% f3 \颜色值可以用RGB值写,例如:' m- F5 a& y! q% }, ?
3 O4 Q, f% }$ [5 x% M9 }9 G6 M& U. H7 f# W; ?$ [$ r6 f4 p' G
,也可以用十六进制写,就象上面例子2 L) {! ^* d- x& Z6 f
7 P- z* j( i$ @ e% R( S
, k9 i j0 |) y: r% r+ D9 D
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
; u% z- k4 k& L- ]* L2 p. g2 `" b' ~* A; S! a8 i7 ]+ y& L% v
3.定义字体
. Y7 _& w4 G, T5 e: u& Hweb标准推荐如下字体定义方法
5 {6 u7 Y' {: L, C2 J3 j8 K8 T0 L# g' R0 f$ I1 ~
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
1 J2 ]) I0 D2 r8 w& [: V字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 v4 K' e/ J! J G
Lucida Grande字体适合Mac OS X; 4 X* @+ ^* q2 o: d/ g( b
Verdana字体适合所有的Windows系统;
" e; |7 U# \0 c6 O+ vLucida适合UNIX用户 2 d& }% U$ r+ n; @: D
"宋体"适合中文简体用户;
8 r# }. u: C9 ]# Z/ `5 O% |9 H如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
+ i7 T( q; n5 S
+ S" L/ M; N' j0 t- p% C2 p- E4.群选择器
/ f8 g4 k4 u# t
4 _, b# ?5 l- Q当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ @3 y% O- a2 b1 @! C# L2 o4 Q5 S
p, td, li { font-size : 12px ; } : t, w5 O/ g/ I. e, t$ m
就是给li下面的子元素strong定义一个斜体不加粗的样式
* y g' s) i3 k7 |
2 [8 f9 f, I6 M* N6.id选择器
5 P$ h* v+ A- g! O9 F
* N& G5 A h" g3 w用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层- D: [% [/ {# V, w4 y' O
$ \8 t0 y" @) d8 F7 A- i, S
" Q* e4 T/ h" B( |, L
然后在样式表里这样定义:; O" A; j& V. B
, s z6 i4 d r! V" k
9 r& ^/ B. V/ J& E8 A; X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 5 W! g- {6 n. l; z. S1 H0 C* t( H
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
+ F9 M# t- \0 ?+ z
3 z0 I9 ?) S l8 e' ]id选择器也同样支持派生,例如:. Z: K v5 {! {$ O6 _
#menubar p { text-align : right; margin-top : 10px; } 9 v0 z1 e( o2 v$ |% ~, ^
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
9 k+ W7 P& h/ U6 w: ~1 F5 y
$ @, ?' {& K7 K# p% a1 h6.类别选择器3 g `( v4 M4 }: x W8 c
! W o! r+ T0 @4 \6 g6 x+ ?在CSS里用一个点开头表示类别选择器定义,例如:$ n4 B. w( E X4 u& Q
.14px {color : #f60 ;font-size:14px ;} ' O, S* l8 ]1 Y: k( \
7 b D. \3 w/ C$ I/ P
在页面中,用class="类别名"的方法调用:
5 v1 ?' u8 F% W1 q* Z( B u+ s% ^<span class="14px">14px大小的字体</span> + S! @7 x, m: ^) T2 U
- ?4 c3 k5 w) |5 x这个方法比较简单灵活,可以随时根据页面需要新建和删除。" y# i7 T o8 _. E! I3 s/ o
5 @2 H, q2 S# t
7.定义链接的样式
* p& q5 J, q2 h8 s; K0 t0 i& X vCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% f6 q7 t k5 s
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 w! z! a$ ?+ a2 z
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
g% z( h4 @, }8 T/ i ia:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}. ]3 i* X0 V* c- p/ X' ~
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
8 j3 N/ G) ~, \0 S8 j1 T% b
, I: k% D7 B# C& x' J/ S以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|