|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
' D5 n+ P# q: {! o8 j4 M0 l
- \! Q: }! U" g1.基本语法规范
$ }! q3 p* ^" i6 s2 ]7 B0 B7 q分析一个典型CSS的语句:
* J5 Z, S# _8 O i hp {COLOR:#FF0000;BACKGROUND:#FFFFFF} ( n! i5 S/ Q) \% ]6 o( _0 ~& ~
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
9 O. r& p# A6 i0 x* c. R% \( M( H) X样式声明写在一对大括号"{}"中; ' n7 e7 P* @+ J: t
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ; k( e* |. o6 @1 u, \5 l
"#FF0000"和"#FFFFFF"是属性的值(value)。0 @0 w4 P4 d9 K U0 c. O
$ k! J3 B+ a/ @ z2.颜色值
- U8 [* A, [& p" E8 y! W( P, Z
+ S0 `! m7 B3 f颜色值可以用RGB值写,例如:
* P3 W2 Q% p2 b# l+ S) p/ d$ m1 W% O1 k/ t3 v
! Q* U; A5 x4 F% V+ y
,也可以用十六进制写,就象上面例子
B n% f2 e: a$ X' | c( h1 }3 d& y7 X; t! }% ]. n; g* v6 u/ o6 n$ A
1 x2 R0 B0 G" p$ O如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& I: L- d; ]) W ?8 _2 V
9 [8 h. O8 ?. T( T ^3.定义字体7 v5 H6 ^2 g; O v+ O
web标准推荐如下字体定义方法/ A! P& R& J* R+ s% O7 S
) _, z' e; s1 e2 q R
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
, q) i @& a+ E7 p2 |; D0 c" R字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; # ^2 z- E0 y, O; Z n
Lucida Grande字体适合Mac OS X; ; g6 C& m' W' V& h s9 m
Verdana字体适合所有的Windows系统; 3 R, }8 C4 Y! R u
Lucida适合UNIX用户
8 [7 a: ? {6 y* k8 r: c C"宋体"适合中文简体用户; J8 E3 Z0 c( `# b1 b [
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
8 _& b! H' t; T. L m. w! X5 s! v Q6 c4 `6 V' y8 F
4.群选择器
5 F( v/ a7 T( X
8 U" q% ~' Z4 Y% X( e, R当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,: H; n5 R4 m% I- Z
" o) T6 h) p8 Q4 W$ z9 D
p, td, li { font-size : 12px ; }
( d* q1 Q. t6 _; c6 d6 [% J; N就是给li下面的子元素strong定义一个斜体不加粗的样式2 |# Q! s* O4 S G
! {- u5 x% A$ j! M- k( s
6.id选择器" R3 m& K& z* i+ `
: a1 ~$ N* m2 ]8 b# D$ t, u用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
" B% C/ \% Z3 g
1 {! c0 ^! A2 a* Y: V5 Q; Y% w+ I
然后在样式表里这样定义:' _- |# A, a% p# G
& n' f, M5 l* w; o, j( O2 r: B$ X: d/ o& e8 f5 R- }9 m* y! K
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
) a; a }: S* h其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
3 p$ U6 N2 U( f9 m, ~0 P+ q8 _( B# h% N0 E9 U: v
id选择器也同样支持派生,例如:
) M3 @, U' R! T5 D6 _#menubar p { text-align : right; margin-top : 10px; }
2 S! ?5 W$ g# H' }% H( c x这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
) s5 P: p, L9 V# F/ V" o) z% @1 a% _2 a
6.类别选择器, Z+ S# J) d* t2 {; C
9 t4 n4 i( j$ z e8 E/ e( b在CSS里用一个点开头表示类别选择器定义,例如:
' ^0 o1 k( W0 R: T.14px {color : #f60 ;font-size:14px ;}
% Y; c' G" W' ^0 ?7 K2 q3 h$ m3 j" d0 z# j
在页面中,用class="类别名"的方法调用:
3 b6 G, f. y8 L ~3 y<span class="14px">14px大小的字体</span>
G, ?, k4 t' b. u# S' @* C V5 {2 Q$ n* T- T) V
这个方法比较简单灵活,可以随时根据页面需要新建和删除。' T' l9 U7 c1 R
& K( S* [7 K, B9 `9 o$ S- C
7.定义链接的样式
% v. n( a4 T+ W0 s; xCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
" ?" }4 C1 ^# na:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
7 G4 h4 ~5 c2 Ma:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
" ?2 K( r/ [6 a+ C: U0 G4 @/ _2 ka:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}. E! v3 K$ D' M" P& v
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! t) C8 K7 A0 P; r$ [! o) E* X+ J; T+ j' \6 J( V. A4 {1 `8 R5 R
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|