|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
" K2 `+ V) j+ U! K: q3 F' z: C
# o& J4 m1 K! f; u3 l9 B& Z1.基本语法规范: J( ?0 z, q; ~1 N9 s$ X7 i
分析一个典型CSS的语句：# ~6 U& B3 |4 c, t. v) G1 g
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
. o9 ^ w& H& y' E5 T6 H6 B其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
% X3 }; g1 y" e# C1 @& _样式声明写在一对大括号"{}"中； 0 z9 [% i/ m# ?+ y
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
' K( x8 z2 S- v# W4 q"#FF0000"和"#FFFFFF"是属性的值(value)。
9 M) ?0 ~5 C3 k: ^5 z! z6 P/ i7 g" U0 m% [ ?
2.颜色值' z/ B& _& j! D) ?; K4 x2 y" o$ q
$ b% O' R5 }, m3 N. n& y; A
颜色值可以用RGB值写，例如：
! q# M' }7 I7 u$ r
& E0 L( H5 Y: i7 _3 Y
8 \4 k& [" d+ x& x. L: ?3 o，也可以用十六进制写，就象上面例子
0 z2 _) z/ {/ j6 b& ^$ g4 l8 T3 R9 v6 R: I e5 \% [
2 V* d- D* |5 @' c7 `# B$ g
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。2 t8 i7 J! ^! f% C7 ?4 J
7 m/ Y/ j6 ^! _' k
3.定义字体
3 N+ e! @- f4 ?2 j/ G( Pweb标准推荐如下字体定义方法
3 r+ f0 v3 ~# R9 P2 \0 p( m
0 e4 p- h: w/ @5 B2 Sbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
% P7 P! |' p+ n* \/ e9 a" Q s字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 3 Y2 H4 ~7 j+ b$ l) h
Lucida Grande字体适合Mac OS X；
9 P7 F, n1 t5 K+ o5 } ^& tVerdana字体适合所有的Windows系统； + z3 S. r+ R9 N
Lucida适合UNIX用户 ?/ n( n( a/ e' j
"宋体"适合中文简体用户;
' U$ O4 a3 m, [" d5 d+ k' K: h: I如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
: T0 U+ b1 Z, H0 L7 V( B0 m" T6 T! y t$ [; b Z& P
4.群选择器
: F8 w, w( b; e& B6 W; f( e4 U) R& o+ A
9 b6 G) M) x0 `/ }当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
1 _9 ^5 ?1 j R1 Z) z# ]- a# K0 T) v! ?7 T& i6 v9 d
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式; t& L1 u8 A! s3 ]2 h! L# L" s
- `5 M- l( ^5 ]. K
6.id选择器+ e% h+ e# W& v" r! `% W
7 g# V* _6 J- y J& z. {# D用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层. Z1 _9 I* }4 D1 M
0 I1 [" `3 p" U2 b' u$ x9 a: M8 N
0 A0 o, h0 ]- H$ ^4 y1 e9 x0 c: B然后在样式表里这样定义：6 j6 v' {6 Y& v4 u2 R
/ X' i4 O* a/ ]3 D' j6 W9 O* M
1 P5 w) U2 w3 M3 m: B#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 d1 l/ t, u" z& a! m6 |其中"menubar"是你自己定义的id名称。注意在前面加"#"号。3 n- @# h) T3 n/ k- `0 s
7 M, \8 c* J4 z( A( Bid选择器也同样支持派生，例如：
8 F9 W+ o$ ~/ o#menubar p { text-align : right; margin-top : 10px; }
" _5 Z5 J# m; Q这个方法主要用来定义层和那些比较复杂，有多个派生的元素。1 x; K, I/ k% ~1 I1 G) |# @. Q
1 c o$ S" h. t9 h: V6.类别选择器
" Q% Z4 Q/ V/ ]' F2 z+ b* {% M) R8 N* _ |8 @3 Z" ^; h' T
在CSS里用一个点开头表示类别选择器定义，例如：
' t2 d ^+ R5 q$ O- `.14px {color : #f60 ;font-size:14px ;}
- ]8 m$ @. v; e在页面中，用class="类别名"的方法调用：( w- L' G# Q' c3 x
<span class="14px">14px大小的字体</span>
! @6 T9 y: j" q5 Q+ P9 c这个方法比较简单灵活，可以随时根据页面需要新建和删除。
D) }) C( z" ]. v5 \6 G
5 p, `) q' W/ `5 N7 a* e7.定义链接的样式" q" j# q; B v1 n, Q( g$ K) N ]
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
: l1 D, u! e5 x5 X3 ea:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 l: i! s5 a- m7 ?3 Z* x! q( T% |a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
3 Y6 k- U" X& Q c; E0 u& a5 a# Y" k) }a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}6 q; m+ d E8 w( [; @
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
, o" y6 D ~" s+ l5 s! p
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
