|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。* S! R' V% x- a- @% x* L9 h
0 w/ r! x1 h S# b5 C' s
1.基本语法规范0 p2 [& A/ Y, x E
分析一个典型CSS的语句:
' N6 D, R1 r3 O9 yp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 g- {% t& I( ^6 J- j* M其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 k3 A, \2 @+ u0 e4 U" t8 y& k, X样式声明写在一对大括号"{}"中; R+ r" ^0 o* R3 ]& q+ N/ @$ N- C
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; " v6 X6 G# a* t+ b7 U, c8 `
"#FF0000"和"#FFFFFF"是属性的值(value)。, s% r2 N7 [5 f+ I) L& v8 E
r& l" j1 H+ s i* k# `
2.颜色值
! q: ~8 x6 r5 ]1 s; |- V" h8 ` d" N- M) j: g$ B
颜色值可以用RGB值写,例如:6 F1 g2 W9 p; z* ?; y" U
3 L4 ~( X/ k1 R9 w# w
5 O: D% P3 {3 }- A
,也可以用十六进制写,就象上面例子6 ~+ H) r7 d2 q9 Z, V" d) ^
0 d$ n& T: @, m- F0 v% L, [' O5 C, ?- V h9 `$ m& W2 s8 m0 k+ `
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
1 k* m7 }- M) |4 Z! }; @
! p1 O; Q* ^6 b' D, T3.定义字体
! H# k" n% }$ O; Z i# a7 b: N* Hweb标准推荐如下字体定义方法
( J4 k% ~( X( Z7 n. F4 m0 n0 g6 w* n( x+ Z: Y" A' W' }0 D Y3 j
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
! {2 F/ Q6 t- \- J字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; . F5 O& j N2 B; p
Lucida Grande字体适合Mac OS X;
4 L+ n+ E4 n$ i' k7 V, ^; _" @0 ZVerdana字体适合所有的Windows系统;
7 I0 s8 k5 t6 TLucida适合UNIX用户 9 l) `( y: I9 P- x; O" \+ `, U
"宋体"适合中文简体用户;
) y- S) ^1 X: S5 p/ Z% q如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
) h3 S( |( @5 @. K$ F) A5 \, s4 L; V N
4.群选择器
5 X# `; s' v8 I2 u, m: X0 m; U$ A1 q
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:5 Z$ h5 |- a7 x
5 c/ C) Q! S& d& i) E) L
p, td, li { font-size : 12px ; } 1 ~% S& A7 ^' }1 N" M
就是给li下面的子元素strong定义一个斜体不加粗的样式
( i: h! j' _" W3 d6 R& l
9 H |8 ~- I1 c% W6.id选择器+ Z7 E# i8 }# v+ k, C
) z6 S! f7 A# t! R* J用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. Z d% v7 @$ V" B% s2 T1 L1 l) F2 `8 g1 F
' k7 s& u+ I9 d然后在样式表里这样定义:
9 ?$ R7 C H) Y" ^9 f' m: W/ d; ? b7 @6 D" P
, ~$ F/ i, z1 n% C- n+ e) ^% h#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
4 v% W7 f+ }9 h2 W, d3 E8 O其中"menubar"是你自己定义的id名称。注意在前面加"#"号。" [! v) h& b% o7 Q" U, j P
0 C/ r0 o. T. B9 q/ g3 q/ Q( d
id选择器也同样支持派生,例如:9 o r1 a& A' w; ]
#menubar p { text-align : right; margin-top : 10px; } 4 X o5 N8 F9 I7 y4 v2 r
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。6 l3 T! K2 l" C9 L
, L, J- I6 O6 n( o0 v3 i3 U6 B
6.类别选择器! l4 R0 C3 s" i+ v: a# U
! z) V! d$ o, ^8 L: C在CSS里用一个点开头表示类别选择器定义,例如:/ o8 w8 c* N. g
.14px {color : #f60 ;font-size:14px ;} ! r/ W i2 S/ n3 b6 u
" S6 R6 v, |1 z0 u$ k- v. W
在页面中,用class="类别名"的方法调用:
* ~/ e: _2 g. o0 L<span class="14px">14px大小的字体</span> 6 t C7 f* ~* u, z$ m( m
+ Z& a! ~0 u! K
这个方法比较简单灵活,可以随时根据页面需要新建和删除。8 J7 z3 ]$ I7 W! T* @
9 L6 Y) a2 X' m2 h3 P% `
7.定义链接的样式# H) G( u: C* m' e
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:6 d4 z! c0 v5 D! i$ Y# E! \5 Z2 S3 | K
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}5 |0 L$ }+ |5 E. e# V7 Z7 ~
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
4 o& ]* E2 p$ e+ P& D- k2 Za:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 O8 e( _8 N" B! F5 T. u, m0 Ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; ?2 [3 m* ?* R" p2 M2 F0 m7 Q; O y- q5 s) K a
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|