|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。+ J0 h0 S, ]5 T. L
# T$ E1 b5 ?0 o* D
1.基本语法规范
5 U9 n' C/ K( x. X% b' ^分析一个典型CSS的语句：
' |; M" A+ @; Dp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
8 L/ C- H \4 t, p' U+ r4 c- M/ V, ~3 ]样式声明写在一对大括号"{}"中； 6 G1 i% u! T- l l3 U. f: f: I
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
" n# ^( R1 b; g. q* i. s" m"#FF0000"和"#FFFFFF"是属性的值(value)。
% M( C8 z u% s3 t" S4 R- z/ b/ ^" I4 A9 Z0 p) [
2.颜色值5 u% |* G0 z. w/ l$ l: e* e% T' ^
0 z; S: ^: B; @+ r0 Y- N
颜色值可以用RGB值写，例如：
$ l' v/ F2 V+ b7 ~$ q9 N* w! S9 S$ o- `3 N0 u" |
9 @0 o; y9 H- x2 N1 V' B; r U，也可以用十六进制写，就象上面例子4 \! R* W4 l0 Z6 n# C& Z9 D$ n$ |- E
4 U. G! D1 i; M1 G8 W, \
$ I% P% S4 d: O# V7 d如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。 @( w* e9 b4 j% O a* @" K
7 U# I6 }' r* J' H4 Q7 ?
3.定义字体/ K, Z2 Q! ], E& h
web标准推荐如下字体定义方法
7 u9 B. S8 ^! L0 w: V! Q3 o" C; L6 M+ K4 X1 T5 B: S8 e& c
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
' @' d# J5 U2 _( H* Y% f字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 3 Y9 @+ d$ Y' r
Lucida Grande字体适合Mac OS X；
6 Y; n( w8 A" p( ?Verdana字体适合所有的Windows系统；
" X5 |2 c6 l e' mLucida适合UNIX用户
L1 F* P, _) D1 x) k7 h: F"宋体"适合中文简体用户; 5 \5 y. V/ r% S- A a( ?, S
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;! X5 I: {' u; o3 P; Y
/ Y/ \! ^: C6 Y/ r' O8 ~
4.群选择器. b& W) @5 ?4 T. @& D/ N% T
( D+ S: n2 n0 v" C. f" r. g' j
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：% Z; r3 i+ }5 ?/ Y, H" z+ O2 s" S
4 W7 X! J. @9 l. [5 n( l \ p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
' D7 N; u: p) r: D( i, ^
( w% P s/ G: k/ P6.id选择器
7 F; {7 D ?. i7 i% V! k
7 q; J0 L1 _. \8 V9 y- A7 x用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
4 |( u9 T" @/ I0 T9 L5 m' E. X
, x3 `7 ~, `* ?+ f1 C6 X
0 L5 o7 x- N( b. F" ]然后在样式表里这样定义：
# T5 g" x% O g: q' A
7 k' \7 x' F9 \$ g9 B$ p' N1 s
' O, }& z9 h" m# @/ {+ j: ^#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
9 U/ H( y" J% u5 U& }其中"menubar"是你自己定义的id名称。注意在前面加"#"号。2 R+ X% I U" F5 k
$ i; I, x" s+ v% m+ f/ Y- {id选择器也同样支持派生，例如：
$ B0 V) A |/ G" `. c% b% u0 t& Q#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。9 [% H4 @2 c' u! ^1 w, S4 l
: d+ b$ D( M9 z2 {5 Z: @9 a7 D
6.类别选择器
& q S: ~ p% E b; U P9 p% G; |& D @6 P( \& Q
在CSS里用一个点开头表示类别选择器定义，例如：+ w, d4 r2 x& \1 Y- h8 Z# c; s' F
.14px {color : #f60 ;font-size:14px ;}
: @/ Y8 U: ?3 S \9 |/ C6 D# v
{; L+ [" l9 B1 y: x6 k: ?2 d- ]. p- I在页面中，用class="类别名"的方法调用：) s4 V$ r4 [4 ?' T
<span class="14px">14px大小的字体</span>
5 `% `+ J7 o! P7 ^8 u9 r5 T. W! ~ h$ t* i; t
这个方法比较简单灵活，可以随时根据页面需要新建和删除。- K& j, e8 {& i. W; P0 D5 @5 [6 R
* s- n3 l0 a! E4 Y H2 W9 M7.定义链接的样式
/ |) X* W' t! G9 B7 C [7 D" [CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
9 p' x3 m) [ Y( L( b& Sa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}8 q5 d# @3 Y- D1 z
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
) |: K) Q# k- T i) ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}8 g7 s, k" s3 E; ?9 L
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
' P1 ~5 v$ b" G% V/ E以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
