|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。6 N7 J Y/ Q5 M+ [4 |$ M: @/ g
0 c I9 j2 P1 r1.基本语法规范
& ?3 i% w: p/ @分析一个典型CSS的语句：
) p( S" o; [! N' C$ p: gp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
' _0 [% P! \- l# n( u1 ]样式声明写在一对大括号"{}"中；
/ H) a' ?: [- Z+ }, i/ }! |' FCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 0 m% q, ~6 L3 t* B
"#FF0000"和"#FFFFFF"是属性的值(value)。
/ N" H3 G- D6 b8 H
& b6 }9 K2 ~$ |/ K2.颜色值+ f' c4 b# z) N. o
# _) L4 ]& d( G1 j* s
颜色值可以用RGB值写，例如：
5 D& ^1 v6 O/ n. P, _4 h S" _ n' X N3 N/ V
. j: O4 o- }( a! Z# x+ A，也可以用十六进制写，就象上面例子& H0 w! F* g% f' }
( p, x+ i' ^* S; ]3 e
. B2 }; E- R7 W' [9 [' O& J+ K如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。0 S) D3 V, H, L5 d N
|# w ~5 D3 z, `' y0 R/ M3.定义字体
- ?2 u2 Z6 I9 {, w) t. fweb标准推荐如下字体定义方法
' F- n" M6 H F& f3 t4 {5 ^3 G
! Z( m$ ]8 B/ W$ V [4 Vbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
2 ?" Q* p$ [4 u7 V k" m" r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ; Z! j% u; @1 b$ c1 Z, A
Lucida Grande字体适合Mac OS X； 6 V3 ]# ]+ d% Z* O" @' k
Verdana字体适合所有的Windows系统； * j s6 _2 c7 g+ j5 j( I7 t" i
Lucida适合UNIX用户
* P# v G4 O$ y"宋体"适合中文简体用户; $ C9 D8 Y u' s
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;$ `+ T5 v5 C7 |; m
9 k/ ?, d- j* I9 d0 ^- i, o
4.群选择器
! _- z2 B/ e5 x
0 v$ Z2 g0 L9 S" x当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
" T( I! X+ z A N# M$ o X: I9 ^
8 g* s( W' C# |% v p, td, li { font-size : 12px ; }
" y" u/ z7 S# c- z/ v就是给li下面的子元素strong定义一个斜体不加粗的样式4 ?, _' k9 s+ T- `# h: }! T
" P8 s$ a Y9 z- ^+ C- M, _) W$ F
6.id选择器" j) E, J5 r( O. g8 Y; O
7 Y* R/ Q; [% l8 j; F用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层3 d7 I0 ~0 ~" [0 v
2 E5 g- M- o6 ]' T4 A/ ~. A+ y% Z6 K5 v
( B. ]0 K' Z4 O3 n$ Z1 V
然后在样式表里这样定义：3 E1 l$ v" { k0 X
! [. j7 Q/ d0 t# o0 @! b0 ?* i% V" y! V/ |- `
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。6 W A$ x3 T6 [. K5 j# u. t! R: m
& n" [+ U& R( i! c7 ?id选择器也同样支持派生，例如：
; c* h9 a4 m$ Z, N5 V#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。. K9 j( z1 C4 V- m" ~
, M# w1 H% h: P
6.类别选择器
. {2 C9 I& h( K/ q! U! f/ y9 V' r
在CSS里用一个点开头表示类别选择器定义，例如：
) i' v6 w# r0 c( Y.14px {color : #f60 ;font-size:14px ;}
3 O# Y4 M% E( w9 G4 Q
2 [. N2 A- ~# E6 W在页面中，用class="类别名"的方法调用：
2 Q: x" R; _# u0 e! ~5 z3 ~- [<span class="14px">14px大小的字体</span>
2 E; o/ q) o' L3 `
这个方法比较简单灵活，可以随时根据页面需要新建和删除。8 l6 U) j6 O* L% N+ _
4 R% P C" S d; w& ?% P7.定义链接的样式* l. {, q( m1 A/ j( h4 O
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
* Z: U7 d4 C# K" s. Z$ ra:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}" {+ O- m1 j' [6 ~- w; D
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
- d# z" ^* H, a/ _. s4 D& u+ Za:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
) N5 }* a; S* e& [& I# F/ f5 la:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
- @. @7 i, _5 L以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
