|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。2 J. v( Y5 a# h$ T: O
$ u. r* v. L. a+ O- |% b6 {) \
1.基本语法规范% l% v5 }' d% e' e' l9 [
分析一个典型CSS的语句:, Q0 d1 x7 {2 O/ D" D7 `
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} + Z. a/ x9 ^( D: Q( m- D$ X
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 4 G/ M. @: s; v$ ^
样式声明写在一对大括号"{}"中; , G1 x7 l) r. d% G
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
, t0 h; {4 |9 G"#FF0000"和"#FFFFFF"是属性的值(value)。
/ k) U. {1 I: H' d: Y5 Y1 G( [0 r( P
2.颜色值
6 G* m: u3 W5 j6 u' R2 G- n
6 j2 I* J7 O: o1 A颜色值可以用RGB值写,例如:
6 W3 F3 J7 x8 B, n& [/ s9 U: i- g$ M e- T, H* N1 ]8 G# C
8 k: x7 Y' x& U2 p% K, z3 c- Z2 f,也可以用十六进制写,就象上面例子6 T8 v$ \- t6 \) A3 I
9 Z' {/ n2 F7 M! D' m; ^7 N- J' I5 Q* m, U9 [
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。2 c. S; [, }$ i) y, T
5 F* V- F! o. w8 m3 b
3.定义字体
0 P! O* C; M! p5 _6 nweb标准推荐如下字体定义方法
; y2 o8 J1 k9 ]3 B7 {, K, V; F x$ n$ B. V8 i: W7 J' c4 \
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
+ r c9 x' d0 ~/ X字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
* x" @: o. z k8 NLucida Grande字体适合Mac OS X;
7 ?8 y$ C2 \* w: {/ ~2 T& }Verdana字体适合所有的Windows系统; 7 H- q# V- h# H
Lucida适合UNIX用户
@9 r6 W- G2 l5 @& E r3 E5 m4 E"宋体"适合中文简体用户;
" w& j' \$ }: M1 G+ b) k如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;0 A7 l" \4 {% V& k* b
8 U% S; k2 D5 g3 V# v
4.群选择器
5 d# w' y) e/ n1 t0 c; @3 v6 o4 U! ~' {/ A
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:. O! [' r8 c' [, d: r( N% y
( Q& _6 D5 B1 I) D$ [/ Q: y p, td, li { font-size : 12px ; }
& h) e3 Z1 m$ F% \5 p4 I i就是给li下面的子元素strong定义一个斜体不加粗的样式. h" g& F& x a
8 z# Y$ L( q3 y" h( U1 f2 f
6.id选择器
`6 c! |9 u( q# w3 V4 C7 e5 A, G
2 j1 l2 y2 w( r% \- T7 ]; U. G& N用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层! P6 }2 f6 A6 O, ~5 W
: F4 \, o4 A7 |
2 ]+ c; D' p7 A* A; j) F
然后在样式表里这样定义:! Y8 V# Q* U& `: m# P1 |2 ]/ K
+ H; Y% X1 n* `" F4 z* S0 G% o9 {( w8 |) e
( _3 P3 E8 K y7 U#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ) A0 Q: n- c( r: G0 A
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# X. Y1 I( T4 G/ k# Y5 s
. E+ ^4 N' S& {id选择器也同样支持派生,例如:2 [3 m$ G4 U3 ?0 f+ P) e2 C- R
#menubar p { text-align : right; margin-top : 10px; } 1 N- W" @: `4 |3 A6 O
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
( w7 t# C% | l k) B# R. K
$ B# e% @; {0 i" g, i# T6.类别选择器. M/ e9 z! S% M& S e) ?* W4 r
: A* M6 L) O, ?8 a' T在CSS里用一个点开头表示类别选择器定义,例如:
2 d4 M3 n. v8 M8 H# t.14px {color : #f60 ;font-size:14px ;}
% u2 L5 J# m0 D5 t4 ^( d$ b
1 A# }; [+ X7 ^4 }* m2 Z9 g在页面中,用class="类别名"的方法调用:* H: P1 B) {5 u1 s1 R
<span class="14px">14px大小的字体</span>
4 z$ N. i: k1 C' }
' f1 m4 K+ C+ a这个方法比较简单灵活,可以随时根据页面需要新建和删除。) D0 b8 g% y8 Z. A7 R5 M. W3 M& ]
1 X8 w0 v0 [3 K4 m$ x e0 F0 T6 c* D7.定义链接的样式
; P n2 h# d, aCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:5 o6 n$ U; }8 a+ |
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}( l6 R( n8 A. l* C+ W
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}! T( H3 A- G( O* ^$ V
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ U8 I( P _0 R0 ]a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ; o: w- P4 V2 w: a8 i% X0 Z
5 n$ B2 ~7 w- @: b$ @以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|