|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
7 j, G. T2 S( c! G0 v0 G [9 a& A9 m) K7 k3 A: e
1.基本语法规范
, \) G( u4 p) n+ A2 U1 ~分析一个典型CSS的语句：( Z" d' q' k$ n5 g5 |* f9 d: J
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 0 G. Y( M/ x) v/ Z
样式声明写在一对大括号"{}"中；
3 V! w9 O; Z& n9 R6 Z2 V+ j4 OCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
' o" G5 n5 U1 _* Z"#FF0000"和"#FFFFFF"是属性的值(value)。1 ~( I$ `$ B, ^6 G" C2 {9 _5 t/ [
& s( C% E, I, _- s, x- Q! V2.颜色值6 I1 k# o) O6 Q& W6 Q+ Y
" T' d% S' x7 Y6 L颜色值可以用RGB值写，例如：
; t; e- ^. m0 i& l5 X) V/ Q7 H |$ G' w# P6 Y4 Q
) f* w! L. ] f! s. {; j
，也可以用十六进制写，就象上面例子! e, X% G1 T2 q* U( T b, L4 G
6 q c; T0 D* [- `2 ~; `5 x
4 N! X( }- e9 k q) M如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
5 M/ z/ O0 z0 X+ Q
( T* B$ T c/ ~3.定义字体
% @6 `# h$ H" e( B& o5 D' E* Nweb标准推荐如下字体定义方法
( k' [* Z) {/ Q! W3 f( z0 t4 k& Y: h! j, q2 N: P3 o% e
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) x; N; G. Y3 g: J字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； " q9 K$ m) A& [! m' i
Lucida Grande字体适合Mac OS X；
* M+ R7 ]+ d% N2 `) z- ^7 pVerdana字体适合所有的Windows系统； 0 n" K. R w0 c6 Q8 U! z
Lucida适合UNIX用户 $ m+ Q0 ]- ?, o! i5 V% S& T
"宋体"适合中文简体用户; 5 F* p7 p& S) g; u
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;( a9 P1 J% n/ d6 Z7 B. ^
4 }1 |& R. v" R$ o# O c' e4.群选择器/ C! R7 N' s4 \7 s& _- m& Y
( T* \* ~. v& p( \8 [6 F+ o当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：+ p6 g- d4 H4 i
; Q! M' a6 d) B; C P+ v+ m9 g
p, td, li { font-size : 12px ; }
+ o; v) W e4 _) c, B0 M4 a就是给li下面的子元素strong定义一个斜体不加粗的样式
: e4 E5 z3 c6 ^, R+ b0 o' O( x$ |2 b3 s! h" L* w" y4 G8 w
6.id选择器- Q5 S! @5 s" `! J! w& u
* L9 f; Z5 P) }% y
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层) [* b% R J5 o' D
9 r+ L2 H) n; q7 m* P! Q& }8 Q& C1 A- x4 p( F `9 ]7 f
然后在样式表里这样定义：
; H. u: `1 p7 X" F# P' g; d2 m" f3 A6 ~1 X) Q2 V! `: Y3 _- x
% q- b/ r. I" O9 a
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# ?& v J, b* g0 @% Y: [
& o" `- H! I" y [0 a; k% [8 P; f
id选择器也同样支持派生，例如：' ] l2 L2 r9 [6 ]1 b* t0 D0 G# `0 B
#menubar p { text-align : right; margin-top : 10px; }
& ?! @7 x9 r2 T( H$ v; M这个方法主要用来定义层和那些比较复杂，有多个派生的元素。7 R: F# n/ i4 H$ v% F9 H7 H( w) o
9 {/ h$ Z2 C4 w* G7 y6 ?: |- b8 s- }
6.类别选择器
: E/ E0 v6 O, {3 s7 A8 L& R& l
' H0 r- \" [. T在CSS里用一个点开头表示类别选择器定义，例如：
; j) F5 F f9 b" E% x.14px {color : #f60 ;font-size:14px ;}
# ?- h% d0 Q% ^
( s! ^3 Z0 t- v: E在页面中，用class="类别名"的方法调用：! f; B( Y' n" m7 G* l1 [ _
<span class="14px">14px大小的字体</span>
1 J2 a9 H/ u8 o
这个方法比较简单灵活，可以随时根据页面需要新建和删除。7 l( ^4 s$ }& w1 O- t2 Y& r1 G
' x! h- C. F& x
7.定义链接的样式
( c8 Y0 N7 C& l) h r3 ECSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：% k }# {' O& E ]1 P: R
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
2 _4 G5 O) x) j& ~% r9 g, V; ra:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}, F' Q* z- {8 t; }8 M) t$ t+ r
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
8 V. o' Q4 H' v* X8 D6 ^: ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
2 ~1 r! C! R0 j5 E0 P/ Y& o, b2 Z0 _, j+ Z2 f/ p
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
