|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。; \' V% J) a' [" C4 G& m Z- s3 @
8 D7 {6 s: n; Z4 k# D0 k' s/ _" }1.基本语法规范3 n- N9 u: s! k# }( N; Q
分析一个典型CSS的语句：
! H. T1 Q. Y8 ^3 Q; h# ~p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
+ v( {8 O" |, S' h% Q4 G# P其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
" @+ y+ y3 e9 a样式声明写在一对大括号"{}"中；
2 f% k" ~+ N' @( J3 {& e" B/ oCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
" `$ G8 E. Z {" y T"#FF0000"和"#FFFFFF"是属性的值(value)。
6 W) z+ V* j6 A/ ~) R! g8 V$ V0 b- I- G: F B, m/ w; u
2.颜色值
5 n5 ~. }! ]. b, u' l9 |. K4 y% q
颜色值可以用RGB值写，例如：9 i* k* L- w7 |" @
. H) G V9 I) H# g3 |
; ^# d* ~' \3 { y, _6 `" L，也可以用十六进制写，就象上面例子
9 Q9 d* I' `' G/ z" L) K' F& N3 v- s1 s: a- k) m9 C
* a( W) i: A2 }4 B/ |# V3 } K如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
1 l& k& u. G3 U. z2 s* Y6 R' q8 m- E5 a. p0 ?3 x
3.定义字体6 |8 ?' j7 N+ V2 w5 o
web标准推荐如下字体定义方法
: Z; _6 c! c) H) t v5 U( u" K4 ^: D- K, J d/ \6 G+ w0 X5 m
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
7 I7 l: z E! F% r* n" n字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
5 E* ]6 L& t9 {Lucida Grande字体适合Mac OS X；
7 @2 r6 i6 R4 b2 K/ UVerdana字体适合所有的Windows系统； 8 g8 H0 V, a- B" {" k& W5 P5 r& v7 h5 I
Lucida适合UNIX用户 : F# z( i/ i! `. _5 O8 |9 M
"宋体"适合中文简体用户; 4 n; N) i' S, a A8 n! I' {! o
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
4 O" A7 h# j) U1 D( i- e! z
& c# `3 t, Y; i8 x: d% F+ M7 i. o4.群选择器
4 w* i- C( V0 Y- p# X! ~
& F c0 \- l2 G$ G7 `当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：' E% o: W( h2 N# B+ ?8 b/ \% B% R ~
/ K2 w8 B: p1 L/ |2 U
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式) k# y7 K3 R, O2 P% j5 s1 H
6 k A* o" x. j. b: n2 T, v p
6.id选择器
# v2 }9 p& K7 @+ `3 x$ B w
. p8 k& ?# v3 k, o用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
6 Y J6 J+ d& L3 v( o1 T9 }! s' A( X, D& _, E8 Z. Z: ?
5 @( }8 w+ e% b" O( K! a5 g1 n/ \8 f然后在样式表里这样定义：7 y7 V5 [- [! X$ V
. x5 G$ c0 t) E( s6 @
( s# }7 a* k) M1 P% P! Z5 @ C% d#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。' D0 x8 f" K' @: s! d9 g7 W
% E* x0 S1 R9 @: K* B# @
id选择器也同样支持派生，例如：
0 |' S& M6 k: c2 A#menubar p { text-align : right; margin-top : 10px; }
Y; [% _) Q9 r: `( O这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
+ _6 T- C& J' p% o7 O! }7 Y3 W* G! y, z2 @3 w$ z/ P+ y7 I( p3 V
6.类别选择器
$ q6 P* C# d7 _7 l- Z. O. j- w9 o: D; f2 n' `9 |6 n2 q
在CSS里用一个点开头表示类别选择器定义，例如：
( b" ^% t3 V* j& J* @.14px {color : #f60 ;font-size:14px ;}
! \) { m& C6 R7 v$ g7 t) Q3 s( M$ r, R/ p: ~
在页面中，用class="类别名"的方法调用：
3 A+ T6 w. N# n<span class="14px">14px大小的字体</span>
# u$ g/ G* j& ?( }" ?* y
这个方法比较简单灵活，可以随时根据页面需要新建和删除。8 j2 X) g) S; ~4 ^3 k( C
' T0 w; C! R& K U
7.定义链接的样式
?2 C& Y" V* A2 }5 iCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
' d. |7 P2 ?0 W4 La:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
$ D1 j8 S# r% a# Oa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
/ i1 u5 Q# k* p( ja:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
* e( n9 J$ B8 Z6 c# r; z, o# [) Xa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
0 ]3 _: m+ s! I& n" n0 H* p: Q8 ]* o
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
