|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
) X7 }5 m k4 M: R3 H
! f: r2 P1 N3 \5 U1.基本语法规范; {2 q8 @' a9 Q/ C0 g% @
分析一个典型CSS的语句:: c$ P2 \% k1 _0 V5 B: e
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} / R) ?% \" [' B) |9 H
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ( q. a) Q0 F( X3 s& Y, K
样式声明写在一对大括号"{}"中;
D: p3 [& B2 `; J, BCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 7 S, P% u3 l( b2 s
"#FF0000"和"#FFFFFF"是属性的值(value)。4 h+ M7 T; l; Z- ?5 M& f
5 r7 i/ T) ]' v. N" Y/ E
2.颜色值6 u* O: T4 c( S( i- Y& ]4 f4 J
' Z! r( C2 A# F; |9 X4 m; M
颜色值可以用RGB值写,例如:
. m* o% N( U2 {" m$ ?0 f1 M( K |2 _+ N" h- U8 v! n
/ N0 _& r% P9 c9 k+ a1 J2 Z' E3 p,也可以用十六进制写,就象上面例子
& X+ q/ t- Y% Q) o# t
# ?, E. ]3 ?$ W* p& u8 `7 h& E; T: ^( D- V x
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
. ]1 G( p/ U% S- o# X4 ^/ y0 C, S3 S' r( r
3.定义字体- X1 }- h" v+ n8 g9 q
web标准推荐如下字体定义方法; L( g1 l+ p) X" }; K9 q
5 {: { f* _3 p! g5 gbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ; a; H) ^) J5 v) `; m. Z. Y3 G
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ' t/ C. X0 @5 I" p
Lucida Grande字体适合Mac OS X; 9 Q& ^+ D# e3 v7 v
Verdana字体适合所有的Windows系统; ( a' b" h, n6 o% V0 E3 s
Lucida适合UNIX用户 : ]* l6 d4 I) x) J( y8 o5 L
"宋体"适合中文简体用户;
- C7 I/ ~/ M" l4 s+ y: s8 z" @. E如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
9 Q6 e1 @9 S m& { G+ }/ \' B
2 s `. H/ V) u8 b# J# p2 s& [1 u4.群选择器
8 G; b' K# R# q0 J+ m, {7 E2 g9 x& B* \8 h6 [2 U1 l4 O9 }
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:& w6 W5 Z2 v/ e& L5 P' u
8 ]# Z6 n7 j$ s7 P. E1 C$ Q8 O p, td, li { font-size : 12px ; }
/ P4 D! ~3 S1 z- h就是给li下面的子元素strong定义一个斜体不加粗的样式- a: q6 K& E( m% n& s
% r7 u- M1 T$ P1 y6.id选择器6 ^: c; y; q# I) f- k$ {
. m# C a8 c' Z, y用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
# B& P6 \# X9 F* U# D! {8 O( M6 [, G1 R. T: x2 K c
& Z! c$ G1 Q7 V- d2 P" G
然后在样式表里这样定义:9 _. J6 l8 E( G1 ~! |2 i9 M/ O4 z
% T+ C7 C1 P8 A- @0 h8 S" E6 g
( V9 ?* k% \5 }, g1 k#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : L' y2 V: J! Z8 S% W* [
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
% A! N3 Z O1 g( ?: h9 Q& }# i; X! n' i3 Z
id选择器也同样支持派生,例如:% B8 u3 l# Z0 ^
#menubar p { text-align : right; margin-top : 10px; }
( z7 l0 V7 W/ n$ p, F+ U这个方法主要用来定义层和那些比较复杂,有多个派生的元素。4 o( u9 j5 Q5 s
) v- j4 i( k- Y) U5 T
6.类别选择器
& Z/ a3 Y( C3 u4 v4 m* Q' e' h% k; |; M. L+ A
在CSS里用一个点开头表示类别选择器定义,例如:8 \# ?: R- |6 d1 [# h" M
.14px {color : #f60 ;font-size:14px ;} 3 k- Z. k/ s8 Y0 y
7 }) e1 X; N0 [0 ~7 D在页面中,用class="类别名"的方法调用:
) f+ d8 F) E- \# K% W! Z) d<span class="14px">14px大小的字体</span>
3 V4 O7 {" a: y. U V( T3 G( Z# g$ r: k& z+ o
这个方法比较简单灵活,可以随时根据页面需要新建和删除。$ X8 T" j4 Q! ~5 U
' ]4 L. m0 e" S r' {3 m7 P
7.定义链接的样式( r( s# w& R% @; r k
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
. j( K& j3 d! @$ P0 E% E: x) k/ qa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}) J9 J+ Y+ j/ r1 R# N/ @' ?. x- t3 O3 N
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 D6 W, G2 L! d0 I3 }7 n% y3 Wa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 ?+ a' T; v6 G
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% r, H5 m- q7 g f( n
; P/ F3 e6 r B以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|