|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
9 e: a0 |: b! ~" Y, q& {; _ \: ?+ t# R' \
1.基本语法规范
# C) ?" i7 _* b. w* c. O分析一个典型CSS的语句：
# z7 h% S# M. O4 ~2 pp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
% z* {. X8 i; k4 p. h8 Z其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； / y/ |8 _( b- g/ S5 v, O/ S
样式声明写在一对大括号"{}"中；
2 Z5 A! K, z# B$ F. M" ~% }6 r# iCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
; h7 K3 f9 v7 a& P4 {6 g; f"#FF0000"和"#FFFFFF"是属性的值(value)。
+ D7 ~( V* e$ d }$ _ m+ P7 o5 [2 L8 C
2.颜色值
! Q0 Y( O. Z, }9 W
8 J* Q' O. R |4 q颜色值可以用RGB值写，例如：& m8 }. Y) C% `% J0 n3 \
6 k# w( z* L8 r- a2 N+ O4 v* r2 z# X
' o& S6 ?5 j+ D+ c，也可以用十六进制写，就象上面例子
5 Q. M9 I' P! D" u4 K" x# t; g
+ W. y7 z. T5 C) j7 J% `) l# w) C0 T' @* [
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。1 i6 p/ a5 m z( P# J% w- E
! w1 c: `, j' C! ?3 l3.定义字体
+ F( m9 _4 Q' M( Rweb标准推荐如下字体定义方法( p4 x1 M( l5 D# J }7 X8 ^, s
* C+ {; N4 ~% Z3 ~) F
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* N8 N5 Y; b$ c( w& g% N& {字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 4 s- P1 f" A n
Lucida Grande字体适合Mac OS X； / B6 a! F& H" U& _8 P t
Verdana字体适合所有的Windows系统； 0 x7 A' b3 B2 n& j( i8 Z# p% `: W
Lucida适合UNIX用户
$ c1 [0 R+ K9 f0 v2 F8 _, o3 g' g"宋体"适合中文简体用户;
& }. l; p" B$ U% y如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;+ ]2 z7 X, Z# n4 P0 s4 Y
0 h7 S" n" K! p7 g2 k& V4.群选择器( g+ q( f4 u, O, N% c4 m0 R, v
: m& F# W: h9 r$ Z1 ^# }
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
* _5 Q4 O/ ]* ]6 c( |0 ?2 p! a0 T) K# [8 C$ M
p, td, li { font-size : 12px ; }
2 v$ t: G# L" U9 }* w/ U就是给li下面的子元素strong定义一个斜体不加粗的样式
- N- B5 l. o) f+ N! G! r
# j' V1 H2 V1 c X6.id选择器- c# L7 c* L0 M k2 q
2 A/ O5 o' T+ k" n# P1 ~- B用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层7 p, x) ? L; ]0 d' }
; R! w0 @4 M) f' @0 _8 o0 b- r9 p) X: @
然后在样式表里这样定义：- k8 M' Y$ \+ |& S0 p0 |
8 ^5 n0 S; b( P8 X! E0 r3 A
& p8 s2 w# g2 n9 r9 b- y; v#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
5 g8 Y% v+ g/ M. p
7 }! s% x |8 |5 p- bid选择器也同样支持派生，例如：
5 ]2 q: r+ A6 v0 I/ A6 d1 H+ P#menubar p { text-align : right; margin-top : 10px; }
/ k2 t7 a$ ^1 W t: R这个方法主要用来定义层和那些比较复杂，有多个派生的元素。# w( X) ^4 R( n8 l6 d0 E* Y8 A3 G
L9 K6 H: p- D" E0 {: o; c" z/ z3 h6.类别选择器
) [( @3 f# G. a2 L8 V' \) g9 y
在CSS里用一个点开头表示类别选择器定义，例如：
- C. B4 |' D/ F.14px {color : #f60 ;font-size:14px ;}
) C6 |- Z E/ f; a* n- e, x5 C1 \7 {: f% w0 ]- o0 H
在页面中，用class="类别名"的方法调用：
* Q- x# i! D& W<span class="14px">14px大小的字体</span>
) J9 ? b H3 F5 u! M# _* N, J
" S- t5 m; o6 g, c这个方法比较简单灵活，可以随时根据页面需要新建和删除。# B% d) e0 D3 O
9 L' I" r" `3 f7 t: H7.定义链接的样式
5 J7 p8 u6 ^7 ?7 OCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
6 L" B) x1 m' w2 Ga:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}7 D( `) n, j" G
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}# G1 l+ C G r# o* \. a) `. Q
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}+ w, l0 A& {/ d$ M5 i
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 y+ ?, ~0 d3 K* f
- n6 @! D' s+ _; ^4 r; o) {以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
