|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。4 O$ K( M0 ^3 ]+ D& ?* k
3 X$ b( g+ N8 w/ H3 V1.基本语法规范
- k( V6 A+ X% V6 r分析一个典型CSS的语句:
# O" N# {2 K8 p* _p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' R/ ~- h0 R5 h( y( V其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! V" l1 b8 U- H: Y: P( A6 Z
样式声明写在一对大括号"{}"中;
4 K- X2 t8 Z8 n$ X) SCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 \1 m# ^0 z7 T
"#FF0000"和"#FFFFFF"是属性的值(value)。
" V' W) t' w% d' S& T& \4 S8 o$ } g' d# o \$ p/ o
2.颜色值( M! d1 G" j$ w. w$ u1 K5 P
$ k3 Y M5 S5 v( q+ }7 q5 K/ a! s颜色值可以用RGB值写,例如:7 h D e9 z' L0 g7 O1 {- Y
7 s, ^# Y I% o
9 ]3 q$ C6 H+ C,也可以用十六进制写,就象上面例子9 I4 \$ `( F8 g/ ~% c
% l8 F. [1 D9 s- I% \$ K F* n4 b$ d
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
# R7 a0 E7 Y2 A. P$ ^% [* k* c5 ]& C4 f5 \- b# j c
3.定义字体7 _& ~# f! p& D2 X- \* H
web标准推荐如下字体定义方法
5 T$ [) l( y H, ]
# c4 \- @: ~4 I a9 V8 i* Obody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 2 Q2 ?5 k6 j$ {3 P5 w( L
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
$ U( K0 r% v# b8 j. N( v/ y& E$ zLucida Grande字体适合Mac OS X; : C3 N3 J0 p9 p, e5 z6 w
Verdana字体适合所有的Windows系统;
$ C' G4 v# o; {( R BLucida适合UNIX用户
: e. b& x1 c/ A& n"宋体"适合中文简体用户;
3 F. U& V( b2 z" ?" P9 ?如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;* q* a7 E% u/ ~7 W& R
& _9 n4 z" M0 y7 M/ D8 l4.群选择器1 k: p" D" m2 i0 o
/ V! i C- A8 T2 ~; `' G! v当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ ^+ q" `- z2 V' m8 y* `
* |' B3 o7 V: V, L. m! ~3 ] p, td, li { font-size : 12px ; }
3 S2 X( _" t \- r就是给li下面的子元素strong定义一个斜体不加粗的样式) m0 S% i6 k6 F
; d `, w3 f, U3 q
6.id选择器" Q( Q0 A3 ~* _6 ^7 ?, e$ t
* R- g- X- O [: X D: O S& U6 |
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
, r W) o B' |7 S0 j* P% Q7 Z9 {/ Q! q' V
- { n0 @) z+ x. X5 B然后在样式表里这样定义:
) c, _2 d5 ]2 D6 W, S" @! l u; \3 a
" G. E2 f! E* Z+ @5 c* L: L' D#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
. ]* a% ^# Z/ I1 w其中"menubar"是你自己定义的id名称。注意在前面加"#"号。9 w6 l) Y5 G$ L4 v. L5 F& D) {
" F; V7 ~8 ^# w- @3 c* O
id选择器也同样支持派生,例如:% G0 W% ]$ U1 a$ F
#menubar p { text-align : right; margin-top : 10px; } ' B0 x# ^$ f. u, P Z
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
. M) E$ S8 N/ p- s- F2 r3 z6 q& w: z# {9 a/ B! r
6.类别选择器) N) ]6 {+ A) s3 J. q: T
/ B0 D! a% e/ S+ X; x在CSS里用一个点开头表示类别选择器定义,例如:9 w9 P d' r5 k; c* h( c+ _
.14px {color : #f60 ;font-size:14px ;} ! Q$ l" d. d3 r" |0 O2 w( r
$ c5 f+ ?/ k/ h' K4 P0 Q在页面中,用class="类别名"的方法调用:
" @/ T# }9 l2 p+ A3 Q3 U3 _; K<span class="14px">14px大小的字体</span> ; |0 z: k8 k: D2 o( U
3 L/ v2 w% l' \
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
# u" Q* s& Z) n- O6 \6 I$ t% s* [5 R- j
7.定义链接的样式
4 a2 Q$ }( ~, R) q- a' ?8 H4 ICSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
2 R, c9 g: o# s: C F0 [a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
+ g( _: t) e" P; xa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}# H1 k7 x. d; h! T8 h
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
: a* Q" I) E5 V) P7 U* y5 Na:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
I4 C: G" [( y g1 g
# j+ X' g+ E& L! [% _# P) }3 ]以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|