|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。* E" e! a0 F8 ?: L
: g3 j3 z: V u9 _: C4 p- e1.基本语法规范- I4 ^0 E# s. v8 D8 c; O3 |. i
分析一个典型CSS的语句：
) K) m' v& w4 t, @4 y+ w! B; Up {COLOR:#FF0000;BACKGROUND:#FFFFFF}
/ d! n g- @; D( o其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； ) o/ p8 ^& c0 l( x/ m4 p* Y0 E
样式声明写在一对大括号"{}"中； # s* x8 _+ |& y& D1 }% s) a
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
* }! I- E' @: d: o"#FF0000"和"#FFFFFF"是属性的值(value)。. ?- I( \, E" N- t; d
7 u' m: ^8 ^! A( _4 I
2.颜色值
7 k- L8 E; R2 s+ Y" L& r1 q; q( b7 j" Q6 U. N
颜色值可以用RGB值写，例如：0 A8 D4 B* t/ n# {
6 k2 m' c- T) R( ~8 A; s9 y) X% y' e$ ^9 B
，也可以用十六进制写，就象上面例子* U: p G( ~9 y3 S+ x5 C) T8 A
: q- K3 }# o, \/ W: [" n
( K; R# S u* U6 J
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。! A" x; B8 U, R& y' `5 O
) Y3 b1 `7 f" [ P3.定义字体9 p7 K# y' \0 O e
web标准推荐如下字体定义方法) X/ w; w% S! e1 C' h: q A
7 w0 ~# v$ U( ?" u* }7 Obody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 8 a! I. ^( A; M/ b+ B# r, n5 S0 Z
Lucida Grande字体适合Mac OS X；
+ s% h& x1 K2 B) z6 u' N7 e. `3 ]Verdana字体适合所有的Windows系统；
0 [# M0 a0 z$ |' L& E& dLucida适合UNIX用户
( |- |. l/ P. A"宋体"适合中文简体用户; ! p5 r# R; \/ H T- {
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
4 Q2 w& Y' G4 e {/ M
7 L& F6 O& o" a% Q# q9 q4.群选择器, ]3 b. w1 @; j7 S: r- |- B
8 S/ W% g+ v' F, w* h" R
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
5 l X6 F/ Q3 H, p/ D- W- y& A& ]# D4 y4 R i; F
p, td, li { font-size : 12px ; }
[9 y5 i8 m+ c( E* g就是给li下面的子元素strong定义一个斜体不加粗的样式
( b1 s( X" f: a+ y s( {. f0 `* H
% m" L8 [3 a& N6.id选择器
0 Q9 N) C" F8 i& }* @
; r1 D9 n0 T& e; Z9 y用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层 U7 z: ?8 g0 x0 `
0 Q9 C" h/ f/ v
4 M2 ]9 o8 r9 `5 O
然后在样式表里这样定义：" i b( R) p" `6 ]
/ @. g* N2 H9 @4 C8 e1 ^, ~, _1 q
[5 Q+ }+ G' M, }( V/ w" `$ D. {
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
3 A6 _$ S$ q$ s- A" x! Z其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 I* G8 U% s) j% u4 v; k4 D. m& J5 K
- Q0 V" f2 v, l9 `; X3 d$ }; S
id选择器也同样支持派生，例如：
/ d/ P0 J1 U: o- E4 w5 Z#menubar p { text-align : right; margin-top : 10px; }
9 q# w* x% d, E/ Z; U: P这个方法主要用来定义层和那些比较复杂，有多个派生的元素。: L9 `6 o- O8 U7 h C, T/ Y
+ |# V. U, o7 i- p% H3 k6.类别选择器/ x! C& [ S" `3 o% g
: D+ z" P* r$ E8 |0 Z在CSS里用一个点开头表示类别选择器定义，例如：3 e4 U% W2 d% X# k: a
.14px {color : #f60 ;font-size:14px ;}
2 K' |$ K( b# W. o" M, f) I
在页面中，用class="类别名"的方法调用：( J6 u1 H$ p- Z9 t) U
<span class="14px">14px大小的字体</span>
. c I( w) H' ~& W- [% X& B. L! U( @) s3 v* d# q
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
2 y% W8 S' Z/ |
( m3 ]4 x2 [, R* z0 l) ^. o9 @7 T3 D7.定义链接的样式$ | \) r. f" A+ w0 A! e# G
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：) x) z) H+ h' ^. g, v1 T
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}3 u; V! S+ S; L" I' v0 [: o6 s# m
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 ^ {- `' J, n' E9 y3 W% M
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}: N+ _$ O0 `/ o
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
- q$ r) b: S1 B2 z7 } Y1 s( [% ?* m
" A8 p/ x3 ?" Y9 D6 y4 z" I2 i! F5 C以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
