|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。( {2 _, ]7 W. U
5 D1 ] e% D3 T2 E7 z) Z% s1.基本语法规范4 O; h8 D0 C; h; C5 R
分析一个典型CSS的语句:# T5 [! E# }% m r( o+ [
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* C( r* W* C: e3 W& ]/ K- F6 }% G2 `其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
) ]- e3 Z- c1 _5 O8 M; e样式声明写在一对大括号"{}"中;
: T0 r) u$ |) _% a2 p$ Z- R4 A' g+ KCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
( A" U E% r! \) j9 _"#FF0000"和"#FFFFFF"是属性的值(value)。
" w$ e4 t% P( j: c& z5 [
- Q( _; d: y5 [$ ?3 |5 c2.颜色值1 ~2 T& M' c% j( d8 P9 n# I% y
. q" v* n2 r e2 N, J8 T {
颜色值可以用RGB值写,例如:' O* S7 _! C; [- n. {
! u2 h9 V: o7 e& |
1 M9 l" y; a2 M,也可以用十六进制写,就象上面例子- C2 ?* v4 P6 n! D P2 S
. V6 M: o* m) S4 g, g/ t3 t* g" B
) g+ E$ h% _/ p如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。9 S, u. \4 X# y! A* A. T/ m
! g7 H# o( a8 o/ \
3.定义字体
) H d- R: v- @8 I3 Z2 S& \8 pweb标准推荐如下字体定义方法$ m8 i: I* r7 c
1 \' I* `8 ?! I% v# r
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
% T Q- v+ G( ?字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - Q d% g5 q# ^1 K( r5 s4 Q
Lucida Grande字体适合Mac OS X; ) ^( V! L/ T2 {) Q8 d
Verdana字体适合所有的Windows系统; , J$ F$ v& |- @4 }7 ^; K
Lucida适合UNIX用户 5 E- k) v& }( j! [) a: G
"宋体"适合中文简体用户; 8 p3 G, W/ _% X8 n% y
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
0 V ]9 _" }* p6 c
0 a4 q" a% r5 F; ~4.群选择器
4 e9 Y- g# a! S, Y3 n7 l
% @# N0 P8 d0 y- @$ @0 G4 e* I5 }当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:9 D9 e. B, y2 _6 P
/ S! u/ J: v6 v
p, td, li { font-size : 12px ; } # C8 s; |/ o: }: ?+ L2 C
就是给li下面的子元素strong定义一个斜体不加粗的样式
# ^+ e% v( h4 z& _( R$ V/ d
4 G, l' y- \. B5 \! e2 b6.id选择器
- l( E5 \/ I' I1 w, U2 j6 d# R# \
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. o" Y0 C7 R% h8 G4 {; `1 |+ Z, S1 q% Q
/ r$ P A D: m8 ~8 w然后在样式表里这样定义:0 ?; p& p/ C. e5 G# M! C& l( A
+ _: U" i5 b: ]: _9 c
: W) _3 h" }( Y. R4 `. f
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
' p r& O/ i- G- o其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 v3 U6 E: N# C% g$ ?
* q* E- f* Z& K! O; y& ]id选择器也同样支持派生,例如:' Z) r, z1 o; ]/ G
#menubar p { text-align : right; margin-top : 10px; } $ B$ Z9 r6 {# C
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
5 L/ U; I( c: B; @3 Q& i- B2 q! Z- b2 T* o
6.类别选择器1 f/ U- f6 @) G/ c& g8 E- ~
# j( d% g+ {! v) H; |1 q$ r: N/ _
在CSS里用一个点开头表示类别选择器定义,例如:' V( p( I# v" I
.14px {color : #f60 ;font-size:14px ;}
9 _- Q y6 {2 h! ~% B3 }6 d$ I- o* q5 [* l2 Z. d
在页面中,用class="类别名"的方法调用:6 g5 [( I+ O* A* i$ n. v
<span class="14px">14px大小的字体</span> 5 |5 K0 c: ~/ L: J
5 U* X) C; Q; K% h& U( [( E这个方法比较简单灵活,可以随时根据页面需要新建和删除。: f' u* J2 V. Q
, o( R4 h, b( W! W7 N$ P7.定义链接的样式1 ^7 O: r9 S3 c
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
) X2 r2 O) o& y i# B% j2 O/ Ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
- Q: U; a3 m& y: aa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
% k% v+ }4 E. R) f$ l3 O4 a Ja:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
. b3 m/ w1 {' {, da:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
/ ^& Q: @' I% d9 e! |! h) k$ l7 M: s" e9 J$ f: `, H! [7 Q% D
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|