|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
2 a# \* A9 E+ K( c0 `# t2 ~( U- X; K! F& S+ ~- C2 T& w5 P
1.基本语法规范6 l& s' r# Q. Y: T# `) a' |; P: G
分析一个典型CSS的语句:
8 k% P r# e2 l9 v' v3 t/ z: dp {COLOR:#FF0000;BACKGROUND:#FFFFFF} / `; Z7 k' V( U; U" \2 q0 m1 t4 _2 O
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; - |8 A H2 u. l, X: j
样式声明写在一对大括号"{}"中;
9 e9 o( J: M* D' R( g/ \ u( WCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; # [4 o& y x" B4 T/ i- N# k
"#FF0000"和"#FFFFFF"是属性的值(value)。
( W9 |; t. K4 t% Q; V) E2 N9 J7 d9 a: f% x7 y0 r! Q. c
2.颜色值6 c) p$ Z& ?) K
0 b2 ~. b- p6 P7 H9 g' a
颜色值可以用RGB值写,例如:0 r2 A" r* C- T8 i( t
4 o5 p) F, u/ T2 o! H; V: K! ?" Y2 U T: E: P! u
,也可以用十六进制写,就象上面例子
7 k$ |0 V& b4 i% l
% w" ]' m% L2 e" A; Q7 {
5 }8 f. n) W4 I/ I* a5 {: w如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。; L! r& i8 u8 e# S, @% ?, f E( L
% l5 }4 V/ Z$ v* i0 y# w
3.定义字体
. d; F r! B/ Sweb标准推荐如下字体定义方法
2 {9 ^9 y6 U9 d( z4 _
- P6 k7 q0 O6 {) i' ?4 Dbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } . n5 c: L1 ]4 n# s3 Z1 ?8 \1 R* \
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - h) {' [4 g/ K6 f
Lucida Grande字体适合Mac OS X; 7 W/ [; u) C; e
Verdana字体适合所有的Windows系统;
0 ?# b# r' J4 g$ ?1 jLucida适合UNIX用户
; \) p; i3 _5 a0 Y, y& b"宋体"适合中文简体用户; 6 E, t1 C6 r% D; [
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;) o; ?+ Y9 z1 C
) K7 u( x6 q) l. B
4.群选择器+ T9 ^4 I6 c% `
E5 n+ ?* m+ L% H. l5 h
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:1 N0 l3 T& }7 d, _0 N9 t; x' \# ]6 k7 ^
& q1 A, m' j' G) F7 _, F p, td, li { font-size : 12px ; }
) c7 _4 l$ q7 T* o就是给li下面的子元素strong定义一个斜体不加粗的样式
, Y n' o0 s3 W4 R/ H
7 c3 h2 ~. m: n6.id选择器
) l7 R7 H) M) p5 V, w$ N& K2 P* q" D+ n# f
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 ]) @- m% |+ R# e
$ h" o6 g8 D5 j) j" r0 p: e2 g$ S
. ^0 F) m: p+ e& c* q5 {8 d) O; _) n然后在样式表里这样定义:
/ I+ b8 A7 T9 B$ _5 H0 c; A/ z7 }
* u) |! C7 c. U, _* |' H r, C# Z; P( y: Q+ M8 f
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 6 I. I2 J4 X6 z( k9 z
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
1 P& }. Q. [9 B3 q. ^' T5 S0 p0 L
- @3 ?% E" ?2 C% n+ hid选择器也同样支持派生,例如:
5 v% V4 K* X' e- Z2 g E u#menubar p { text-align : right; margin-top : 10px; } 6 S3 X" z& Y- T8 B. M7 W0 H
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。6 r6 {, V, l' x
6 P* K6 j1 l6 q( X+ ~- l
6.类别选择器2 M/ G \9 n7 a; ]( Z: f
. A& H$ @9 S! p; `
在CSS里用一个点开头表示类别选择器定义,例如:7 L" g! O7 D; C: Q! ]
.14px {color : #f60 ;font-size:14px ;}
' y; n$ h& ^3 a+ b% E0 e( t' @% y) f# k, u. S& U. {2 G1 f
在页面中,用class="类别名"的方法调用:
9 W, c4 F. ?2 K3 s0 L$ P7 X- ?6 e<span class="14px">14px大小的字体</span> 6 [$ A( ^; T u3 v% W& h
& ]5 t1 h7 z. S这个方法比较简单灵活,可以随时根据页面需要新建和删除。
, E: z: [+ |+ @4 x( `7 @ H# K' r9 X# E% D0 K. u
7.定义链接的样式
$ z2 [' `" U6 |$ [/ G/ [9 ~CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:" u& |/ P# n$ [: V3 J. t. p% o; G2 o
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
, A. i$ \ y+ q# E; ?& l! D7 Ca:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
+ V0 q' J$ e2 _; Z1 Ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}% {9 I2 _: _6 w$ V
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
$ E' H4 c- t9 v4 l: A* M0 z9 ?
% x1 r5 Q; t9 k4 b! X! [以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|