|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
, O1 J3 _$ E) Z
- o/ p4 p7 X- R/ M/ Z \$ V6 s- O1.基本语法规范: o$ m7 D! W+ [( y
分析一个典型CSS的语句：5 E0 D" u1 Y8 t! ?+ V
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
, N9 |2 P0 z9 n6 x5 E9 S' _6 M3 h* ~样式声明写在一对大括号"{}"中； 7 J' H: B3 P1 J3 ~4 J- w7 f1 S
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； * }$ ]& S9 r9 g3 ]
"#FF0000"和"#FFFFFF"是属性的值(value)。
3 G0 P& Z6 S- E1 R; A8 i" b, e; a- N9 v2 Z+ m
2.颜色值8 p! @: q8 R) Z( F& j- B: ]! S
" P2 O7 t) e( v- ?; @
颜色值可以用RGB值写，例如：
u0 ?- E, O2 _1 f6 b% y' U* B z9 i7 Z- b* m% c4 H
' }3 V$ {" U5 d，也可以用十六进制写，就象上面例子5 }* f5 e2 `# _$ i
# b7 X/ y; a1 f+ N* p" J) t
( A9 ?. l' \: Y T2 h
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
7 |" O' D* M: D+ b0 e" z$ [0 U) s# r4 D$ w
3.定义字体
0 z7 N: N* j" u$ a0 P; B" Xweb标准推荐如下字体定义方法
. M; {" y* p& i6 _# U
/ U' L: k' e& I* ^. d. H- \4 Jbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
0 ~0 ~- R5 Z+ o. t字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 0 ?: `3 Z8 X: {- Z% Z* N7 W
Lucida Grande字体适合Mac OS X；
3 G* Q; K7 j# Y% Y- GVerdana字体适合所有的Windows系统； % s4 F& `+ G* o: ?
Lucida适合UNIX用户 ) G' X9 S- b) \% b) T3 [/ [+ O
"宋体"适合中文简体用户; ! _7 a; z# d7 w, Q2 E+ }! u! J* o' [: I
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
3 b* e9 Q% I8 Y$ ]9 R, y5 o" D9 k" V% R4 a
4.群选择器- L$ n& X6 E' D) k" q1 a
0 E E3 ~) n# z4 t+ m/ C4 J0 g
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
- O8 D) I- ` T
/ C" X. _) v& n2 e: i# x4 { p, td, li { font-size : 12px ; }
" q' N5 }% O1 d( m" s5 p就是给li下面的子元素strong定义一个斜体不加粗的样式% M/ I0 L* t/ \: |5 u" F
+ y; v; D) g2 O! O$ m. O- o# f5 N
6.id选择器
4 Q" {/ m- f. Z' B
, F* e _4 c# R用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
3 N _; w3 v9 X7 P4 D8 i
& `; P( W8 x! U$ T& ^$ j$ t* Q5 c* S" U
然后在样式表里这样定义：
+ p! g" v* m, q5 ]: x# S$ M0 q$ o- m: O) {1 Q2 ~
' n3 j' R7 T0 x: Q2 b( `: ^; v#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。/ I4 _/ S4 u7 z% m
( n: i2 m1 z- \- `! a; cid选择器也同样支持派生，例如：
8 i7 J8 ^! \+ l E( h#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。 ?' P0 a( L0 s) K! S2 f' g
; ^ q6 y3 x+ n( Q7 |
6.类别选择器
% j4 n( ^, `8 I5 [; s) }/ G' _# A
) J7 p+ L2 e- q8 R% X0 d7 m) N在CSS里用一个点开头表示类别选择器定义，例如：- ]& V; l: I0 W' Y( Q" R' x
.14px {color : #f60 ;font-size:14px ;}
. R! \$ W# u* N6 d在页面中，用class="类别名"的方法调用：
5 L' o6 o7 `% _7 C<span class="14px">14px大小的字体</span>
3 E/ E6 {; m( ^" r& c v/ J这个方法比较简单灵活，可以随时根据页面需要新建和删除。/ J R4 t# O2 F. @3 q$ n9 h
6 }7 \$ J: {' C2 I8 g5 T7.定义链接的样式
4 O1 a' A" q1 {! C" ?# S+ ECSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：, V" m/ N& [5 X9 [9 W
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* f5 W' Y" J6 h$ e, W$ ^- ^
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}( h5 [' O! R g$ l: v: G
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 M$ G; e- Y7 k+ x7 p5 o. y% ja:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; C' K( t2 N" P1 r
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
