|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1 n6 e1 G1 _3 }
6 v/ z/ f5 J" T' `1 t1.基本语法规范
1 |5 I% t/ @+ q# r: T分析一个典型CSS的语句:9 B [2 F" k% b6 a
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' L" V4 d+ C+ i0 w7 |0 R其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
9 D, {9 N% B" F+ [- Q* d样式声明写在一对大括号"{}"中;
- F0 X6 W0 d: r$ z+ Q* m; j1 S! DCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
' U& I& [. r, z; s. R"#FF0000"和"#FFFFFF"是属性的值(value)。! a# ^6 ~3 w, M0 j, F V# X
o0 U. V9 h2 t/ b6 i, w2.颜色值$ C- f( t# _% }: \$ B0 J- h, H
7 m+ F7 H/ p# M$ F
颜色值可以用RGB值写,例如:, `' @( t1 b1 ~2 F2 h$ Q
9 x: M% C2 [. {( p' R i: K
& Q( B3 y* U# h W9 [0 Z: W,也可以用十六进制写,就象上面例子
- i4 I3 A3 G4 O1 H, w3 V% R* t/ [4 Y( {$ W& z
# e0 b$ N* v2 R5 ^3 C. d* r
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
8 j/ \ t1 k" A v1 N. l2 E2 }' l# y$ \! `, i C* t
3.定义字体9 b7 V d& [" o* W' m- ^: G: S9 a
web标准推荐如下字体定义方法 C: ?1 ?+ @$ T9 W: M3 o- y8 g
+ ]: L- e. T7 x! k
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 8 T' r4 }6 h( h6 i
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
6 v- M- R4 i, I8 C4 O& C& B/ ]0 lLucida Grande字体适合Mac OS X;
4 ~2 N' b& a" d- K6 tVerdana字体适合所有的Windows系统;
3 ^& D* N5 \' h$ g6 ^Lucida适合UNIX用户
% ^( V# D9 ]- t0 s& d& [/ k"宋体"适合中文简体用户;
2 `1 Q7 P) f3 Q; \- ~# o. k' X如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
; d. |! T6 m. X" Z& d8 _4 b- E6 X F0 x! C
4.群选择器4 m x/ i) I& c. |( O6 A
0 O" f! M$ F# E6 n. A1 p' K当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:. |3 ^" ]4 k E( k3 e, ?
# h! i) X# T$ u9 j
p, td, li { font-size : 12px ; } & Z% Z% {4 l& a# e8 c. d; ^# z
就是给li下面的子元素strong定义一个斜体不加粗的样式 x1 l. ^4 s% k
1 V3 K' T9 S, z5 l6 T
6.id选择器
3 ]8 [) X8 j6 C& b! o Q/ \3 E& m: o* {+ \/ @
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
]" v; }3 F$ ]. j; }: U5 C, e( Q
4 D+ ]! P5 c- V# j. E* D! }/ {. _8 F8 a+ {6 `, V4 {$ Y
然后在样式表里这样定义:
: T0 a( |2 F. G4 r4 B. R9 e
- V" Q% }2 [+ ]9 D* a3 I; @& m/ _8 C
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! d x9 T' S/ | d其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. r" D4 P m, |* K, ~6 j5 X
' d0 {$ Z0 E5 n' _8 [5 Hid选择器也同样支持派生,例如:# q/ @" r, d9 ?# m
#menubar p { text-align : right; margin-top : 10px; } ) L( B4 h% }3 |- m3 Q F
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
; L' t5 K4 @9 u2 q0 |* d2 K
9 u3 N2 p6 B* [" g0 u& j' Q3 g6.类别选择器/ o1 D2 O5 C/ b) v
K& \5 j- R+ P) T% {2 V! C5 [( O
在CSS里用一个点开头表示类别选择器定义,例如:
/ @6 H' g; v: Y5 |2 R.14px {color : #f60 ;font-size:14px ;}
! r z: D& F' V0 ]$ H5 b" b$ c$ L* b
在页面中,用class="类别名"的方法调用:
- q: `2 o! ?+ e<span class="14px">14px大小的字体</span>
, P6 c6 L7 R, e3 k7 l; s E2 r* m
9 w9 O4 i$ G/ S& d8 L0 |, X这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: R' y; R0 ^8 V! U: L+ S% j5 T6 B
) d1 ?- j( T* h( M, b( f! \' ?7 ?2 `) O6 W7.定义链接的样式* |0 w8 X/ u% T% t$ [) e( u7 c
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:7 I! A5 t- {0 }0 ]7 R) [
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 C$ I/ f& }5 M
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 N9 s7 E" ]6 @3 C4 _
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 a* V0 U1 g& V1 G
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 c8 r4 U9 m+ t% G: N$ T& A
% q& [* r( w! k" g以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|