|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
2 L, ?3 x7 _% i3 s, }& e8 v" v" d, c$ x) r+ [
1.基本语法规范
3 x8 P( ] V, F分析一个典型CSS的语句:
) p% E* V& y( q$ Ep {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1 ^" j' W0 s8 R其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: s8 g5 G$ z [样式声明写在一对大括号"{}"中;
2 w9 E& Y4 r9 {COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
7 a% ~* _5 w/ G; A. q* E"#FF0000"和"#FFFFFF"是属性的值(value)。& u" L# ]1 e6 E' Q9 N2 ~
: h, P7 b4 C2 X/ k4 k; Y% m2.颜色值* w$ F H( j1 K
; B2 G1 \2 j7 U W9 _% S; v) f颜色值可以用RGB值写,例如:; H" ?# w& r. c! n+ Z
- ]+ O& Q( Z' m/ R" x+ Y& P: X
2 [- ~, t0 _. G. e. i k( Y
,也可以用十六进制写,就象上面例子6 K! p4 {3 l& W
- [1 P( A6 c7 W% H
6 N9 I& Q- M; H, D9 P6 A
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
3 v X4 {! X: S! _% H! K- A0 @; \6 W) J3 N: V
3.定义字体
& Y% q3 y1 [& J1 Kweb标准推荐如下字体定义方法* t# G* c& G0 a# [
4 G2 E+ X* W: ]& Q
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
. a: s8 v: x3 E/ h$ o/ z+ E! x字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; % E1 f: j+ c: N. l9 L
Lucida Grande字体适合Mac OS X;
( j q' ?6 \, D7 f2 w P9 vVerdana字体适合所有的Windows系统;
' d( S+ Z4 R/ q. |* Y' ULucida适合UNIX用户
N! A' ^ e a- j0 d8 X"宋体"适合中文简体用户; : g$ P! H( P: F3 J4 K( `
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
) s# N. j5 a: {/ q3 T. l5 o
8 v( O# ?5 t& T4.群选择器
9 R3 V B% v2 L. G: ]9 S- @: h# e9 G: b% [! C- H
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
) c7 X* d+ i6 V3 z" ?# i# q w- H' H' c+ @$ T& V
p, td, li { font-size : 12px ; }
% M1 M! G4 y( I1 t$ R4 C/ }* P就是给li下面的子元素strong定义一个斜体不加粗的样式
( \; v8 I1 I3 \8 g
( x# i- u Y5 J1 s3 [ ]6.id选择器
; y+ P" h" H; S, q+ t7 I" R4 u+ j! }
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层1 ]( f" { ~$ f' b0 W
0 |3 w. F( Q k# @) C: [6 f
) d4 U" W; d7 r' J0 ]- ?然后在样式表里这样定义:$ M, P6 o; C1 O; a6 @1 ]+ Y
8 D9 K/ R0 W8 y4 Z2 X* Q
9 A1 C- t" i' P. H) Y- X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
' s7 x, L% J8 q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# E! E7 t5 U1 A; h
" V7 C+ N e0 c" x. C
id选择器也同样支持派生,例如:" w( |& S9 E) F- C" z; t, s/ \
#menubar p { text-align : right; margin-top : 10px; }
* t$ a2 C0 e7 x$ Y4 Z" N6 H1 c这个方法主要用来定义层和那些比较复杂,有多个派生的元素。8 y* G' ~9 }+ g5 n8 s+ A
& q7 O) f- X5 e+ {
6.类别选择器
{; p" z" ?! m2 j' c( O9 k5 H
5 S7 l2 E: v! v/ N在CSS里用一个点开头表示类别选择器定义,例如:, B2 d$ j! g7 j/ Z" T9 l- `+ M
.14px {color : #f60 ;font-size:14px ;} % G! r! \% J' x% V" s
. K# d7 Z, h, I% F9 D* b1 D/ T在页面中,用class="类别名"的方法调用:
$ P; \$ Z# j0 D<span class="14px">14px大小的字体</span> 3 B0 }# s) q7 T% b( G1 j
' J6 G" |2 o- R8 Y: z+ g
这个方法比较简单灵活,可以随时根据页面需要新建和删除。' }8 @* a k( s7 k' b: t
& Q/ f2 R* I& A7 G2 q' a- C
7.定义链接的样式) K: f( F! h0 z
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
( T3 `9 a. l3 }3 p9 A/ Ja:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}0 N, v8 H4 Z5 b' r
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}1 x9 U1 p: i3 T- }! e
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}: K- E9 ?8 Z; s) M+ B9 ]8 ]
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} # Y) j' t$ S' s4 E3 t- W
' m: E9 S1 Q: `1 t8 d
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|