|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
) g$ C- O( N2 H$ T7 Z) G; P& `2 B- u" a+ f7 T7 O7 I$ b3 ~& D6 Q, n
1.基本语法规范9 z8 w* J6 y2 O2 U
分析一个典型CSS的语句:
0 x( |+ L, ]8 p3 @- G; M* O0 l# ?6 wp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
4 k1 C5 g8 T$ p1 P$ v y6 y G其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; $ ?& Z- ^2 p+ W; o4 F
样式声明写在一对大括号"{}"中;
$ o0 E9 r5 M/ A1 B+ U, y6 I! TCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
: ^/ w8 A% S' W3 w: A0 k"#FF0000"和"#FFFFFF"是属性的值(value)。
, o4 J$ Y( p) ?+ I; r% g( E( i5 r% O' B; Q0 a* D
2.颜色值
1 f2 C" ~4 y2 P& a5 `+ D" U) F+ Z+ f r$ ]; U, E+ z
颜色值可以用RGB值写,例如:
0 H1 Q/ T; p* p' N% ^! h
6 d0 g+ n7 j' T, L+ ?6 L8 T& {% M" b% b; q
,也可以用十六进制写,就象上面例子* Q* ?2 ]3 _6 `" j% }8 _! M5 P
8 w, Y" N2 T" F# [* Q" g
9 F' t p) `, D3 ~
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
0 E0 e0 [' M( A) K+ R/ i! D. _" s- J% e7 l8 U+ K ?
3.定义字体5 F, r: r; B* m( w3 k8 m
web标准推荐如下字体定义方法
; m1 \9 H0 T/ `8 N9 }7 E4 A' l$ T9 R
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
0 Q4 C* o1 _6 t" W9 W8 S字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; . p! e' v1 o! C2 w0 a
Lucida Grande字体适合Mac OS X;
- v6 S' \/ Y4 BVerdana字体适合所有的Windows系统;
4 i+ V" t- u/ Y) r( n- TLucida适合UNIX用户
1 S+ ]' u3 @ {* L q$ ` P"宋体"适合中文简体用户;
* S0 ]# a8 V1 i, V/ U; j如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;9 `* i* ]3 p, Y- v
2 a3 j8 R7 S: T( q$ u' I2 {) ]4.群选择器
8 v5 \# q5 Q* ^, d/ i8 r5 S8 \" P; |6 [6 ]& e
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
* M! N( N" U( t" y8 J0 Y! a {3 I" ]6 \; a. S) b
p, td, li { font-size : 12px ; }
% r+ z' @6 Y" e: N就是给li下面的子元素strong定义一个斜体不加粗的样式
9 \: `$ ^3 v+ V. l) i: N; t: u! M) M! L q3 ?* [! w
6.id选择器) h+ r1 o. n3 f% k2 o; h8 r
5 n& I6 {) N7 [ f( T用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层- h* z* v4 m E* R& v: p* ~% a
. Y7 C( u" U6 j
* y& [1 i, f( P* @
然后在样式表里这样定义:3 n6 Q5 m6 e% t8 [6 Q2 Q
& [+ e4 g( E$ w0 w/ _0 G$ ~9 G
& q7 B& D! Y# L0 u+ ~; ^
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 f/ o$ A- b/ f9 s' Y. ~4 M其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
, E& D1 h6 `% R- H! ~) P7 G& j# w+ C; d* m
id选择器也同样支持派生,例如:
: h8 A# z/ T% ], ~8 u#menubar p { text-align : right; margin-top : 10px; } Y( x5 p: j+ v$ w
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。( U( v6 V. H) l: [
, r, Y1 @ [7 b* G9 v9 N# G6.类别选择器( |' E' U" O( c* D$ t/ x
, m5 q7 ]* b( y) V1 F
在CSS里用一个点开头表示类别选择器定义,例如:7 b# y$ L; j/ c* @- k
.14px {color : #f60 ;font-size:14px ;}
2 H3 L% Q. [% |! c) a) P" q
1 a1 g* J! ~9 Y# o9 S! O+ D( M在页面中,用class="类别名"的方法调用:
: u* Y$ V. X3 g G E* N<span class="14px">14px大小的字体</span>
, A2 a1 p8 }+ K3 l7 H7 e& ]3 v6 h7 P, K
这个方法比较简单灵活,可以随时根据页面需要新建和删除。, i# q" X, `1 D x
1 I' K! q* }6 O8 ~% |- j5 l7.定义链接的样式! s* o( g' a* [5 T1 L# s
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:* n+ A9 _" U. o G
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}! l' j: y4 @# s4 Z7 n, D. b
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}( ]( C0 E, k! ]
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
# R {$ C* q/ z# ta:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! q5 v7 D- e% b7 [& o# a
: [4 m4 V) `2 {$ g5 b2 Z% k5 x$ K以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|