|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
4 J: n6 K1 S8 y
; z1 }- \: B9 z5 M: z2 {& j; R1.基本语法规范
3 N/ E: `3 ?: z3 f/ P分析一个典型CSS的语句:
4 G+ f S( i2 z* H& \8 Np {COLOR:#FF0000;BACKGROUND:#FFFFFF} ' M- Q9 t+ z# X2 N0 ]3 @" f
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
- Y' m3 r7 a5 R# j- `样式声明写在一对大括号"{}"中;
/ j) z( @: A7 s% a: _COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ! H8 H3 v# q" i7 D# D3 F. S3 N2 k
"#FF0000"和"#FFFFFF"是属性的值(value)。8 y+ t$ Z3 r. z
6 S; V3 m0 C7 w9 X+ y' G8 T2.颜色值
* y }" T; T9 o# T7 X- d( w6 \* H, c7 [7 z5 s4 |1 L+ e+ q
颜色值可以用RGB值写,例如:2 v6 D" f8 x* ~4 ?. T+ l8 I
% t, w; ]" _& `' c/ P8 D8 A4 Q+ D2 g0 P. r* U
,也可以用十六进制写,就象上面例子
& H* ~' K5 C* E1 z2 F! i6 K$ f ~- _) O2 @6 M5 P! k9 W# ?
8 i/ E+ Y0 A+ T- X如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
- F8 `8 q; q0 M Z" W O& N% C$ j) ]4 u' L" j) M- Q# J( j+ v
3.定义字体
/ d: o* {* q8 ]6 a" Sweb标准推荐如下字体定义方法* y {4 L9 t# x: A, K
% n/ g, W7 A0 l
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
7 a; Z2 F& D l0 q z% d, G0 I3 w字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; L. |7 a6 K9 Y- s$ n6 K. X9 p9 B
Lucida Grande字体适合Mac OS X;
x& y$ x* D1 L" Q6 y( i/ Q" rVerdana字体适合所有的Windows系统;
% _8 g# d8 o; @; g1 Q2 m2 S- N ALucida适合UNIX用户
: x7 x4 x$ N6 }3 W8 K9 g1 o* M9 O( U/ w"宋体"适合中文简体用户;
9 M, V+ `+ h8 w% o8 c7 s. m如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;2 ?& u: H* A9 z# F, O, s ]8 J
; ^+ y6 F. a% h# ]9 m/ g m4.群选择器/ o4 n) u! U3 l% n8 H
. H) P+ N5 |' I# q, B% q! I4 Y! U
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
" P+ E9 K/ f. S& l' q( M$ a1 Z9 O* i' _+ Y, y$ [5 W6 V* \1 p( O$ ^
p, td, li { font-size : 12px ; }
0 |3 ~) a! L( x$ D& H就是给li下面的子元素strong定义一个斜体不加粗的样式
1 _/ i) J1 C9 I. E# c h- \+ F# M5 Q: q& _& a# f
6.id选择器0 ?2 C* j6 @& O
7 w. Z0 n% U4 O1 {* l/ l
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层% U4 B+ S- I$ Q/ K) J: J4 G
7 {) v8 f, ]7 C+ }8 D" Q: O) z6 p r9 o/ w
然后在样式表里这样定义:# u# x q, n" i2 \ N! _$ ~
' d# Z% Y: y5 s( z6 @6 I
8 c. x: \, Z( m#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
, D# [* x2 Y9 T5 y& d& B其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, r, S5 t6 x- Q- c% y# l
8 _( y% F. }: _id选择器也同样支持派生,例如:' f2 C, V$ d$ \
#menubar p { text-align : right; margin-top : 10px; }
: X. E! v7 ?: }/ b& z/ [这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
8 V5 e" i5 a- v$ K! N5 C% G3 O5 g% z$ M
- y0 i9 g8 C; x, i* F$ d- F! Y6.类别选择器
9 `) d& Y! ]. }. M2 u* _$ C4 I/ a7 j1 r5 Z& J) h( m. {1 [) {
在CSS里用一个点开头表示类别选择器定义,例如:1 c# Z5 l4 j8 y% c% X# h3 }( w
.14px {color : #f60 ;font-size:14px ;}
' x. y# l2 t' g, @; [1 T t/ ~; N v* Q' Y+ q- b: o
在页面中,用class="类别名"的方法调用:1 u8 @% T; O1 W# x' p0 Z' v
<span class="14px">14px大小的字体</span> . w, ^+ z6 G5 U8 ^- A0 |$ h
% e5 F$ y& `! G
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
* C' r" _% Q; c/ S. A
, p; d/ X2 J" I. v/ N1 i7.定义链接的样式
$ N+ z3 F0 s* m; v& i0 kCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
7 r0 Q8 O# p" z( x8 {' A( Ka:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
5 H/ K0 [; D$ w2 t, V9 Q( Ca:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 V7 R. Q+ U7 Y& m1 ?a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
- i7 y/ Z# c# `; F$ L+ fa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
" L! }, S" W4 \2 Q$ m) o
; O. h0 k1 g! P以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|