|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。$ {: c( H: I5 r7 j
* x$ b8 D$ N/ a7 V, K1 r3 V9 D3 l$ V& M
1.基本语法规范
/ ]2 P. Z2 n" o7 E& m分析一个典型CSS的语句：
2 ], M4 D* k% b4 w+ ~p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
" j! J7 r" {9 g: w7 H' W其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
. |9 [. D2 O6 o& r样式声明写在一对大括号"{}"中； ; [* g, ^2 I6 e& C, J. _
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
B+ R9 V% ]0 p ?"#FF0000"和"#FFFFFF"是属性的值(value)。
6 ~, e5 I6 ~. }5 k4 {3 f) T" w7 v
3 c. G/ t3 }- \/ e1 E9 ~2.颜色值( ]4 \7 l) N9 f; w8 i A
E, j4 p& n8 K; X颜色值可以用RGB值写，例如：
, Y- N; A, J5 I/ q) E' R4 V+ b: z* @. Z8 D5 j& r
% d4 S2 j% H6 y z% B1 D% ^& F# c
，也可以用十六进制写，就象上面例子/ D e$ `% g6 [' m
. s% s6 f/ ]9 n& f: B* f4 ]+ D
; ]( J2 O7 v" ?0 V g3 s+ s' x* v
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。1 k2 d4 t5 B4 g/ o3 ~
8 s. U ~+ }! n3 j4 H
3.定义字体7 _2 D! Q( b& ~! z- E
web标准推荐如下字体定义方法
! z0 L% A0 ], J; L( \2 _, P* W- j( H
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
) y. w- Q% l9 S6 OLucida Grande字体适合Mac OS X； o& R6 g0 W4 G/ t$ P5 i0 g$ _; ]
Verdana字体适合所有的Windows系统；
+ r/ p+ d0 \7 { d! t6 JLucida适合UNIX用户 # B n) J+ ]4 `, P
"宋体"适合中文简体用户;
; N( `7 j' e* q. S, y, V$ g如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;" A' `- M' V( Y% L6 r
" `; f. |' u7 `8 |" Z) d4.群选择器: x; i/ d( e4 e9 ?3 |
7 i. D/ I* Z, K6 {: P0 F8 n: C6 ^# k7 Y0 c4 p当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：$ f7 T5 ] F' }% l+ e/ y% Z3 ?
e0 e: L. O! ?2 w6 Z. j$ Q p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式; ?& b/ x' H% p* f+ e4 g1 m$ `, J+ x
& L P+ C$ _, z2 }, f& l; L6.id选择器
9 \) [9 g* o4 |" F
, i# N# d: N* F$ F用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
7 l) d" o6 e2 @2 m8 Y0 x1 J9 t2 f f! l) H- h: J; O
% P3 Q# `3 V7 v+ J# M0 c( T然后在样式表里这样定义：6 V: O- E9 L8 B
$ C1 c; F5 t; q: j2 x
9 Y5 D+ M5 w2 g8 ~: K
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
* B: ]" D" [" C7 I q5 V9 j D其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
/ V+ H" \1 Q- N$ f4 C0 S- j6 [" o5 i1 ]' E' a0 t) m+ G2 u
id选择器也同样支持派生，例如：
$ ~( H7 h# N, J#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
4 q& i+ R/ E; _5 o
( S1 j( n3 X3 p5 X- ?; `6.类别选择器
2 W9 s- P8 `1 c% c# C% e0 _, P" Q; d4 O. s. Z5 i8 l1 e7 [2 F$ Q
在CSS里用一个点开头表示类别选择器定义，例如：
4 W" I+ g! ]: t+ |.14px {color : #f60 ;font-size:14px ;}
6 X& \/ {7 _/ G3 U' m0 }% O a
在页面中，用class="类别名"的方法调用：
0 F* k2 h! ?% M4 C3 q<span class="14px">14px大小的字体</span>
8 h$ w5 U) o7 l. G2 a
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
' a7 X1 S* ^# B/ M! ^* V, p
: ]2 \' ~6 ]5 R: z N7.定义链接的样式, ~: l1 x: ]0 F. Z
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
$ Y, Z$ {: T; s& D6 za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}. h% ]# M" v' x
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}, d7 v: p$ _1 E$ U% ^, B# N" Y
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
. a8 o4 o; r+ z \1 `! `. ia:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; x; Y9 q+ _/ e; U* Q2 a+ T
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
