|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
: z: R4 K& \' d- K2 d7 U
" j+ Q, H! @: N! }+ j1 V1.基本语法规范8 I; e! ]; W& _6 Z9 j$ i; F4 O
分析一个典型CSS的语句:
% g4 k s- F% J$ j. ^# |p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
4 s5 V- }# l% Y其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; " n4 N: {* I( v- t# T- C
样式声明写在一对大括号"{}"中;
# I$ x# r5 Y3 G: g" A4 R4 wCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 8 j8 r8 l N0 o5 C1 O7 j9 z& S* j
"#FF0000"和"#FFFFFF"是属性的值(value)。
: v' Z; l0 u i( \5 I- d: x9 B
$ D9 n) n8 w! a8 T6 ?2.颜色值8 g4 v, r$ o+ N
+ Q+ @. i4 N' y, P) ~颜色值可以用RGB值写,例如:
8 J0 E. B! \1 O, A9 Q1 t' p! w" j2 C1 L# U
7 i- C* n" j% ~6 U1 [6 r ^+ J6 D1 c,也可以用十六进制写,就象上面例子) a0 P( _7 ?3 R' D
+ V* x: o" Z; f, {
* F4 k8 V6 b$ c4 I
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。7 a5 b3 q6 c7 L" h( C
- Z8 X8 k8 C; z# _! J, ?
3.定义字体4 M$ C/ s& ?: p/ I! K
web标准推荐如下字体定义方法
V7 R9 U( j" {/ v" U0 u3 m; n3 |& v9 X
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 9 G6 O& J; ~& S
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
8 F4 q, y: m) MLucida Grande字体适合Mac OS X; ! e( N, T+ G$ u: O6 X; [
Verdana字体适合所有的Windows系统; 4 U! o" W$ j/ U9 R4 _: Q, N
Lucida适合UNIX用户
# A) N( T4 F1 [6 G0 }8 Q"宋体"适合中文简体用户;
5 c2 `/ X. \3 b6 R6 C+ s- f% A如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;) k: v& `' Z M( G% Y3 s
1 h! w& ~' O/ H! A: W, \+ ~
4.群选择器
! ]1 D- l3 ~+ v5 N! |
5 Y& y4 q2 u M9 Y% o当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:* f" C' k4 B5 b1 m# G% F
! A/ Z }" h/ C! Q4 n' j* A
p, td, li { font-size : 12px ; } " C! v2 T5 {: v2 C# v/ P
就是给li下面的子元素strong定义一个斜体不加粗的样式
% S/ p7 z0 B/ Y* }, _5 _: v/ |$ k5 m" e5 D( C7 S& n4 a$ z* a
6.id选择器
( |, ^) K; W @$ J' O+ p
* _( M, f& T ~' r, y; x* e用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) g: u5 k3 t# \; n8 D! H+ Y
B R) z% L& M* _( O) `: O" w
@: ?( y3 @1 y- C然后在样式表里这样定义:
) L3 J& _* u* ~+ U2 d
* L H6 R- ~7 o5 B
5 P% ^7 ~# h' h' d0 Y8 @- m$ }#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
# g; `0 h' J1 U0 U其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 e7 A: n' j k' E; K' y
7 q3 O0 z& p7 s
id选择器也同样支持派生,例如:$ r) x e4 A/ B; m1 P5 w
#menubar p { text-align : right; margin-top : 10px; } & ?! O6 c! V$ t+ Z; y; M; K
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
: \+ w# o; U6 k+ T8 q5 |, X9 F- j, n: s ^; O( ~
6.类别选择器) V6 i; Q O. o" Y1 W- U
: }% R" x, h; ?' B7 U在CSS里用一个点开头表示类别选择器定义,例如:
6 |) f+ u: }6 t8 E.14px {color : #f60 ;font-size:14px ;} / G/ H; A2 v$ y4 y" C# p
" C1 I( S0 ^1 y5 f3 X! @; w0 _2 X/ l6 o
在页面中,用class="类别名"的方法调用:
2 O0 h& v" X6 G6 w' Y' [1 Z4 ^<span class="14px">14px大小的字体</span>
, L2 x- Z. x7 g5 j y- Q& ?- N/ ?. U L J8 L
这个方法比较简单灵活,可以随时根据页面需要新建和删除。3 X9 x, _3 d0 U9 C1 l7 v- t
$ `6 n- J0 ?# P& V7.定义链接的样式3 W3 `$ ^4 ^7 N1 T, C, F
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:" C) j8 `* D! M# v3 K! M+ k. \
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}! A$ s1 w! f( e. @" w
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
3 a3 d G' B$ A1 X! Sa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}7 M. d. Z! q; w; N% {; L) L9 q
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 7 x2 y) t# l! j4 m" v8 f
0 m6 L# p6 }9 ]2 Z( _& P( s以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|