|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
* X" F6 J) s$ Q1 j$ t* n/ C* ?; V) b+ G4 X5 G
1.基本语法规范
9 ^! O# j2 p. l分析一个典型CSS的语句：; ~6 u% s7 k* p! O" N: u
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
! G4 Y$ z/ V3 z9 G+ p6 J其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
+ V5 y6 e8 V" ?# `& y样式声明写在一对大括号"{}"中；
2 \1 [# o2 K6 e! p# p3 O& ?7 [COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ( Z' v) \' Z* V* s1 V' P% o6 s
"#FF0000"和"#FFFFFF"是属性的值(value)。
& k% K5 S5 d; l) |9 d
* P5 S- u, z$ L3 c0 ^4 H2 B2.颜色值
5 }/ [4 Z1 e0 s9 z$ r; q: `# j- d. n) O8 X( V
颜色值可以用RGB值写，例如：
( j: g; Z0 j- D# G
9 D' T! ? O* x; \7 I) H4 S
- O0 k {4 p, ^+ A. I，也可以用十六进制写，就象上面例子1 T; p4 a5 j$ A/ e; |
4 n' `: M( o5 R5 N$ A6 R `
' \ r- o" d! I9 @/ f$ a
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。7 F3 E) `1 n* B2 E
8 ^9 \" @# g! h8 p" b
3.定义字体
) H: @. Y# n% @) g2 G( D# L; Z9 }3 X* l+ z Uweb标准推荐如下字体定义方法
5 O; _ s' x3 l) I) X& t: ?
$ H" d+ y7 w! H1 k- f! r% Pbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； . G. ]& c: i& o: g
Lucida Grande字体适合Mac OS X； / g- F0 @5 j, D9 I" ^: T
Verdana字体适合所有的Windows系统；
% b; k2 P( C7 M: R+ n* H! HLucida适合UNIX用户
# r9 q; V. U$ D/ h& d. X- }; ]"宋体"适合中文简体用户;
) M3 V8 p+ I# b6 v! ]+ n) B# ]如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;& ?: t9 j* M& ~" F( u4 w
' x$ o P1 j/ M+ }
4.群选择器+ \. t: {3 s( ^! O% \. e. X) q
/ H( c7 N$ \6 D I" _$ {8 B$ x当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
* S A8 ]3 |7 G, ~5 J+ n8 w4 X- }
p, td, li { font-size : 12px ; }
8 j2 L( w5 e- F6 N就是给li下面的子元素strong定义一个斜体不加粗的样式
3 d, U) B) O1 J8 M+ D4 r% c) E+ M) T- ]! D
6.id选择器
. u. Y* s% k2 K* u2 f, x. G! h/ g: S) A9 S3 X6 C
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
1 l* j) V$ `/ Z& |
) v, q' G( Q9 s/ @9 R2 ?* e/ I" b8 i k. X
然后在样式表里这样定义：
! P6 `8 ^. m* y1 x
/ \9 N* T' F, [
. \" A8 W, _) L; w#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
" f. J0 W5 u( o) m+ M0 P其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. A, G- ^3 W* `% z# _3 Q
* w( n# J, y( i: nid选择器也同样支持派生，例如：1 W, m, u( r; D! N
#menubar p { text-align : right; margin-top : 10px; }
L/ a9 X9 i: }7 \$ d' K这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
& n: @3 d( Y& p/ U* M$ @
; j3 d) v ]/ O' W" l6.类别选择器
0 z0 v7 w% _: u: G. B2 A3 z4 @0 U$ o9 J
在CSS里用一个点开头表示类别选择器定义，例如：
, N* ]! `0 ?& p! ~/ X& A( l+ J.14px {color : #f60 ;font-size:14px ;}
3 C( i" j( F: f" ^, n7 H& W2 W V5 }2 P5 t; V* r+ Y
在页面中，用class="类别名"的方法调用：% J) V+ G: h" s! H( L+ \
<span class="14px">14px大小的字体</span>
' b4 S, K0 I8 L, F$ Q* E7 i4 r+ ~- s; o6 F8 ^3 r* L# h8 O
这个方法比较简单灵活，可以随时根据页面需要新建和删除。5 A( q4 g# a0 G- Q# v! q+ U
|% B- T2 l2 b
7.定义链接的样式- h) [( m! F' F* i
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：+ J1 C. V+ T+ w9 W% V9 n
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}% D* f8 c- G/ e s w2 r( m
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! }4 d+ @% P, X5 B/ m; ]a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}7 @( @) Y1 U6 K% `
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! q5 {1 {2 F9 t' M* ?以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
