|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。, |% d# }% S2 t/ `3 t' B
% B R4 |0 j# m1 q8 g7 D7 L( e3 j
1.基本语法规范" ^) U6 Y6 U; d8 {! ^
分析一个典型CSS的语句：) \ x* B& I+ P' i: v# ?% v& k. O
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
8 S7 H* ?; v5 E0 J4 k其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； ' k, Q, v# i Q1 `1 e0 o
样式声明写在一对大括号"{}"中；
& N. g- {. t2 M1 t/ d+ r; zCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
4 p. ^- p; p, v7 Z+ X3 w6 y"#FF0000"和"#FFFFFF"是属性的值(value)。3 J9 }! K$ E+ M; Z+ a
z1 G2 t+ p' Z( [5 O9 F0 `0 ]
2.颜色值
9 O' C5 q8 T% G
( a6 s. S( d* Y* A/ n5 M' b颜色值可以用RGB值写，例如：
) g4 N1 m7 q' w3 c; D2 Q4 [0 {$ `9 t6 J5 l8 q2 b
+ |$ _4 }( D& t! z3 D* Q3 m& x，也可以用十六进制写，就象上面例子
$ g) R* r9 |" J/ m! a! P6 q. v" K% ]: _6 a+ x( J
. E7 w+ a: V7 e5 J. Y0 C如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。2 X; E5 Q! x& c, n8 m0 h- ~
( L0 R" B, x% {; v" H, I0 e
3.定义字体
; ~/ J1 `: r! v4 d% ]/ n5 @web标准推荐如下字体定义方法
1 @& x% ?3 i( D$ e
! w A" K f! ubody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
# B. Q. x: `: y( j8 T0 u3 {' t字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； / Z" ~2 J* p6 \/ ?9 k5 Z
Lucida Grande字体适合Mac OS X； ' L% m6 V+ H8 `" k" }5 g( w A; o
Verdana字体适合所有的Windows系统； 6 n6 x% Z0 f! |+ t" x
Lucida适合UNIX用户 / Y8 X1 I" `. _! T9 f! |1 h
"宋体"适合中文简体用户; 3 D( d5 f8 [9 q0 r! Q1 P
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
7 l2 w! ]( t: i) ^) z% x5 K9 b% G e8 d1 o" y& P
4.群选择器
6 ^6 ]' C1 }- _. i. C4 j, j1 S7 _6 T- Y ]2 W% B3 b
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
2 k' g W, I$ B* S& ?4 b% ~" x! }8 F4 }
p, td, li { font-size : 12px ; }
8 \; O9 [! k) ]" W' F就是给li下面的子元素strong定义一个斜体不加粗的样式
9 R- O' s. [$ I2 g Q+ U6 P
* K Q4 M" _" A6.id选择器+ P" g5 T/ v. F: i. A r
' \7 Z/ }: I9 E/ x. m* `" i
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层) T! w8 q, a$ |+ j8 a( ~8 H" D! g
% ^+ E# s. Q$ B4 p
. f+ t; W( y$ d然后在样式表里这样定义：( r4 `; G* R# t0 N5 o! k
/ k( ~4 q& s9 e
+ z' A; B8 u: d
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
`6 x6 Q5 m/ s: b6 ^+ R9 ?/ B其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, R2 A1 d0 i" D, u5 S0 K1 f
9 d# u, D, q1 X. M( b" ]3 j& g
id选择器也同样支持派生，例如：
. \' u& {+ H( P- y+ A#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
' n$ S- Z8 { P6 D
0 u6 N0 I& X% D6.类别选择器
5 [7 T9 d6 u% i7 K, }+ @* N7 w0 ^* a5 t8 ^/ `! O, }: u
在CSS里用一个点开头表示类别选择器定义，例如：
$ Z2 D) `% g, K l$ M0 ?) n' K.14px {color : #f60 ;font-size:14px ;}
! v" U- t: @) N& t4 z8 \, X: l0 T
在页面中，用class="类别名"的方法调用：
2 N( I; U- r& \5 W) `2 N<span class="14px">14px大小的字体</span>
; h- a+ `6 e+ y. U' {
这个方法比较简单灵活，可以随时根据页面需要新建和删除。! D; F5 a' z& N i8 @
) h e ~$ G9 [! { M; [
7.定义链接的样式9 y, \9 ` i' m5 ^/ m/ q
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
* b7 X+ ?6 T0 L4 `a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}( m( g' [0 b0 F' t
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
" U$ G0 w& d7 c: V ?% X* Ma:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 b! \) h; U4 D9 r& B- r. M$ M* H7 }a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
( N0 A% ?* \/ P# W$ i
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
