|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。) E6 j' o5 W J
, p) y/ T; ~! b0 R% P
1.基本语法规范5 c+ I; M4 D. A3 ?5 c3 v {: Y
分析一个典型CSS的语句：& `2 X! W' F" i5 i4 M; c' v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
( @; o) }6 u, ^; m) [; M; }其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
) {- e0 I* l$ z8 o% j+ S样式声明写在一对大括号"{}"中；
$ s m8 B) V8 h# o% `, gCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； % t( ^4 v2 r" L8 h# ]5 |. j
"#FF0000"和"#FFFFFF"是属性的值(value)。% x2 J5 R! b3 ^/ b+ ~4 C
* v9 G% p- k- @6 r1 j2.颜色值
9 }' n; ?* n' H, f+ s/ S
% M/ E8 X. N3 R% \0 M" @2 t8 q1 F颜色值可以用RGB值写，例如：- j" j8 `# p: \) `
) L, z" _* o( j1 j! ^
, j" v( g% P9 G' s+ N，也可以用十六进制写，就象上面例子2 }$ D3 K) x6 v( f
3 l4 B$ p2 v( Y5 U. l, C
{' G/ {7 }! x3 j9 b4 c$ _
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。6 U( A' j* i0 O# G$ [# d) M) O
7 Y* @) A( Z3 d% ^
3.定义字体. b& v( Y& H+ e }+ ?
web标准推荐如下字体定义方法7 Q, k6 O2 B( o2 u
- K" R3 e4 \1 B8 W" H
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: K+ S9 r; T* z) T" P9 h. x字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
* h3 m, F5 P* s) R& C0 \Lucida Grande字体适合Mac OS X；
, U3 g! I8 G: s0 C4 t3 a8 e) L1 YVerdana字体适合所有的Windows系统；
" o) @- }% A, D( rLucida适合UNIX用户 3 S$ Y, v- e; G
"宋体"适合中文简体用户;
. \; q5 {# I" O- x如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;! n# q/ f. W; t9 a8 G }' d
; j8 L# K; K7 B) h2 [* K! ~& D
4.群选择器
5 d/ t0 U/ a- ~# M/ w4 Q: F6 W' k( W) `6 o3 J/ k/ u
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
* O1 q8 U+ X1 D1 U* \; P+ u' @( G5 H! v8 U- [8 |9 W% W
p, td, li { font-size : 12px ; }
! y9 \, ]5 ]5 c2 Y: q7 n# U就是给li下面的子元素strong定义一个斜体不加粗的样式: i3 D* y+ X; V$ ~
( C6 v' I: m5 F7 z5 }0 T; O! B
6.id选择器
$ n, \9 a$ u( w8 h- g! |( a
! A+ A2 m% P+ ^; y2 Y# W用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层3 d! L7 ?" A; L9 b* C) {
7 W6 H# ^ W3 D$ O
% |3 c) ~2 H" ^* `9 m1 a3 P) ^然后在样式表里这样定义：- \! R9 ^2 I4 k6 \
: q/ A3 @* |9 `, l k" k; h- ~
! ]9 ]0 o% e4 B+ K. t6 Y j7 x#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( G5 j" @, J4 h& z8 J5 o& `$ B其中"menubar"是你自己定义的id名称。注意在前面加"#"号。/ b/ ?- I L( i
. n. N5 l, @1 jid选择器也同样支持派生，例如：- p1 N2 i0 G$ ]4 c3 a! [
#menubar p { text-align : right; margin-top : 10px; }
- p: C1 L, F9 |这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
1 d5 U, Y8 `. u8 t) X8 a# W7 t+ x. N; r- c
6.类别选择器: G1 Q6 \6 H8 Y& j# G; P: P# D
5 J/ ^8 |* a; b% e在CSS里用一个点开头表示类别选择器定义，例如：' n; H+ ^, M" e" H8 T5 O
.14px {color : #f60 ;font-size:14px ;}
1 f+ Y! K* D/ B* v( @# h; Z1 c2 P
在页面中，用class="类别名"的方法调用：
2 q& ?- ~+ O. n7 ^' A( c- \' E<span class="14px">14px大小的字体</span>
0 i d2 m. I/ P$ t9 ]5 ]' a# H; n: X
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
. i3 c0 ]8 u7 S3 l! c3 Z2 H
& u% s7 ]. z# G7.定义链接的样式9 M/ X, y ^ \( Y$ @ K8 i3 b, W
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
# o- `& ~ v: k; Ra:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
; I1 f2 c- K' ^* n0 y/ Ta:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. Q9 D9 }$ y. J% x8 @1 Oa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
( m# \) B+ @, ?8 q: f9 X, _8 Da:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
0 E9 u: v* p. z# M+ u5 k0 C1 F
; o6 L) |. i. M以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
