|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
* m4 |, L7 n, d0 Z0 W! N5 [. U' t& N1 b0 J
1.基本语法规范3 q. h z% \& L. y& T3 i$ X3 H0 N
分析一个典型CSS的语句:
2 \5 ^/ I0 f Y- _7 mp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' c% o+ i* D) N L! F其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
3 v# l5 f4 \" g; \6 P样式声明写在一对大括号"{}"中; ! X) K+ Z8 a, _
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; % I" o0 H$ N' E- w2 Z! A
"#FF0000"和"#FFFFFF"是属性的值(value)。0 L; W$ L1 W& z: P& g3 N/ Q* I
U' G# d; m4 X2 ?
2.颜色值
* g2 ^) @ k9 M% z' l$ h; a; U7 ]8 Q) V
颜色值可以用RGB值写,例如:- h n' Z: |( ` U) d
. E( I# b) {, Z, l% H9 |' m _! x, X$ V) ^+ D" v% ~6 ~! ?% Y( f
,也可以用十六进制写,就象上面例子4 {- ^9 u# B" T% \- f$ X. ^
, |2 Z7 [7 p/ D6 G7 T% t
( p: [1 I" o# b! ^( }, ~/ X! v如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
! O" W% W0 B9 I+ a5 [0 K: x: \
& m5 h# I5 l7 Q2 _" x% s, w% w3.定义字体1 x0 B3 m- E( X
web标准推荐如下字体定义方法
, S, D7 m: E) H& V$ J8 J0 O2 z5 u6 j) U4 q J
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 4 ~4 r2 r: p: s) C: a- Q# h0 q
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
) a* |- G( l) nLucida Grande字体适合Mac OS X; % R0 u. J" i K7 c% N' q% T% t
Verdana字体适合所有的Windows系统;
; z0 g- m* e- u. F' O7 }% P. j% lLucida适合UNIX用户
. k1 d$ e6 u* Q! W J' Z"宋体"适合中文简体用户; + a; l- c9 \& G' e+ e( [$ a
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
- [* z6 {7 n9 g8 U
0 b$ J; t6 H9 W i P4.群选择器2 I! b; Q2 Y* c( h! U
) i: K e3 t# E3 P; I, A当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
+ |& [, `2 S$ j9 D6 Z' `+ Y: L0 k+ {' a( m
p, td, li { font-size : 12px ; }
+ R7 W& p' L( H( W" V& b就是给li下面的子元素strong定义一个斜体不加粗的样式
4 X: N& o3 }8 i" _/ S7 V; {5 Y T
0 }( H" ]7 w' L+ M; _! i4 m6.id选择器
% b9 a w0 J* X
8 J* {' R. J& X/ r p用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. y5 [4 w T! ^7 j- l3 q/ N5 m2 n. U: Q3 k5 P9 p2 X
2 j& O0 ^5 P8 L3 h: e" E S
然后在样式表里这样定义:
. O- h4 T, w$ R3 q- N& e; H o% w* f; i
- l/ x, G4 Z: H4 Q j6 ]; a+ @, o) G. d( R2 S
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} . R( k) ^* z/ c( }5 g
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 F2 [' o" N+ j, ?+ a7 o
' b8 V+ ~; Q* j- D; B" X5 x' s" {id选择器也同样支持派生,例如:; ^$ q2 \; L0 w( _4 ~' z, V' O
#menubar p { text-align : right; margin-top : 10px; } 9 n% A0 ~8 b ?; ^6 c# u
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。& T5 o$ C6 H+ K! Q( {% Z9 ]
$ _% k* T4 M% D5 a& A6.类别选择器" |3 x* b9 e, K" [( r$ S: f
, I6 m9 ]4 r7 v
在CSS里用一个点开头表示类别选择器定义,例如:
/ c9 ]" I. J& ] Q# N.14px {color : #f60 ;font-size:14px ;} ' z2 I* m" [5 e7 F) e
F; h8 Z! O. \# E" R在页面中,用class="类别名"的方法调用:
% M/ d; T% L K) t8 B<span class="14px">14px大小的字体</span>
1 @& k+ b: _2 E9 x; i3 K
5 s0 `% ^1 n2 e+ M' p这个方法比较简单灵活,可以随时根据页面需要新建和删除。
8 A: E( v, o+ |0 k: {9 B. a% s" w- A) u ~: H3 M1 R
7.定义链接的样式
9 Y% G; ~# i3 X! j, E n k, ~CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:; [3 l& `& T# I) s
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}5 d+ H- Z7 d' k, \/ b6 F7 B
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
3 z/ ?5 ?/ c1 x$ ?( Aa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 T: X9 x# R( X) q1 Wa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 g6 T9 S2 o" J0 G) H8 q" `" P* g) w( _" F, p
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|