|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
) u5 w1 s8 `8 r; Y# t& q9 ]* ~! F ?% v! b' E/ X. e
1.基本语法规范+ U+ h n- T- y1 I* x: V
分析一个典型CSS的语句：
+ U: ?+ D4 I9 [! M6 f6 P8 @p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
' S+ |( Y. Q6 W/ n样式声明写在一对大括号"{}"中；
% q2 u* Z5 ~/ a# F! J# K0 ECOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
' |3 @8 @) b3 n2 w"#FF0000"和"#FFFFFF"是属性的值(value)。" |$ h$ H( W, z
* b% a8 H, O& {1 N
2.颜色值
; K }! Z6 F9 D) C
! \! J8 A( ~, r! L: P. ^: p! n颜色值可以用RGB值写，例如：' @0 k3 {" x* a- a7 r
$ x' Y0 T5 ^( O
( e5 z8 [9 C2 k7 T
，也可以用十六进制写，就象上面例子( G4 q7 Q+ u1 z& _; L+ t+ n! L
& Y" f6 _8 s2 O& J
* j2 n1 Q. J3 I( n& q如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。, ~7 i1 H# j7 `# I# { W
3 K! z% p8 u) ?" D/ o. F0 ^) |
3.定义字体
# ~. H; w& P' m. ]4 O# ?7 b _web标准推荐如下字体定义方法
0 z$ q5 J0 i1 V& X' {$ v5 E
' k8 B. y7 @9 u; T: d1 V) Hbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
! R5 c( f) x, f/ X0 S, Q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
' `( X; Q( Z. l" cLucida Grande字体适合Mac OS X；
G* V' X* Z1 M+ l( I' zVerdana字体适合所有的Windows系统；
- {# Q+ ]- M0 m) [. p6 U) q# E. MLucida适合UNIX用户
& }1 \. s( ^" k8 O2 Z- G"宋体"适合中文简体用户; & F% ?2 E* Y$ ~) Y! k# t0 g2 E
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;# P( f7 x/ t# I8 {* I$ c. d" |, g" J
( w: u* g- L7 ^5 I [
4.群选择器. h B! m: `" u- j8 r2 q: ?
, f1 k2 M: h5 f! e& z' K/ ~6 g# z当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
& v* E5 U- h. @" a$ w: O
9 _$ |1 W* [3 F; ]" f p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
3 @5 @/ c, N+ `/ }* X% w. I4 S+ V! y8 o
6.id选择器
- Z5 `0 o n. k+ Z, b
0 Y7 w' v# D3 r) g3 g! T用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
$ j9 \5 `% E, L* B
4 a6 a/ p+ G6 y0 B" e4 S3 B ]
0 O* e! q! M& Q" Z7 ]+ Q M4 \然后在样式表里这样定义：
, a) k2 b, B- s. @% a! C* `5 P( v+ ?5 A& f
. o8 T* {% `+ E7 D1 b' s( o#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。- G+ W. g7 }; z- V0 `
) x7 u7 J7 e% D
id选择器也同样支持派生，例如：
9 \$ J* D# u. j J0 P/ a& ^#menubar p { text-align : right; margin-top : 10px; }
) o5 h% ~& I: }这个方法主要用来定义层和那些比较复杂，有多个派生的元素。, t2 i, `1 ^& F7 i$ E5 Q7 W8 v/ X
5 O6 Z4 t1 J% ~6.类别选择器) l, @$ h- M! V' G; p! _3 e* k
, ]( x( \& {) n Y/ |. [在CSS里用一个点开头表示类别选择器定义，例如：
5 Z2 ~+ u. F, n. M8 l. l; i9 D6 Q.14px {color : #f60 ;font-size:14px ;}
% b0 J: \8 t- D4 Y* K5 \8 m$ E+ x$ }4 \% b
在页面中，用class="类别名"的方法调用：+ @# e; V, R U
<span class="14px">14px大小的字体</span>
! T/ m0 {! v0 V" C
这个方法比较简单灵活，可以随时根据页面需要新建和删除。4 e& R0 s' h, I- z3 l5 A
* q7 T8 F; k" r7.定义链接的样式) R7 g5 y" v" ^) J* x3 {
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
" V F+ d+ X( _& H0 `% q! @a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}3 ]8 a$ I0 A* }" J9 C
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}( B& v+ ~1 R" F( L
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}- [2 Z+ D( S! W3 P9 n3 _ c
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
8 G1 ^/ o/ \& |& _2 b+ E( f% A& t1 v7 {- z: P: z1 f( o
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
