|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
7 ?) L& G0 x: t) p: z# J; @ M/ p! F
0 N1 | e* u9 U$ `6 o& v6 Y1.基本语法规范
) d+ R! n6 c" w2 x$ q' \3 V分析一个典型CSS的语句:9 C4 Y. q; D0 D* ]
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
, V' l# O* _6 b- C7 H9 _6 r其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ' P" D! I% @- R% {% m8 X
样式声明写在一对大括号"{}"中;
2 b" r0 }/ n$ n* \2 {+ M$ tCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 z8 _9 R* a4 S. S0 t. \( _7 Z
"#FF0000"和"#FFFFFF"是属性的值(value)。+ ~# B1 P: z" |9 c! i# u# p3 s
% m6 l0 `9 A. f6 U* D0 p
2.颜色值( I) \9 Q3 _) T: g3 t2 f+ L+ x
9 C# F: [" Z' {颜色值可以用RGB值写,例如:+ S- ~# | m$ _2 b8 v. Z5 u% U
! ]& k) C5 e; P2 J2 F
6 r6 J* h. Y$ s$ m, s, g
,也可以用十六进制写,就象上面例子# C |$ p4 g: n+ ^: R) o
+ l1 g. c) U3 f. u$ ?7 t
: B- e( s4 i. s2 d+ M+ Z如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。5 k) H: D M2 v& _' o7 W) O
" U8 X0 E. y5 l- P9 G2 M* J
3.定义字体% |! U2 h5 [1 K5 M; d; c
web标准推荐如下字体定义方法0 m$ K- x( K0 ~
" S/ i h+ h) v. |# k3 H, ?4 d; O0 \
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 0 b- Y2 N! f6 G/ T# t0 v
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; * e/ p1 w7 p. |% V3 K8 [' N
Lucida Grande字体适合Mac OS X;
/ E s* Q, g! D1 t+ @8 E+ jVerdana字体适合所有的Windows系统;
7 h, B/ @0 Y0 O0 o# T2 U, `9 P" MLucida适合UNIX用户
- a: ?$ S2 N* o# w0 \5 c"宋体"适合中文简体用户;
9 d' Z, g' U3 D3 @9 Q如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
( W- k, ?. W3 Z0 [ |! t" O9 G" Z. t
3 |2 l( H e$ T7 P4.群选择器
: N! |% O- H' }- h$ L6 \/ m, M6 A+ f& X
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:6 O: c: t1 E) B0 E
- W! q" v& U/ I2 ?$ T! }! F
p, td, li { font-size : 12px ; } 3 o) L/ n! ~0 f( ?% N e$ Y V
就是给li下面的子元素strong定义一个斜体不加粗的样式
- q% z1 d6 k6 ]5 J2 q' R( h
+ B$ ?0 A; `3 B' p; ~# q" i6.id选择器 y9 O2 U* {# V& q- Q
9 q# E6 d; \' m/ ~: p
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) t& w9 T. g: z4 X4 i. }' U' \4 }: A4 l" B9 x3 p* P
/ _; B R+ T( y2 |" C8 X
然后在样式表里这样定义:2 Q6 k3 @# v0 l
: Q" y4 P1 O2 v/ F
! H7 T# d8 r; `" Q) |4 Y) ^* I- Y#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 h l' ~# s7 ^9 l0 p5 Z其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' ~# K# I# J. O8 A' D
9 [ O: H. j& P: e# y- cid选择器也同样支持派生,例如:1 b* }% a2 O: q) j1 E1 Y9 o
#menubar p { text-align : right; margin-top : 10px; } * E; j$ c3 U: k8 [' K) w
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。6 N5 F# }& a4 E# z6 a# Q5 g2 K
3 D5 _& k! v( T2 S
6.类别选择器
& Y+ n7 m, F; p2 U/ s" d: y" U' R% E% E+ [; l0 Z
在CSS里用一个点开头表示类别选择器定义,例如:
% A8 b% H: s6 J+ N.14px {color : #f60 ;font-size:14px ;} 4 ~# z. z) U+ C+ l: I; F9 G
3 J. Y7 J( V& q2 k! F( q. P7 O
在页面中,用class="类别名"的方法调用:
; @& ]$ h2 Z1 {8 z5 K y<span class="14px">14px大小的字体</span> $ G. F: l7 x. _* O2 J/ n2 ^! R
: p, Y# I* t4 z2 x2 v
这个方法比较简单灵活,可以随时根据页面需要新建和删除。# D8 T6 y# W- q% T
0 V* P# F5 y: E A7.定义链接的样式
6 W. U. {4 K. E, yCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
5 e2 T. J( ` d, L- ma:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
0 G0 C9 m9 a% {$ I- Oa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 j4 i" F% Z; ~" x
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}9 O5 z( n+ F9 @2 D/ D- B- Q
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 9 e, u m$ L) Z6 R& ^
1 Y0 p) R* i) W) {+ U9 l" }! A) _
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|