|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。& R* L/ q) h6 X2 f8 r0 x: p ]9 f x
6 N8 H* v3 B0 `" V& O
1.基本语法规范
# u9 Y9 x. e7 k+ t分析一个典型CSS的语句：
% @# Q* J5 a) [3 D+ T0 Fp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； & i8 h& L9 }% L5 Q8 }
样式声明写在一对大括号"{}"中；
5 A+ d9 R+ s& D. SCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
* A# {# z, g9 ~. r"#FF0000"和"#FFFFFF"是属性的值(value)。. v t. x3 r/ N' p
! @" s: W- x" n+ P( o3 D2.颜色值
9 ]9 t6 K$ K( \) Q2 J) o0 s# ^- a) l0 w
颜色值可以用RGB值写，例如：
3 n' c* N% s- t+ T9 Y5 S
. `7 X2 G, E# d( O2 j |
* g: u0 m: I1 w7 C8 E2 b2 S，也可以用十六进制写，就象上面例子
& |/ ^- ^4 ?+ U* L# n# K* m3 P* x1 |# d
. K2 b! O1 A6 B, m5 S+ ?
# n: r: K' B+ t' E" c/ d9 X# \如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
. i: B+ k! ?& ~% ~! f b8 J/ N( a5 ?
0 k& e3 r Q# L9 ~* q) g3.定义字体7 q0 {$ t# a3 e7 R( y6 f1 U8 X
web标准推荐如下字体定义方法4 B3 x* s, }3 X# c6 u
. t5 m+ \% F! mbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； - r* e5 V6 ?& ]$ b3 H
Lucida Grande字体适合Mac OS X； ) D0 ]* F! y( _* `
Verdana字体适合所有的Windows系统；
$ y( a/ b N7 o7 j- rLucida适合UNIX用户
) [- g$ ~' G7 @& Z"宋体"适合中文简体用户; & L2 n5 M6 y9 b( o/ F9 a& e. r
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
' ?' W3 s) R, b# c: ?$ p$ r9 P0 f, q8 L/ E0 b; e
4.群选择器
* a' t- s) `; h: P+ X7 G& q) U( F* H
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：& X K) e" R: F; K6 ~0 K7 w
! t9 t Z! W$ d+ S
p, td, li { font-size : 12px ; }
' j: t# ~- f- o就是给li下面的子元素strong定义一个斜体不加粗的样式
5 y+ S6 u1 S r; o* g$ W! a
5 n, \' `: ~, m: z$ L+ j6 v" z6.id选择器/ G0 R1 i8 }# W/ I
, U4 M7 _8 K. O' |用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
# E, [/ e7 k0 S$ U- c; o. d2 s3 ^+ Z3 B
. i |( v+ b2 ^$ e w0 t
然后在样式表里这样定义：
+ y) f; P( v. r* z
E7 y5 B, ], t8 x6 Z: u: t9 j. H5 z3 W
9 x& i0 |( H* I1 A5 t) v#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
* w, e Y! v& R" R" W8 X
+ Y9 x9 ~) P. x, Cid选择器也同样支持派生，例如：
7 K$ s" s) J" T# f4 M3 }+ k2 b#menubar p { text-align : right; margin-top : 10px; }
' N) b; B, s4 f这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
- k. W: [: ^4 N; D: F. p5 @: B# f# t' T
! ]2 D! [* Z) B7 ?) O& q) W6.类别选择器) o; T! d$ a$ F7 h: ~
& y3 n4 ?4 t" P3 L; K
在CSS里用一个点开头表示类别选择器定义，例如：
" _; H; D; R- Y- _* D6 v9 O5 n" H.14px {color : #f60 ;font-size:14px ;}
; B# g4 F! g5 J1 F9 D
在页面中，用class="类别名"的方法调用：1 e' c# m3 X9 ^) H8 j3 t
<span class="14px">14px大小的字体</span>
. ]$ v2 W+ t8 [" f
这个方法比较简单灵活，可以随时根据页面需要新建和删除。3 k+ N2 [9 B* i ]# G$ ?
# ~6 o1 U H8 w7.定义链接的样式
5 m, [+ Q; ?! e1 g* V- k2 cCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
8 S. @3 s3 T* X6 `a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 I3 l4 g* Q" p( sa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}; x5 [' Z( {# W& C" }# \! ?
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}% n! y- g" Y- ^' E0 @
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! V7 t! m9 i* H. _. A+ X以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
