|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。0 @' K* F: W3 p$ a2 G0 R, q5 @
4 j& P! [9 C) b4 \/ T2 w
1.基本语法规范2 [# H N2 f7 A# J. z% q& Q
分析一个典型CSS的语句:+ K( |& `) P# K# J& S" {
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
( z! k) y3 `! I( i) L0 w# {其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! ]0 i: h& a& u* d# Q
样式声明写在一对大括号"{}"中; 6 L! \: n0 {. l; H+ v
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 0 d% w5 B% e7 i, {* D/ ?5 o; |
"#FF0000"和"#FFFFFF"是属性的值(value)。
* b- |& T/ ]2 j: g- M9 n& |
; c) G$ _5 C9 E# i$ C; j2 }3 P/ z2.颜色值
5 r; c. i$ d+ |0 e, p/ Z$ w! p
* t" }4 [/ ~9 s! ?' }颜色值可以用RGB值写,例如:8 P: b- g6 c' P8 K
) C( p! J; n; w! o/ |
6 {0 m7 D# W4 w O# \: }! U,也可以用十六进制写,就象上面例子
; x3 _! ~# T0 I' M' e2 [2 \+ m1 X: Q& e: ^3 a% b: T! h
# X$ M0 x6 Q3 D% v) T4 n
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。0 b. X) P2 f" ~9 F
, ^7 } M8 Y) E$ k" _5 @# X- E5 |; `3.定义字体
3 u0 h/ s, C% o: b3 `- iweb标准推荐如下字体定义方法5 W: g3 p0 d8 }
" i3 x% H) Z) Y, e
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
2 h& D! N8 {2 q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; + {0 G% g) P3 \) z4 N$ j0 p
Lucida Grande字体适合Mac OS X; ! h! {' w5 A, x8 j# \0 \
Verdana字体适合所有的Windows系统; ) I k2 `$ h* r/ z3 K
Lucida适合UNIX用户
: l% _7 o1 _( w# t"宋体"适合中文简体用户;
' t" b( \ P3 j& M X如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;) D# r3 i" i! [
7 B- |6 E4 ^* a/ e O1 g4.群选择器
) l7 k" l/ W2 g8 p! V; `' m: J0 [0 Q8 l$ H; w g
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
9 n" M- k0 x) y2 R: e* b: |, F% G
3 p- X; n- K& h& \& r p, td, li { font-size : 12px ; }
% I2 j1 F) w) b就是给li下面的子元素strong定义一个斜体不加粗的样式0 `' Z9 D" e9 G( D8 E6 Y
2 w# |. k/ G E( p6 `2 t! G% A( I
6.id选择器8 J1 c3 {9 d9 A; C, A
) W V# C& G; \. z用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层- f1 K' n: k8 u9 |; Q5 [, M
& I7 y7 q3 Q4 Y5 H" a G
9 o: Z8 G: T8 F, V* q: C& y) x, G然后在样式表里这样定义:
* G% K5 F2 ?- e. x9 `- s* @7 p) U6 s+ P3 v% F
# ^! O4 E) t" V8 ]#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
) V' s I4 F6 M' U, I" ~其中"menubar"是你自己定义的id名称。注意在前面加"#"号。- W! s/ V% s8 k' K
8 o* _7 [1 n% Z, r7 [4 nid选择器也同样支持派生,例如:( k* z5 F4 Q! T: |& s
#menubar p { text-align : right; margin-top : 10px; } * \: u9 i0 n: v, t( m
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。+ _" d, E- @4 t, Y/ U( n i
) O/ P* j N8 Q7 ~6 J% \5 G% W8 {6.类别选择器1 v& q, |6 K9 y6 T. h5 F/ d! @
0 A8 a! L. J' q2 O5 }在CSS里用一个点开头表示类别选择器定义,例如:4 [- V$ L5 F* ~; d ^
.14px {color : #f60 ;font-size:14px ;}
$ i8 s8 M# f7 W$ @0 `3 ]. T5 a+ |2 o
在页面中,用class="类别名"的方法调用:; G9 u& {3 E! ~; Q( s
<span class="14px">14px大小的字体</span>
5 A3 F# w6 i" m6 T$ ~% x% O, n E
5 ^ P/ p P, J4 p0 r这个方法比较简单灵活,可以随时根据页面需要新建和删除。
+ P3 |, U' l5 T% M( Z( [0 p& V. I/ _! W9 t. j
7.定义链接的样式# Q3 A, x5 K' s1 Z# s2 i
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:# J4 F/ L$ g. V. w/ }$ B) `
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
5 X2 n/ n7 L# w9 t5 u) Ta:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 {, b+ H! H- n5 Q; da:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
! P% G5 W6 P1 d1 l9 Ba:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ; C/ r; S4 k+ C' Y P, ?) ]
) w/ K9 }# k/ ? U5 p% u' g$ U& y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|