|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。# v$ c1 K3 F. l' F: G/ A$ w/ d
$ p) @( z- A7 w) f: a/ H3 u* [1.基本语法规范. W1 s" z! m' R
分析一个典型CSS的语句：
' @$ q9 ?2 k# o- Mp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
8 ]( z2 G2 T! p* `! G) H其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 0 B+ Q( K: O/ Y; [0 w
样式声明写在一对大括号"{}"中； 5 F0 B6 O. ~) K
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
6 |. w" Z: j$ P/ q$ R9 T$ [; \4 d"#FF0000"和"#FFFFFF"是属性的值(value)。
) l8 A$ J% X9 q9 X
! G6 _4 r4 Q' J. Q8 g: l: }$ N2.颜色值+ O9 x+ x) m+ [: S) j6 P
" Y$ @6 M" b0 |
颜色值可以用RGB值写，例如：
& ^9 a% c8 w0 f+ v! I% t& `+ O+ S! L
- I$ f Y# i. m; K, k
，也可以用十六进制写，就象上面例子
; s% X0 P; z. c3 ]+ ^: `" [8 Q/ o
" a) l, E3 c; z# v
9 t7 Y0 F |% D+ G- A如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
: D/ O& h# M) c+ M/ i8 y4 X% a, \% a) f
3.定义字体
) n; C0 H7 h, Gweb标准推荐如下字体定义方法 H+ | M' Y4 e) J# ~
i1 l* ]! H$ P; P6 y# }& V/ n2 Ibody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: o" v: _, l% b- D字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
& d! U/ m7 O2 s JLucida Grande字体适合Mac OS X； 5 @1 g. Z0 e, |0 `' G
Verdana字体适合所有的Windows系统；
' g9 }' i, N3 ?) Z$ O0 VLucida适合UNIX用户
2 C+ W1 x8 V1 z# p"宋体"适合中文简体用户; [; C; D& r* L0 K/ ^
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;1 n9 F' l6 i4 r8 ]2 x! S6 r6 k
7 ~$ T0 ]: e! s
4.群选择器
) {6 f- _7 E6 l+ ~# r+ k* z! N9 c: g5 o! u: ~4 E4 j$ U
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
O5 U9 K1 L0 H& U) c0 K8 c. q- T2 D3 W( |
p, td, li { font-size : 12px ; }
; ]- i% {( a$ U" q r就是给li下面的子元素strong定义一个斜体不加粗的样式
- g1 b1 F% G; D9 B/ Z2 p) U" U8 v/ m
6.id选择器
) P! T7 y/ t, Q2 r" _7 z& t
. t! }6 M# i* l6 _" t( g用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层! A0 p, k: g. C I! [# v& `+ e
* Y% O9 K" r4 J, c# X( v! ~2 t
! P( o' }' R: D' m
然后在样式表里这样定义：
) {, T3 v) a" T$ f1 k0 ]- G1 T1 V4 L# }0 K5 L/ h/ U6 ?
' H2 X: m; b- Z& Z
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
/ T* M" t8 ^6 ~! G( ~. |+ d2 L/ B, o其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
9 f4 S% r0 x+ w) [+ ~8 @1 r$ p% A: K, M
id选择器也同样支持派生，例如：& ? j6 {; l" O Q8 J% ?
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
( J6 P& Q7 X. x" t3 Z5 A0 A) s$ c6 v! p. V
6.类别选择器2 f" T3 o' R& D, V( V
) d) ~9 f( p7 [在CSS里用一个点开头表示类别选择器定义，例如：4 w) Q$ b; `& @9 E
.14px {color : #f60 ;font-size:14px ;}
: p1 H: {6 A( E% a6 e- B$ \! Q0 Y( b" C, _ o% P5 Y/ l3 D4 z
在页面中，用class="类别名"的方法调用：
6 i- f& p4 E2 Z: K<span class="14px">14px大小的字体</span>
4 ]2 V" [. `, K" s% c. X. }4 ]' ~ A b1 T
这个方法比较简单灵活，可以随时根据页面需要新建和删除。- e; u& K1 j' |
% x. @) K7 D9 v& Z& n7.定义链接的样式
E3 w$ y* t/ g% B7 I: }3 G; w, K# v NCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
0 k" N- I' g( ma:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
) p* n" K7 a2 ]$ Sa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
8 a! Q2 h, M4 }9 @) d, o6 Ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}" f: z1 d9 `# j
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. e5 _0 P7 D, D! ?, C) ^3 I
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
