|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。. ]6 |0 J& S9 s0 C" w i
3 `1 S1 H: _5 V) k' n0 `1.基本语法规范) C# M0 a- `# n: m! g8 J" a
分析一个典型CSS的语句:
8 r& N, ? o+ Ep {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& v* ?. Z% @4 @其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
% ^0 m2 ]7 e7 R0 f样式声明写在一对大括号"{}"中;
- `) _3 j. {; k& e6 RCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 d% A. V6 c* g- `3 `: v7 n0 U
"#FF0000"和"#FFFFFF"是属性的值(value)。- z) {+ S1 l4 F
# f) W4 M- k: _) ?, a2 V9 y" d
2.颜色值' u0 Z; b. T! O
$ g4 Z- ^4 E, l; y% E2 y0 K
颜色值可以用RGB值写,例如:) h3 l& ^7 T7 F Q3 B' u! N5 g- a4 v8 g
8 W) Q8 |3 W' _, L
/ G ]# Y' w$ k% S( n,也可以用十六进制写,就象上面例子
3 ]+ S! _; A% U: M0 _' ^- P' `+ Z2 Q- S, d! _* ^+ |3 |1 B9 t1 t7 U
. z: g3 d- F6 x! v( }/ t
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。8 J6 k! v. w- e2 u
. e) O) l, q9 `+ I* X3.定义字体( d4 h* r5 `$ t$ E
web标准推荐如下字体定义方法
, y' f0 @% Z9 g1 W- j
& _' s+ E" f# S7 abody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } : z1 H0 Y2 c$ J2 F2 t7 p$ z; ~( t d# |
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; " Y( ^% g; @4 j, E: s' e p1 A
Lucida Grande字体适合Mac OS X; / ?# [7 w# b; H& |8 u
Verdana字体适合所有的Windows系统;
5 S; d( R q' T* i' x$ gLucida适合UNIX用户
7 t) s( L5 l; t- C C"宋体"适合中文简体用户; / h% {0 p2 r; g9 w" [2 X
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;* y7 H3 v) I( U+ @9 ]( a; x) u+ Q
4 J# ~7 h) J- U4 N" z, {! R5 Z* ^
4.群选择器
7 [0 A5 I) T0 J, L. |1 P; W3 O% D; Z: E9 }# R( ]
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:4 M+ y9 \# J5 l) n
& C, z& l E& h. s2 D p, td, li { font-size : 12px ; }
2 {2 D$ S& F' o3 e: U! N就是给li下面的子元素strong定义一个斜体不加粗的样式
6 H; X0 t9 Z7 ] y. R/ H& n
0 A6 s4 T- b( L" \/ Y5 ]6 z$ A1 e6.id选择器
$ r( N8 ^% R. x, t& V2 {. L1 C3 E* }( v. y, M
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层0 f, T. W% M, P- |6 ~' r9 Y4 J5 q6 v+ T
$ D5 S! j0 R J% a8 g* `5 C* Q$ C9 e( ^# `1 u
然后在样式表里这样定义:. L: e |/ u4 F" F7 H
3 O$ s: W% M7 }0 U. a
2 ~$ G0 e# \2 f9 |7 d- D: l y
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} * L7 Q! j: C) i/ `6 u
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。6 \ U" R& o X' J7 b) z1 \+ Z: \# i
0 a, _0 T% }, W1 C2 W5 Y1 Vid选择器也同样支持派生,例如:/ k2 A! J5 i; I3 ^
#menubar p { text-align : right; margin-top : 10px; }
. ]5 X% d! N5 ?) O, d/ F# U5 I. G这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
) \5 P5 n, p% ~5 }( X9 A4 m+ t+ h' `# U" B: ^" M* n; n
6.类别选择器9 c8 [4 h2 u2 ^% S, p# F
" B3 I7 B6 F5 L& A9 E$ F g( X
在CSS里用一个点开头表示类别选择器定义,例如:
" ?+ N/ ^0 a8 h) {.14px {color : #f60 ;font-size:14px ;}
. R! S# o/ r& @* x
# q- J+ W( X v2 ^0 ~$ B8 V7 ]( _在页面中,用class="类别名"的方法调用:2 E, a# X. z! H& X
<span class="14px">14px大小的字体</span> / r, L; ]9 K/ I8 J
+ w F- k- H) ^% l. C0 M$ e这个方法比较简单灵活,可以随时根据页面需要新建和删除。
& z2 G, `( Q H5 b; x m) V
R: O+ A) \2 i) N' n E( H5 Z% ~0 }7.定义链接的样式8 n* Q+ P. ] {% Q
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:- I$ F# o, @8 [% [3 p
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}0 D! y {5 `7 ~
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
% `* l) d& i, e) W& r u% t5 ya:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}1 \* ^4 Q! Z% a" o) I5 z! J0 l
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 j3 ~3 V& k1 u' e4 ~8 ^8 ~( S" U/ r7 T" N
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|