|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。% w3 I* j- ]% C! g7 u2 J
# D1 @0 X# O* U1 \( h1.基本语法规范. _8 r# L8 w2 s; ^( `% |' o
分析一个典型CSS的语句：8 c. z& s( _: p. {8 ~ z) v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； : [6 d, K8 u ~ e) Z: a
样式声明写在一对大括号"{}"中； ' `/ H" P: ^& V( C1 }" s
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； L" f5 `! U) `4 I% @1 n
"#FF0000"和"#FFFFFF"是属性的值(value)。
7 N1 C# R2 d2 E U- l. ?; M3 O- l. @# j% c. Z
2.颜色值
5 S2 u4 F, y' ]& ]; S
2 Q& x" K' x! M [颜色值可以用RGB值写，例如：
m/ {$ G, n4 i9 o" G+ Z3 G. i [* k% ^( ^, D9 A5 z, y2 ?) q
% K0 y# o0 o# M! p; @% w
，也可以用十六进制写，就象上面例子; \) M: j5 N# F9 [) X c
/ G# [1 d4 k9 u5 }5 Q: c7 v$ m2 d) c3 S) V2 D0 v
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。5 Z( D* @2 D' p, I( q) X2 ^
& C! A* d' j4 @$ n" k: f$ k
3.定义字体8 q5 C, r; y) K
web标准推荐如下字体定义方法1 F$ t5 q0 s9 O) U; r
8 ]# I d1 o* z0 O4 D! cbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； o# Q" [. a1 h7 E- ^* x8 _: }
Lucida Grande字体适合Mac OS X； 3 P1 o- y6 p$ V& n' w% Y1 |& J& m# S
Verdana字体适合所有的Windows系统； + }5 d6 K6 V6 |$ g ^' V4 Y
Lucida适合UNIX用户 9 m. z2 t! e8 Z5 t
"宋体"适合中文简体用户; $ d# Y* N: y4 j O9 g! b/ Z2 \
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;" ]* h! |6 X/ M$ K
, R: T* p) O/ T2 q7 S5 n9 z
4.群选择器
8 U0 y& H0 C# ~5 M
$ a9 D3 p3 y) {# A. Y3 _: I当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：6 t" b* D! A$ d) d5 m/ F: H& a
V4 k+ c' M- Z" e p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
3 } z2 m3 h5 l1 N3 x0 _1 ]4 [5 b$ R$ R* d
6.id选择器
5 b% O5 Q+ S% I) z5 g8 p6 k
5 a- e ^0 U& O; u. s用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层9 _# Y) b9 `3 [: l
3 p$ F6 s! S* z1 s; _, i! P% r9 n4 E: I" N) c; i
然后在样式表里这样定义：9 [8 j( f: @4 A6 Y
/ ?# N Q8 @# C" Y- b; S
/ d: j; w. {; P( m#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
. b; C' Q U9 ?9 t其中"menubar"是你自己定义的id名称。注意在前面加"#"号。2 q$ y) v0 Y0 G. \% B
, \1 o7 p. i+ s. l
id选择器也同样支持派生，例如：# J5 U+ }; c9 s8 h
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
& D/ I, C" i4 b7 m9 V& T0 g5 B$ c* q
6.类别选择器
" L+ Z6 I8 |# d0 c O- I- H
2 O7 ]2 h1 K% X$ L/ L3 ]7 o在CSS里用一个点开头表示类别选择器定义，例如：2 z7 e* N; [1 | h, l* l
.14px {color : #f60 ;font-size:14px ;}
K" q; E$ T2 P3 |3 v6 _4 d6 W; d: ~* H) w# h$ P7 [: P' C" s) ~
在页面中，用class="类别名"的方法调用：
2 O9 U# K0 L* l! }4 K$ L9 A2 J<span class="14px">14px大小的字体</span>
. u+ a3 q7 N, o- {3 W# a
& ^ P" k% u# r" V9 m/ s这个方法比较简单灵活，可以随时根据页面需要新建和删除。
# A. Y+ r3 d, _4 L' d4 S, m
: W* E. h8 o+ U) f; }. `7.定义链接的样式
+ i9 X% z) J- ^# h; _CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
( B0 r: ?! T4 E6 H& u( q$ A; K" Da:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}/ E5 Y" Y+ n3 L; e
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
' v9 `( Z: ], I: t$ fa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}1 |2 G; {9 F7 W+ ?6 h! O( B
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ Z: y% Z. {, j1 P
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
