|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。1 X7 s6 K7 @7 _' S; q) _7 h+ K
" h+ d$ l; B# ^4 i& a
1.基本语法规范
# I/ {& E( ~' T1 c分析一个典型CSS的语句：
' h T- D4 A: y wp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
, O5 i( R% W& X% G: y+ K' J4 K& N其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 8 W4 G8 y* a# S& e
样式声明写在一对大括号"{}"中； g2 M+ M/ v2 {$ f* i( t. V
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ' A, a% c7 a7 @3 k) c" z+ ~/ \9 H
"#FF0000"和"#FFFFFF"是属性的值(value)。% i. e! s% v0 p5 U5 q
5 W6 m4 x. O. F2.颜色值
+ q& b% M5 Y# |2 \- f3 o$ R6 l. d5 Q' ^+ l2 h
颜色值可以用RGB值写，例如：
5 D. ^& x1 O, j9 ^" c" e J1 i/ a3 n: B8 O
+ g& V1 |1 O3 k7 i
，也可以用十六进制写，就象上面例子
* s8 `: f8 x, Z+ S! G0 S1 O B" F8 o$ d# x
% b7 E2 ?- J& _* L' _6 @; v
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。, P& ]- @; v. s8 k5 m! v* u
, V8 z+ d+ @. N8 _/ ~/ H; T) x% z5 H3.定义字体
9 V- J7 G3 L6 }- N. ]9 n3 Oweb标准推荐如下字体定义方法1 h/ r* Z8 c9 v& T# d- a
. F+ g7 e! o% H( b- w
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
4 G" a2 Z: m) z( j0 V% n# @字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
+ a( L9 T+ E8 D& i- VLucida Grande字体适合Mac OS X； + q9 B" y, m; a+ f" Z8 @2 ^ X2 h- L
Verdana字体适合所有的Windows系统；
9 [( k& f: L! K1 N# r; DLucida适合UNIX用户 4 F5 s7 B/ g/ x- f$ H$ f- z G
"宋体"适合中文简体用户; ) f4 a0 ?. w# t9 w7 c0 x
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;4 S& ~/ g( C; [; R3 m s( E
$ K% O! b: E4 Z* H5 E4.群选择器
& u7 e. X, C2 d ~$ W( y6 @3 y, i1 y4 C- f' u4 N
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
+ `! n; i! L: q3 U( A; D) p- O( x7 M. l6 O8 F3 I
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
) \' v. }$ o3 e# ?( E- N1 |
! Z: B, v) u, ?; P C6.id选择器
& Y2 I% C' Q& i8 K+ p* G% v0 t4 r) j* i5 s* M1 s
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ @5 F7 F( |" h$ B; E& X+ V
1 |- d, Q7 ?# y: t% f# N/ x# W* I! F3 a5 }# D+ b- Q k+ q; L' T
然后在样式表里这样定义：, r: A. o! n7 v' j: B
! o+ b4 ^; }; t, x# H" ^7 y. A
: k# [3 n. t! w1 {! c2 o#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
: G( e8 D$ Z% x. S9 l4 O" J K0 r1 h; G其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
- c, E( e: T4 n) n+ G4 e, L; `$ x7 E$ n+ J7 p1 m0 o. B
id选择器也同样支持派生，例如：
: o' E) R0 G7 K! D$ S7 T#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。( C! n- Q8 V: o" X& a
# S/ g2 ]8 y! R+ c6.类别选择器
) n0 W# K$ k R$ I0 X( L: [( Z) D# a$ {/ [1 _
在CSS里用一个点开头表示类别选择器定义，例如：
# N; e8 C; C0 \1 v2 i) K: b.14px {color : #f60 ;font-size:14px ;}
1 B* ^! j- G2 p在页面中，用class="类别名"的方法调用：2 D7 F) D6 L9 ] B0 j2 K% ~
<span class="14px">14px大小的字体</span>
: `& Y" k% ^( A+ i- U' g1 {) o; k& {! ^. s7 O& x
这个方法比较简单灵活，可以随时根据页面需要新建和删除。- U- B b! `, ~, x* X
; N& U7 S m2 p& `
7.定义链接的样式+ v4 K0 Q; P) {7 @' K( D( ?
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
! ?3 e% q7 X* ] F# t2 l2 Na:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}+ @5 v2 n u, `2 n$ _
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 W# p% z# Y4 Q. _& @
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
! P/ U; m) k$ S3 Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
& C( t( u+ X1 b1 h8 K& S以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
