|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。. _, I2 x+ W9 U. W: U4 c
5 y, X7 m$ d8 z7 A9 x. W3 |; h1.基本语法规范9 A/ {6 ^- e, ]1 B# b3 C; h
分析一个典型CSS的语句:4 b. S$ ~; W4 v) O2 D9 t |: T1 f
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1 y. l9 X& J( `' _3 N _ u& W其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
( Q/ v V, a* \) T( j- z2 w$ d样式声明写在一对大括号"{}"中;
$ @, d/ R& d# {, j. y+ JCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; % J: v: Z2 [1 N* ]" W
"#FF0000"和"#FFFFFF"是属性的值(value)。, J; r# p, a2 K! m" ]) ^1 |' T
( A0 V$ ^; j: p9 B* v2.颜色值; V9 [) ~" I M- v$ |, _& D7 Q
! x6 l& q7 n3 k) \9 q) E
颜色值可以用RGB值写,例如:, B/ S O& R' Z1 n
8 n( I2 q4 c' x+ t
0 V/ J* ]& X P2 [/ k
,也可以用十六进制写,就象上面例子
- A# W" c7 t' ]* c$ e
/ d( y- D# _) a7 D& |" W0 A6 [! I# l# n6 D1 M4 t
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。; G, G4 a" l: l8 e7 R
1 ~( x& ]6 ]- t3.定义字体
7 S4 f4 g3 c" E" i0 Cweb标准推荐如下字体定义方法
+ c% U8 r/ G+ t3 y1 ~( G7 V& q @' _
`) N9 H! u2 P, p l% \4 V4 qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
8 _! e9 [$ J, x: L9 }+ } G$ `字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; * s, ?6 o- e V. S
Lucida Grande字体适合Mac OS X;
7 z/ L+ E+ @, G( r2 T# N9 ?Verdana字体适合所有的Windows系统;
8 [9 j3 `! B% @; b8 T# g; PLucida适合UNIX用户
' P* K: A5 B5 M"宋体"适合中文简体用户;
D- C# U+ x1 D$ g" b; c. c如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- N% \. h5 ], f9 X3 i
0 q" ?& v9 p3 \5 R
4.群选择器
+ y4 Z! l3 Z' i: Y/ \, ?/ b% ~
9 r# m6 X9 L/ E& V$ N4 y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:1 k& ?/ C& e, O
$ [7 i% W6 U7 q! A5 k# q( k
p, td, li { font-size : 12px ; }
2 `% t# N) B7 L) D' R就是给li下面的子元素strong定义一个斜体不加粗的样式
\0 Q3 X7 S. q/ K. [7 \" u `- e' M8 G) X7 H1 u9 \1 H
6.id选择器
: g! N: o- i( j* s! f5 A
; }- Z8 o/ Q/ F用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层% X$ m2 v+ j8 k& ?
# w" A0 [& Q6 F/ i. v
8 V; U+ c6 _3 T( _8 p然后在样式表里这样定义:4 _" u5 k, T8 }1 ~( K+ r0 e- q
8 j4 I4 K4 o, M# d
9 T. b! T8 F% V; q- z7 {#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 5 u: a, \" b! l A2 |( Z
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
. Z- J$ I7 J7 a) O7 A8 d4 B
8 K% e, d& ^" a1 Vid选择器也同样支持派生,例如:: n% D8 [ ~( s+ n7 r2 I& A$ Z7 u9 C
#menubar p { text-align : right; margin-top : 10px; }
: V# R$ S; ~( l, Z6 @/ y这个方法主要用来定义层和那些比较复杂,有多个派生的元素。- j' I+ B* ~/ P1 D$ r
6 m `+ g7 G+ ` S0 l$ S
6.类别选择器1 m3 p0 T9 k1 F& p
8 s( `1 X- G; X' B2 Q/ z在CSS里用一个点开头表示类别选择器定义,例如:
4 F- d9 H# Z3 T.14px {color : #f60 ;font-size:14px ;} ! s3 t8 @$ j6 c K4 [1 B% d, _# a) N
" U- [$ m6 F2 s2 I4 M在页面中,用class="类别名"的方法调用:
" I& J7 K1 a I1 ~7 \<span class="14px">14px大小的字体</span>
9 {/ [2 }( @$ y4 T, p m7 k7 c, F5 C" q K* M
这个方法比较简单灵活,可以随时根据页面需要新建和删除。* P# f# J, B/ p" w7 W2 p
# v; G' L3 C0 D0 {1 o+ E7.定义链接的样式3 O _) r* d0 n( I
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
$ k7 k. s. z v1 _9 {0 U( Ra:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
+ E; k: d, N" ea:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}, t9 d: d/ ~- U7 Y* T8 A
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* J7 @' x# V1 y' @4 u+ y" N: f' E
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} - l* s* [2 f9 Y8 s* F8 v
% s1 K1 C* ^$ y4 Z* u
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|