|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
8 H. f" a1 s8 Z' n! e
' T" [& _ A0 R5 F7 ?2 \1.基本语法规范
; [2 l# t( v% C: A2 W分析一个典型CSS的语句：0 r% r* m' R7 a% f p( M8 ]
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
. N. Q8 a, q' H; s% T其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
' K/ U, k w2 o+ v$ k) D" l' K样式声明写在一对大括号"{}"中；
! W9 i4 X! m- l$ C7 SCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； |( x8 F i3 F# \8 _' o
"#FF0000"和"#FFFFFF"是属性的值(value)。5 k% D) I" T3 R6 f- X
, j( F# l4 J9 j J4 O
2.颜色值+ L0 ^ G" o3 D9 Z* N
6 b7 q# ^: {' k* W: D& m* u颜色值可以用RGB值写，例如：
0 s% c( f0 p* v* E
% D( W4 b. o) e' I: \
% U9 R( [1 U3 L" r9 D，也可以用十六进制写，就象上面例子: F5 ]0 i1 ?9 q
' [; t3 p: R$ e4 F" w5 ]
7 ^" S* T6 {, n0 {: p1 b如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
; W4 {! I3 c. e. T2 K0 b" t
' A& p$ E! U t' P3.定义字体
3 V0 \: @! }. V; X4 ]web标准推荐如下字体定义方法
& |$ x& ~& T# N3 m% F4 X; j2 i& }/ r% {4 Z9 Y' |3 a* b6 {
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
5 Y) M3 ~. e9 @8 W( t* M字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； . O3 P0 h/ V+ `7 A- {6 @1 B
Lucida Grande字体适合Mac OS X； Y$ S9 v: G' v$ q# h, y8 z
Verdana字体适合所有的Windows系统； 3 F. S% l9 F/ }) {6 v8 v" g
Lucida适合UNIX用户
+ H2 C5 y! Q- y' o% W. g8 S) ~7 T"宋体"适合中文简体用户;
: g, _! b2 x+ `( X, c2 R如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
, ?2 G; G. b5 g6 X
1 D5 i9 y3 M; D6 |/ A7 j/ Z# B4.群选择器
4 v) e, [( ?9 Q0 P" ~" b2 _8 O( e; R/ s
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
& O. _& I# K- I0 [- p) E
6 Q3 f7 r$ A- f3 M p, td, li { font-size : 12px ; }
4 x9 s5 Y& @' @# j* G2 @就是给li下面的子元素strong定义一个斜体不加粗的样式
1 c! N' z1 r$ s6 n1 ^2 m: D% ` W: U. Y7 f1 T9 g) l2 {8 e
6.id选择器
5 [/ x4 S Q! t6 z r; l
0 [. d% y- b3 e% ~用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
" L3 p3 G. }9 [ x6 D5 t- M( p1 {
/ n$ n! @# C- E" m然后在样式表里这样定义： ]5 p) i0 V6 l! }( A
" O5 u* ^- K' n: }& U. I; F7 J/ E
3 V# `. s, W! q } a9 Q
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。3 |) q7 d) n# t8 u0 P. [9 }' L& s
9 A F5 x# o |, Yid选择器也同样支持派生，例如：
: i( ~; a2 Y/ A' J+ w% R#menubar p { text-align : right; margin-top : 10px; }
$ O2 k% U( F: u$ _这个方法主要用来定义层和那些比较复杂，有多个派生的元素。, l* t" z1 {* B( h8 D
' y( d( V& c( z, R2 @" P6 p9 \- r6.类别选择器: q/ W6 o" d3 `
* a3 d" w- E8 w: G% W
在CSS里用一个点开头表示类别选择器定义，例如：, {0 r9 W' n0 `' ^3 P9 R( }
.14px {color : #f60 ;font-size:14px ;}
8 u, j o$ z6 H2 S4 w% e9 G0 G9 M" v2 ], J- b+ @( w0 w/ `3 p
在页面中，用class="类别名"的方法调用：8 y- }5 b5 h- ^/ F, E- X0 t
<span class="14px">14px大小的字体</span>
8 F4 h% j- z( L9 R0 {: M/ q: y. F% i* X a
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
) J7 O; k5 @. g' a, l* J
" P; C4 j; h6 \+ a9 s7.定义链接的样式! q; B5 b j( r0 ~- B6 o& y$ n
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
, e4 _$ Y9 d& q3 }3 za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 g4 p9 T+ w. v' @; R" C7 f) La:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* Z/ p) q# \& _0 s- u; s7 J* U) S
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
+ K$ R' x% ~+ V" X; Ca:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% [: Q/ J3 w: W" E5 g: D# Y6 _
) n/ h9 p1 d! g" ]. t+ U8 z以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
