|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。8 \: _- p; C0 H2 a
% H/ \2 c# w7 n7 C t1.基本语法规范
}- Y: a4 ]" g6 Q5 N分析一个典型CSS的语句：
" b2 d' T$ M& Jp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 2 K% j) G* y6 B
样式声明写在一对大括号"{}"中；
* H. l0 ^( }! j* V) @COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 8 |7 }& g& I- l9 w
"#FF0000"和"#FFFFFF"是属性的值(value)。
, F# @0 P# }& |0 X1 i7 c7 ~" b
$ @# Y/ L7 t `2 ^4 i+ t. P) ^: _2.颜色值" W$ w- y2 v+ W: Z2 g
" v3 q0 B3 ]$ E1 D1 ^& l7 w
颜色值可以用RGB值写，例如：% N$ _7 x. Z5 e, x) D
9 i$ O( W U o1 R# y
+ e$ }6 w9 N' I! n5 c# R/ p% n# j
，也可以用十六进制写，就象上面例子
5 _! L9 F% V( @7 B( @, d
: y8 N0 Z1 K' ~( t* {
. V+ O) m1 Y1 Q- ?如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。0 s6 f: E5 T; z0 a
8 o" Z. L6 r! ]" h) z1 m; K9 b
3.定义字体/ p/ `! y: T* U) W3 ~# B2 A" x
web标准推荐如下字体定义方法( G' h' a1 F, y. s. O8 I
T! P+ r2 P! z* z
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
0 m H: R7 S. ^, }# W* }字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
) V! f u# V5 c! b2 n! U) dLucida Grande字体适合Mac OS X；
B; [* p# ?5 aVerdana字体适合所有的Windows系统； 8 z7 X! }* s0 W
Lucida适合UNIX用户
6 B$ r; L: p. L, K( P o"宋体"适合中文简体用户;
$ [7 K: ^2 p2 ~4 J9 D如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;! R$ `/ m9 q# }& t$ m0 V' j4 Y0 w
3 U1 \& s4 N$ i7 u8 m! m' b/ D4.群选择器
7 u1 G9 Q6 S* n. p2 b0 X2 l$ I$ ] A( ?5 H% k1 j8 Z+ E3 S- R
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
1 k0 d) B! ]* y z j" Y6 q) G R& \; B
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式6 U( D9 _7 k0 i
% e( D4 v2 \, x, J2 z0 y, i1 k" R
6.id选择器1 `* N. i5 H9 ^7 _
$ [+ C+ ?4 s0 Y; t0 w( o用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- u `# ] u/ x/ `7 W3 o
Q- D; X0 ?2 s
' v( Q$ s4 A0 `/ u# d6 ]& ?, o然后在样式表里这样定义：9 k; {/ v6 c3 l3 H6 A
8 |0 u( o, p! O* Z8 r& K
9 V. y4 K) b% n: F" |- f) Y
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
- l) D9 d1 K d& V6 l1 V0 \. e$ ?
7 f. H0 b; e: C1 |2 Lid选择器也同样支持派生，例如：
) g% ~9 g, j$ {#menubar p { text-align : right; margin-top : 10px; }
3 A, x: O" C: _2 G' o1 D这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
' t# M. n) A$ r0 j( X& ?0 o7 q% B6 G6 T& P ~) A; y" q
6.类别选择器: R: R) t+ |! r
" c5 J9 w7 _1 V; s3 ~2 P, W6 J
在CSS里用一个点开头表示类别选择器定义，例如：, ~5 t/ a- f/ G9 i2 i A
.14px {color : #f60 ;font-size:14px ;}
& O* M% q' S2 k; U4 Y! Z
在页面中，用class="类别名"的方法调用：8 [0 Z; w9 Z1 e
<span class="14px">14px大小的字体</span>
: E# U" @/ i% B( X' s* g
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
. q* z1 y& S% }4 k7 [/ Y2 B, O
c# w' s3 p! ?2 U. M9 y7 @$ g' c7.定义链接的样式3 S' v( ]& k6 o4 d7 c
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
+ P5 u" ]2 }% ^2 D5 @' Y! k, Qa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
% `8 B1 p. n/ ^& F3 Ya:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
$ o' }4 u) S+ c; }( Q5 d# Na:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& l( Y& V2 R8 n9 s$ ~$ w8 f+ Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
8 K* D4 Q2 q6 w以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
