|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。: t, k8 Z+ l% V' K
5 B X4 G( v0 R6 { |3 {# N1.基本语法规范
5 |. X" w/ o" X r/ ?4 [5 T分析一个典型CSS的语句:
4 g: i: N( U0 R) }p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 2 U/ G/ W X& f' L- ? N. E
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
4 P9 [; J: h# z3 C2 W样式声明写在一对大括号"{}"中; 1 C) @$ A: O3 ^8 F" ?
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ( V! z H/ ?/ g9 Q3 A: O# `
"#FF0000"和"#FFFFFF"是属性的值(value)。3 S) r, v5 i. }
/ h( w# e- v7 O
2.颜色值2 y4 K2 x3 R' B8 N8 e' M f# D- o% E
& \% K+ R1 v) e, d/ E- h- I颜色值可以用RGB值写,例如:& H l# y9 c5 k* W% s: o2 c
3 N4 s* `! b8 A
7 Q# W5 x1 T7 K8 _& G,也可以用十六进制写,就象上面例子( I; h* L! ^5 l; [
0 \3 f3 y) S, K0 v
2 I! H, V6 S, X7 ?
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。: y* r5 C0 C4 m- H. H
& V( V4 A, `8 k+ l3 g3.定义字体
, d# |7 b5 T) p; A7 I3 iweb标准推荐如下字体定义方法
" p' G: q3 L0 w% ~4 F
; x3 f i W1 |# Qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ) l" _9 @+ k: n+ c! |1 C! N/ `3 \
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
4 t( ]6 ]% d# v; G) Y! `' BLucida Grande字体适合Mac OS X; + ?- l' c9 b' o) h/ G
Verdana字体适合所有的Windows系统;
5 S8 a! z. r# {" P8 x: \& F" OLucida适合UNIX用户
5 g4 ] K2 `! B"宋体"适合中文简体用户; ( C W% {$ e8 _$ M, Y+ L& s
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
s9 R9 P: E C+ ~! f' ^( X; u6 E& I) q
4.群选择器
9 j0 ~3 _# a6 Q
8 r0 L' f; a' T/ y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:1 m/ d8 E: [8 V
$ |$ Y2 P/ j1 W9 A( a. c [ p, td, li { font-size : 12px ; } / H! M& H4 W. Y$ a; L9 ^% m
就是给li下面的子元素strong定义一个斜体不加粗的样式9 p- T, z9 s4 s' b8 D3 `/ s9 N, F. I
; N4 O4 ~" ^7 }% @' h9 F6.id选择器
9 t+ f& O8 }4 V/ R
4 z) S9 [& X% J' |用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; [0 f% \# U* b3 s$ Z8 [1 {$ w0 _/ A5 M. S& o6 D# c
; L: y- W5 G8 l3 W9 f
然后在样式表里这样定义:
( a1 m8 ]4 h: a) R7 Q: x; u1 T2 g: e W
3 K4 I1 W0 x+ L6 R9 g8 r7 K$ R
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( K" y, ^& G9 t其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
* O$ } m& e& {' }5 F: _/ B3 {7 ]0 D& a. V2 L9 k# A; N
id选择器也同样支持派生,例如:
% {9 {' p' K6 |1 I& E: g; V#menubar p { text-align : right; margin-top : 10px; } 6 m. P% T4 P: d/ b* C
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。$ W! W$ o, o! g2 P
0 e% q/ a8 [: |9 P+ w2 B
6.类别选择器
, z# c0 G+ N" m3 r! K: t
8 D$ S0 w. i/ `在CSS里用一个点开头表示类别选择器定义,例如:
4 }: U& i2 D0 ]3 F5 ].14px {color : #f60 ;font-size:14px ;} 7 P# X7 f9 `! `8 x1 z' U
5 r- \7 w! Y; G$ \
在页面中,用class="类别名"的方法调用:
9 _1 Z3 k e! N& _+ C<span class="14px">14px大小的字体</span> * R( P9 @$ o- ?2 N# b
. s2 Z+ n( D( L4 ^, Z) }5 A
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
5 ]8 z% P. O4 I7 H/ G( h& F- \% s. b7 ~0 K2 z$ h0 R
7.定义链接的样式6 Z* e7 R; I' `; k9 n9 \
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 U! S8 j( ?/ y: r6 z( Sa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
7 f2 b2 H4 ]- P1 C. Ba:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
/ }: A* u b: [9 o |a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& e. z# }% f: D, ~% p; k4 t, [) ia:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 4 r3 E" H! P( a6 Q# V! O
5 c1 B U7 W$ X6 x( S& c/ D$ A以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|