|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。; l! `5 g9 [) u* f. f7 ~
3 G& t, W. b& b. A( ?1.基本语法规范! n. t( K: E" i( v6 N( U! V
分析一个典型CSS的语句：9 a z5 o9 `* l. V
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1 z, V- \9 B2 M其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
' M( O$ ]# Y3 `8 k7 p样式声明写在一对大括号"{}"中；
3 I' x f. `" f9 [COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 0 j' `! r; c* L0 _. v K; h
"#FF0000"和"#FFFFFF"是属性的值(value)。. J7 ?5 `) ~- T- a
- p j% w2 o+ G! p2.颜色值
. |8 \ O. C: U5 u/ d+ O7 P( i Z1 k) M3 M4 z, ]1 I- s
颜色值可以用RGB值写，例如：
1 ?3 s& t( ^" }0 ?1 p
4 K& e* A% R/ P. H, _! k: u
4 y+ g3 M3 b* A. ]3 L, t，也可以用十六进制写，就象上面例子
* C% b! i) o3 {9 g1 r2 f+ m$ I2 @: f: M2 L/ w
) ]) Y" M* c/ a" t, _# f9 I/ E
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。) @: m+ J" T' G/ O' @
- x! ] v0 X/ o/ [4 ^
3.定义字体1 |+ G U: T7 W. y3 c1 u# P
web标准推荐如下字体定义方法
5 U. q3 L4 I. F, x! z$ S/ B* G+ b+ ^' ]8 }- _8 D3 X
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 1 O/ a4 m0 Q, c$ L* r( D; V( S( w' A
Lucida Grande字体适合Mac OS X； ' ~; d. `6 W; r1 O# O
Verdana字体适合所有的Windows系统； + L# | @1 F3 E) [5 u, @. Y. j, @
Lucida适合UNIX用户
! _$ O5 O& ]0 ~7 v( L& l) R0 }* F; e"宋体"适合中文简体用户;
1 y4 |+ W2 O/ K- Z C7 @" i, \( N, g如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;, a7 [4 b9 p! k
" r/ H2 [% A) T" T) S4.群选择器
8 t- K v% R6 p( d% D! _
/ `( v1 Q# ?- V$ d- m& d0 Q% N当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：6 l/ I7 E) r9 W& r: e) U/ I
7 d" G# ~, D6 f, S! a p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式- K$ Y. j9 t P: `! Z& k
: v g+ s6 I7 y6.id选择器2 I4 t H4 ?& ^) B. v' S* u
1 Y" M6 f; a% a' ]1 N' @
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
$ H, j4 B) d- f& w9 f, K+ f- ]. A! ?# {
: ~' L; a; E8 n- j. m然后在样式表里这样定义：& v+ T/ U" d$ m7 F8 B
2 K: j/ g8 l! ^2 H# E6 U* L
& O' f7 G- z+ p; s
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
# w- g8 m8 T: h8 E' ]; f; X9 T( S9 T! A其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
/ Z# J. |& a' z7 X" E1 E2 o8 P \) \% r5 P. G( ]
id选择器也同样支持派生，例如：4 Y0 \6 r; ^- I% j" n1 @7 ?$ h* m
#menubar p { text-align : right; margin-top : 10px; }
8 w) a$ s" {& z' }$ P5 j1 K这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
; e+ G8 }# j( S5 t/ |
/ e* |# ^ v, Z, X# m$ q. m6.类别选择器
p! u8 q, D4 j. ?4 i( R6 N
" Z% W8 G# r r8 K在CSS里用一个点开头表示类别选择器定义，例如：
" u2 _- z$ z! s* O. D( t0 y6 X.14px {color : #f60 ;font-size:14px ;}
3 j- \ ?6 z% P5 l; K
在页面中，用class="类别名"的方法调用：* W1 n5 t; H) u" i4 X. [
<span class="14px">14px大小的字体</span>
|- j- y& p1 ]' W( O
0 c( V% T" Q: W& [" [& h e这个方法比较简单灵活，可以随时根据页面需要新建和删除。
6 c7 V/ U# C! x
0 y2 R. _0 `; h- M ^7.定义链接的样式
; H) j7 a( F. \/ \CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
: Z4 J, x9 w7 ~! S6 P2 V! Y) Xa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}; m9 i8 g1 h0 \
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
( J( f7 w1 w9 y' U) J' wa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
: L9 o0 g" j! u( b' Ta:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
( O+ ^3 u# }2 v3 L/ Z, S: c3 ]2 b4 ? J; h/ n: `. N
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
