|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。2 H) ~. h+ u" g: a6 P6 Z
: V) H% X# `2 b& j8 S; ]
1.基本语法规范
* I& T1 Z2 i: |" }+ Z分析一个典型CSS的语句:
" z1 ~4 J' N q5 ]0 Vp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
H' W& _& u8 N# _ m+ Z- ~# ?其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! [5 X1 B H( }7 |$ x
样式声明写在一对大括号"{}"中;
! p# L" ~3 }: d I7 `7 {COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 0 \+ O/ ^# R8 R+ p& ^8 E
"#FF0000"和"#FFFFFF"是属性的值(value)。
' Z. L2 e* a; t8 j
+ r5 l2 [( E9 r) b2.颜色值
9 n- k0 j* p* _$ y, g8 A$ L" L$ e
颜色值可以用RGB值写,例如:
' ]2 ~/ x' h2 x% J
+ S6 x( h( f- ]* t3 V6 k3 h# O+ S, i5 a
,也可以用十六进制写,就象上面例子
) a9 {4 G) h# |; U
/ ]3 g' n S9 U% M$ I3 a- X
8 r1 m! a( C! E( e如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。8 T* G6 O4 ]9 k; ]5 b
4 y0 g H& e) f, y9 T3.定义字体' ]( R/ J( N" l5 Y( j
web标准推荐如下字体定义方法
( U9 |, c6 B5 s* w+ g. j5 i' P* i7 b0 s' }* X. c
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
# Z" W; S# K1 p3 N; m& l1 H* \字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
. d) [( }* x* C! uLucida Grande字体适合Mac OS X; 1 i$ O* p$ N8 d% h# z, X
Verdana字体适合所有的Windows系统; , w/ g6 A" Z4 |- d% g* f
Lucida适合UNIX用户
9 Q; Y' [# m4 S h L$ @3 d"宋体"适合中文简体用户; 6 U( W7 ?- F: {" l; Q4 @
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
% f1 \& y+ x6 d1 u9 n4 c9 l1 H5 f. `
4.群选择器" J0 T2 d8 B3 T% S
; K8 x+ s3 v5 c; T% m8 b# m0 ?4 M
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:( {) o# O9 M3 [, C4 h
1 z1 q" M# V: K* v- M5 ~
p, td, li { font-size : 12px ; } & C8 N8 V% |9 E$ y
就是给li下面的子元素strong定义一个斜体不加粗的样式) t" w3 h1 }) U! } \2 d
3 ?6 u7 w) o8 W' ^ K7 i. U& X
6.id选择器5 n- D, d$ E; X: {
& M/ ` I+ j0 {- _4 K用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层2 A; Z* c$ s5 r5 @
% O n4 N4 V$ h4 F
' X$ F, Z& }* m* d) O) i
然后在样式表里这样定义:
- x, U% P' z8 i& n f' f' E1 [. \" o- k+ h& A; Q
$ o8 l9 L9 ]! z% v) h# W4 S
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
+ y6 i b; Q4 P( L% j其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# v6 p8 {& p9 }) t( c
1 k" h8 ?* E8 E1 Y. `2 ?id选择器也同样支持派生,例如:
1 C' a/ y$ Y9 z, a, [#menubar p { text-align : right; margin-top : 10px; }
, ` n/ m+ G( U% j3 G- p这个方法主要用来定义层和那些比较复杂,有多个派生的元素。: s. k% X% ^' m! T& g: e0 b+ o" g
6 e% o& ~. l3 T6 h: y7 W6.类别选择器5 B6 m+ r: w( ?1 S. g, P
, e% l6 X) q' u% Y! P在CSS里用一个点开头表示类别选择器定义,例如:; {, N$ Y; V: K; ^# ?6 p
.14px {color : #f60 ;font-size:14px ;}
& l5 G! S4 R. {) H9 U
* `( F. ?, b( p( _& j在页面中,用class="类别名"的方法调用:5 _& A: q) y9 ~( A
<span class="14px">14px大小的字体</span> 6 N n$ b2 W. M
" h) L8 C K# \0 C7 r这个方法比较简单灵活,可以随时根据页面需要新建和删除。, h% J4 w/ F! w
* |2 v k' o" D8 j+ ~
7.定义链接的样式- M% e/ g+ G9 a# X9 m" f4 Q
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 [& R$ D! i! c% n+ @
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
! D0 ^1 {" j# m& u* X! za:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}: C- s8 ^9 v4 W( m% f% P
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ m- P' Y- e# Q* A1 y5 c8 Va:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ) Z b9 o/ L' g' W1 \$ K
3 i7 w+ r' k) [
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|