|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。# h! _- W8 V/ X( k% e- l0 g( ?& i
0 e: y; K; [" @+ s( n. i) {1.基本语法规范
$ l6 V I+ U' Y$ c6 h分析一个典型CSS的语句:4 \/ [6 ~/ K, [' l$ U G% H
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} ; m- Z Y) ?& C7 H
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 Z( Q; c% d2 n样式声明写在一对大括号"{}"中; + a& M6 ~2 |) K9 ^
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; # H/ \% L( B8 p1 W2 f
"#FF0000"和"#FFFFFF"是属性的值(value)。
4 X3 {; f& g/ l7 S
. w- d( A; D2 i2.颜色值
\; m2 ?: O2 j# f8 P, U- z o( T, }# \
颜色值可以用RGB值写,例如:
2 B/ J. [3 ?! g
! v( g" e" Z7 N* k4 t
* }- U+ D3 F1 R7 `, b4 h* n9 d,也可以用十六进制写,就象上面例子
1 m* Q( A, r- _, q7 f' p
! M6 o" g" s1 b" L& P U' E" A2 i
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
# N N, P' J) U+ H3 p4 l) j
8 n# S+ t! U8 w& v% p3.定义字体5 m( t) S8 P6 ]- e: W6 X
web标准推荐如下字体定义方法
# Y0 Z2 W$ k( R3 U/ f% I
0 r( R; w2 z2 \% J+ D* }$ Fbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
7 e5 g% L, {/ J( q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
( Y3 i) Q9 ]! _4 YLucida Grande字体适合Mac OS X;
. \1 J9 T- z nVerdana字体适合所有的Windows系统;
! E* b9 H7 O( ^6 p9 W: d K- MLucida适合UNIX用户 9 s$ E0 R' _$ Q" T7 z' {7 T0 E! I
"宋体"适合中文简体用户;
) p+ h& K" l1 x; U% I. X Y如果所列出的字体都不能用,则默认的sans-serif字体能保证调用; I( I' M2 S9 T
0 \6 y W4 g0 E" w9 F# e8 x4.群选择器. T" m9 Y/ U9 C% O$ l: l7 A6 @
" Q9 w: s3 G: B# k; {: X1 T8 o当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 ^. W/ O. v3 A* T, D1 V4 C- F& O$ o. ]# V2 X3 m; t0 P; V
p, td, li { font-size : 12px ; } 4 }# s7 Q: {: p: i2 j! B
就是给li下面的子元素strong定义一个斜体不加粗的样式
/ b* d# |* r% Z" g! d" d
t/ Q# [4 ?+ i' S( o0 G. N" S6.id选择器
/ g, ]+ I* m: C+ A4 H- L* f+ w) c' `4 `8 N# \! Q7 h
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层, w; I) t/ k, O8 ?* F& H/ g5 U$ r
. S! w7 r/ L' q8 g, f3 a7 _. k+ a' f! L K) b; A2 N" W& h/ ~
然后在样式表里这样定义:
( G9 |1 y. ?7 c' `1 P# O* y% n0 V& U/ o2 a
2 y$ Y E5 R e" C5 s& A S
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
9 ?( v: Y9 y4 I& r! P其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
! U0 g$ a4 d4 Z3 B, f9 }$ i
1 M# U( h9 ^$ S0 t' rid选择器也同样支持派生,例如:9 g' P" p; q$ d$ [$ c a
#menubar p { text-align : right; margin-top : 10px; }
) u7 G8 I4 r0 Y这个方法主要用来定义层和那些比较复杂,有多个派生的元素。: i# t4 y9 e: G# J* h- [4 w
5 u2 @6 S t) \+ |+ U, G1 `0 E
6.类别选择器
2 `& G; i, E4 I3 q
& L1 t; v& R+ C2 i" _在CSS里用一个点开头表示类别选择器定义,例如:
3 ?# w, w3 a. _5 q9 Q.14px {color : #f60 ;font-size:14px ;} / B$ x8 e. Y0 d
5 o L: U2 m# P2 d
在页面中,用class="类别名"的方法调用:0 j, `# {0 Q6 a7 T
<span class="14px">14px大小的字体</span> 1 |1 T0 ~: x: Y
; |* v( v+ Y4 n' K g; h9 L* Y这个方法比较简单灵活,可以随时根据页面需要新建和删除。8 U7 n- n0 F) h! }0 ]
- `2 B' N U) b3 V7.定义链接的样式1 F( f8 V% L! I. U& g. M* s3 P
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
! T, e |5 s* K! _a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
$ h+ L6 W6 }7 D" t) o) |( c( ?a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
$ ~% b5 l- q2 y ]$ M7 r, }a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
4 l# p* Z: z( {& G; {% Ma:active {font-weight : bold ;text-decoration : none ;color : #90 ;} & h+ H& E5 I' I
9 d y9 e6 z* z* e# {9 E以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|