|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
- c2 y( @9 W# W' `' ^7 M% K/ V g* P% F$ M4 r
1.基本语法规范& V2 R6 d0 @/ u; ~1 c
分析一个典型CSS的语句：2 `! I* X$ t' R+ r& _
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
6 F0 ]7 r2 w/ E/ u7 Q* A# T* s样式声明写在一对大括号"{}"中；
j, O/ ^8 y! n& l# ?% h: iCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
3 P7 ?) b' G! D; J" m"#FF0000"和"#FFFFFF"是属性的值(value)。* W9 R* |$ s0 }6 k: H* b+ ^# m
, q9 N9 N) p. V+ _3 a2.颜色值
- K, I7 u( y% g6 }% h9 x9 ^
$ Z7 S, U1 P$ b$ ~+ Z颜色值可以用RGB值写，例如： I% @4 M1 Z9 l/ h0 {% T7 F
) E! i2 g; J$ Y2 c& w7 @7 }, e* n# o2 b
，也可以用十六进制写，就象上面例子. h9 C! C( i Z" q( ^+ {
4 i; A6 F1 A$ J+ z9 f3 f, W
3 O2 L2 F; r% L0 l$ A1 K' U" G如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
0 {7 l5 k; b- I9 Z" E
1 V7 t. V+ F( V1 n3.定义字体6 q; t6 U$ w% w2 Q4 v5 P; s0 q$ U; N
web标准推荐如下字体定义方法% b4 E6 Q$ {( u, ?
: K# _' f1 J% p; s v% z8 R
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
0 A6 r: e; A8 p# @. R6 w) \ U字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； # `3 I1 D P5 z: O; Y( D
Lucida Grande字体适合Mac OS X； 4 J0 j P/ ^& m) q; j% K
Verdana字体适合所有的Windows系统； # X: v. k: @, C% H
Lucida适合UNIX用户
3 P, e1 x: n0 B" J"宋体"适合中文简体用户; ; m; `- a4 W# ? ^+ S( z
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
, v: _, g. \/ O. T* e1 X0 o: Z
]+ l) d$ I% ~4.群选择器
/ j+ F% N/ X( |* _1 v6 x* x; S- j- T, _4 Q2 x: e
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：' t- {& W3 w% k0 p) Y9 Q- Q x
1 ^6 G8 N! _% b% g' y& ]( t p, td, li { font-size : 12px ; }
1 p" d( G* W% u2 U! ]就是给li下面的子元素strong定义一个斜体不加粗的样式
# A% s, v' Z1 X+ e* |$ n
8 d4 p" Z6 X" Z! n6.id选择器
4 A* E% T; k9 D4 a
5 r, W' [+ q) T3 ]# B! ]用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
k5 I- T0 X& ~& {. E% p( M8 ]
) v( D1 p9 ~6 v
然后在样式表里这样定义：
6 W3 C k" F" T- C
! _9 g3 @5 h; x
; M8 z) m. W' r& j2 _4 L#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
7 `0 g3 ? q8 Y( M9 O D其中"menubar"是你自己定义的id名称。注意在前面加"#"号。% F% @8 \ U0 Q. i/ I* {* g4 z4 a/ `
Z, `3 S$ K, ?+ C- n
id选择器也同样支持派生，例如：
: ~* g/ T# J9 i" i+ |- U0 I#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
6 ~( U. R) e \
5 M' \! I6 v6 x% l' U0 S6.类别选择器
# ~& Q8 N+ L/ G# r
8 k: U2 m' c) G& |# r. w" o* y# t& i在CSS里用一个点开头表示类别选择器定义，例如：
8 t% y9 g: |1 v- B/ f.14px {color : #f60 ;font-size:14px ;}
2 I* E# z3 W9 p/ O
在页面中，用class="类别名"的方法调用：
+ b4 b I9 J6 o+ l5 I1 p<span class="14px">14px大小的字体</span>
/ d4 E& r2 p) Z. f% @0 x+ b) u! v3 i: h
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
, Z$ d# m: h0 h" F
8 L) e) {* B& e9 v1 w1 {! g7.定义链接的样式3 p1 b8 K+ f5 h( F! R0 C- q
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
/ l3 g. l) k- X. N/ ea:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 V. A" p2 o$ O- C7 C$ `; v
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
2 Q# F+ h& S; f/ |. ea:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
9 ]6 H4 Z! N! ba:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 X1 T$ t) b( Y, z) [% z& s+ _/ s$ v2 p C" l
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
