|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
8 \1 J; s2 |/ K, o" p
1 \" a) q1 E+ _# k+ I1.基本语法规范7 m: H' y1 u I. R- x
分析一个典型CSS的语句:& p" \' V3 k+ \6 m% Z) \4 b
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} % y" V& G; @& p! K) M0 x5 @
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
& l" G) l+ _' U" j. g1 e1 _* ?3 C样式声明写在一对大括号"{}"中;
; N3 G' S4 ]6 T0 zCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
7 z/ |+ S5 U4 d, c9 F0 ]"#FF0000"和"#FFFFFF"是属性的值(value)。2 z% x+ l) V* t' O
1 }" W Y8 _6 ~ o2 z7 z( a. L) b6 x* T
2.颜色值+ \' x: P: X' l7 G2 r
8 p1 O9 q. \) [3 p0 k1 G
颜色值可以用RGB值写,例如:# F- n4 I& x# E I- q5 V6 t
) d' r& T% r' n4 e1 G. @
6 l6 ]( G: C9 c Y: D& g6 e* e,也可以用十六进制写,就象上面例子
) q# u8 A$ ^4 e1 C4 X
) w! n q% I8 K
" @3 C3 ?/ y8 y# D. g如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。( C! N& H0 X% s( M; c
! w( ?4 J% w5 z, V: c w9 t9 \3.定义字体
% e; Y: d% l$ J0 X: \/ M) hweb标准推荐如下字体定义方法, z3 J1 g. l3 N5 L
7 M$ `+ O4 }3 ?3 `/ Q1 X: H6 lbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ( G) p: m8 t2 t ?6 m, i
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
7 W8 s! ?2 K) d) u D1 ULucida Grande字体适合Mac OS X;
( o$ q: m2 J5 K/ R+ L$ tVerdana字体适合所有的Windows系统; 5 G1 z' V* U) P$ }$ i
Lucida适合UNIX用户
4 Z- a+ Q" [# g"宋体"适合中文简体用户;
5 s+ u( r/ r, b _' _+ m如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;+ y8 F- l& M) X2 u
6 ?8 o2 C+ ^# @, g: a$ p4.群选择器
% D( z4 n/ n* d* @* C }0 M( G7 t9 e$ R' u" a: z" K7 ~
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
9 \# I: d5 z( |+ H$ A8 S1 o. c! I% v) @0 S7 Q w, M2 d8 Y0 T
p, td, li { font-size : 12px ; }
2 Y, B; X# c! A; X& k就是给li下面的子元素strong定义一个斜体不加粗的样式
2 `; C8 F% L6 [* s: I# Q" N9 i5 \7 k* ~! U+ y9 u
6.id选择器* O3 F/ H8 V/ E- d# r3 [+ x$ D- D
- g3 w7 `, Y9 S* F$ P! Z1 L1 G用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层7 t+ m1 \7 a5 `9 G% S
6 v/ [4 T! P* c& ~8 C4 h" ?
* {+ J9 t; a) H) \/ D7 _然后在样式表里这样定义:
8 n A; }) I! f9 {9 h# k
3 {) G4 \" s, z0 x; h+ |8 V- Y, {. X- O2 ?+ `
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
/ f) i. Y! K+ j" x5 X3 c其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
$ P: q1 v/ ~$ x2 T3 x _0 o
/ D1 e( i2 V! D; i$ did选择器也同样支持派生,例如:
( Y9 E% [# W* P#menubar p { text-align : right; margin-top : 10px; }
( W$ W- Z! D& J5 F8 r这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 X9 y; t, _! x
; A! m) |! ]" V5 Y8 \* n1 d6.类别选择器" Y3 R- C8 o0 {7 W7 h
- L# M9 m2 c1 \1 V在CSS里用一个点开头表示类别选择器定义,例如:8 e5 \' L' Y6 A7 |1 x- Q
.14px {color : #f60 ;font-size:14px ;} " O( O, `# y( I! {1 K, q. F
' @+ `+ @9 u' E" Z在页面中,用class="类别名"的方法调用:6 W9 h2 U- g5 i8 ^, E$ @8 I+ t
<span class="14px">14px大小的字体</span> $ ^# _' B+ b P$ h
* x- }+ ~# k( ~/ J2 ^
这个方法比较简单灵活,可以随时根据页面需要新建和删除。& |: A. P; X7 Z1 @8 l m
; f1 j$ z& N% v7.定义链接的样式% d- T+ Z0 S" Z5 `! `4 Y
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:1 u& f4 H# k7 B# l% Q* d1 ^
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
$ ^4 H1 T- T- Qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
; f- v/ L/ b3 _) W) H' [a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 g9 |/ h! D5 t& Da:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 M; |" [! r( M! o8 Y; l1 i
% |8 n* n8 G# b) {% \以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|