|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
, u# p* u; K0 O* H, u% U4 {9 q5 d5 U/ c+ ~/ \
1.基本语法规范1 C3 W2 Q) d3 Q6 }, Y0 h2 e& B% m
分析一个典型CSS的语句:3 [5 f0 t% F! o ~: v$ f
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} " k+ x7 O# P+ A; N
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; - Y4 a9 T" {9 \( e
样式声明写在一对大括号"{}"中; * R/ e; K+ T/ l; Q4 @
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; , d7 \. C* Z& B) @" Q6 p
"#FF0000"和"#FFFFFF"是属性的值(value)。. S. M. o$ r# ]3 k) c0 Y2 S
. z- q: E, g3 _; ?' o6 B
2.颜色值
/ n+ l. Z2 i) @( F4 @1 ]: e7 D; K$ }8 T- [' K# m0 C
颜色值可以用RGB值写,例如:
; A. b0 D% Q2 v( ~. i
! v8 H' h% l' o" e M6 s) x) o$ ~* S8 Z. {
,也可以用十六进制写,就象上面例子
; h( ]: |1 \ T [ G( l: L: N' M' b3 O% F; I, ~
W. b/ \' @5 a9 ~4 Q! c! f如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。, d. Q/ k& F: `1 O1 s! P9 r: d
8 E, T' y% |; G& L3.定义字体% \4 [6 O8 F% ^, p9 L$ b
web标准推荐如下字体定义方法
' f6 n) m ]% G8 Z* g* z m/ u$ ?) i/ g7 o
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } * g% i* L% P. v% K2 H5 P7 k3 f
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; / k8 E) e+ N! H- k
Lucida Grande字体适合Mac OS X; ! c) [& x: h. C% M& B+ l/ ?% M
Verdana字体适合所有的Windows系统;
* x, w: u8 v* [! s8 vLucida适合UNIX用户 : p% g6 r2 Q- M9 e1 i
"宋体"适合中文简体用户; 7 z: e8 ?3 I: W
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
- G) e& v- o" {" x( R0 O1 j, ]5 O
7 z0 w- d2 X* a$ h/ @4.群选择器, F) ?& u. |/ L; O* r: D
: D9 Q* M; m( p8 q3 D4 S' a
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
8 Q- G2 M9 N9 x! Z" Q& c- Y J) x' }# d; v9 ?
p, td, li { font-size : 12px ; }
4 z& Y* v9 Q1 L8 \9 @: f8 `( a; s# r就是给li下面的子元素strong定义一个斜体不加粗的样式2 K: N2 H t) Z' x$ X g
! m# ?4 }8 r( F3 G8 @ O/ J9 I6 t
6.id选择器" [$ F4 z9 b, H4 ?# V6 H. p/ Z
" ]8 C, @2 k5 d& C8 H) {" N0 S
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
8 N5 F- u' ~' U; l& u! K. F2 f* s q7 K! _# \# w ^
8 H2 [: _6 W8 e' N5 f3 p1 f5 z
然后在样式表里这样定义:
- w5 f) S1 U& h4 A: }6 V1 S- F* ^
: n6 ^+ q. _) M: L- p, K0 a0 e! p#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
0 V4 O% e* D: N4 T! g8 D# M% ?其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
5 Y$ T7 ]. |5 z, ?- o0 t3 F8 \# |3 ]
& J4 P% q, O2 k$ q$ O# J7 Eid选择器也同样支持派生,例如:. @/ V5 t: v8 ?1 Y* ~
#menubar p { text-align : right; margin-top : 10px; } 7 L" A! u* m' _
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
) @1 E7 W) O/ A5 i6 T% G: d( ?/ ?! d" f1 o
6.类别选择器
) `+ W; I8 Z9 T. h% u; W5 N3 @/ w& Z* ]$ A
在CSS里用一个点开头表示类别选择器定义,例如:3 E# Y2 U9 o; w; d
.14px {color : #f60 ;font-size:14px ;} 8 A! x4 n0 |" o) A. ^
8 W1 B0 c- K' ]; ^9 ~6 Z! c& s
在页面中,用class="类别名"的方法调用:! H2 S. G K/ M9 G% k/ U3 w# p# K
<span class="14px">14px大小的字体</span> 4 F W+ a7 D2 v5 c9 |& ]" i
$ o* n% K4 J' _4 r这个方法比较简单灵活,可以随时根据页面需要新建和删除。" g3 K( Z6 R& L! i5 _
2 D* l, w; J6 a3 u; W! s
7.定义链接的样式
* y3 n7 h/ i7 g2 C+ |/ Y0 MCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
% j6 {( x" X: K# i e W( T) Y" E( da:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
( ?# B3 o! B& I5 q6 Qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}% t& E k0 Q2 o# A
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# D) `2 u) g& T5 i8 u: F
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ! P# y3 i% i. x, I6 g% n2 t- U
7 E3 O. j. d) n7 k( Y2 f
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|