|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。: P. _) D+ }0 V4 V2 O
1 {0 C) E* r5 p5 H1.基本语法规范
' j8 m% Q4 z5 ]: a分析一个典型CSS的语句：( f( n* y8 I) _5 I
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' O+ a0 H2 Y1 k, K: ~ k5 D其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
9 m# S( y7 _ P; P$ c样式声明写在一对大括号"{}"中； 6 W! [7 \: X" w, s' ?
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
4 B4 E* e; d6 i, _5 s. t/ }. b"#FF0000"和"#FFFFFF"是属性的值(value)。
3 A/ J: n: W* V& D( h2 R+ T/ Q0 R( t9 x2 x
2.颜色值5 B& }; p% s( G- ~) k* s
; q& \+ W, J, Y" z1 Y' ^' v
颜色值可以用RGB值写，例如：7 C* Y7 ], [6 w3 y; V( E! k
; h, @; [5 P% y7 c
8 K- C6 g5 Y8 v2 t, z3 v$ i
，也可以用十六进制写，就象上面例子5 }, F8 u1 ?, o0 j8 E3 s( S4 w
( _- v3 P+ S8 W7 k$ C( ^4 n
! B( g6 W3 |& \6 N: f如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
2 u( L k# w, u! i4 b7 t6 S9 N/ E- a
2 i, ^7 ~! I. m& r3.定义字体3 B: s: B: h; w7 M; L* ^- ?! K
web标准推荐如下字体定义方法
& f) G4 R" F& m: `7 C8 U) B% W, s V o3 J6 u. q, o% R
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
$ s2 i% N% ^, e/ f. o7 |字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； - F! @9 R! s* U/ r: q+ u. q+ @) y2 W
Lucida Grande字体适合Mac OS X；
6 J; a1 D0 |! E4 C5 A# qVerdana字体适合所有的Windows系统； ! ^% `) a' b* _$ g
Lucida适合UNIX用户
8 t/ ~7 k8 J$ {; C+ R"宋体"适合中文简体用户;
# \% x$ ?+ T) c) {6 _如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
) F6 E( M1 E- X2 H
* C4 @( E- G! g& d4.群选择器/ B0 `# { d! L2 U3 W Q, H
+ l O( f6 N; j' Z: `/ Q* N* U# I1 f当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
/ R6 v$ i5 Z" e6 G3 W- R3 l# t" W G& G
p, td, li { font-size : 12px ; }
# l' Y" A6 Z' V就是给li下面的子元素strong定义一个斜体不加粗的样式# U! p! a9 g2 i% a
- c3 R' g* n/ B: \
6.id选择器
8 t/ i/ v2 ^5 G9 S" d* j/ ^, C+ ?! E& n0 V. s
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- g) ` y. W% O: v9 n3 T$ C, K0 b, i- C2 E4 ?& _
: n+ X; g; I# H2 m3 i- t. R' e
然后在样式表里这样定义：
; q! C: I$ x6 T3 N/ |9 p$ u
* ~6 L) x0 p% G! s4 G. n
' _ Y q. K% C( ?* a3 W#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。" S: Y: B( E/ w3 c( N
6 a9 S7 A+ E4 C0 M* Y9 nid选择器也同样支持派生，例如：' G: @3 ^8 Y- e9 I( b9 t
#menubar p { text-align : right; margin-top : 10px; }
3 [( ]$ l; g# C7 m# C4 r/ b这个方法主要用来定义层和那些比较复杂，有多个派生的元素。8 f# U4 {& F. k" p
8 y* ~& l, B! Q$ B6.类别选择器0 \* O9 h' r6 F6 f
- X8 n7 }" u3 P& F3 S在CSS里用一个点开头表示类别选择器定义，例如：
5 Y4 n& f( S6 U( N% V.14px {color : #f60 ;font-size:14px ;}
' F! y7 J# l6 }
在页面中，用class="类别名"的方法调用：' s( p M' {8 c( Y
<span class="14px">14px大小的字体</span>
0 k2 D% x& ]* z9 T0 t* U( b这个方法比较简单灵活，可以随时根据页面需要新建和删除。! E$ ^8 ]2 J; M5 t. q
K9 R0 r1 M. _5 F
7.定义链接的样式
! P2 _, x A& @: RCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
" O- N9 J( f$ A: h/ |/ w- t1 }- m0 |a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
9 J: h, X7 n/ a t8 f& h% Ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 _( q/ `; i4 Z/ W
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
( D) B: n4 i" S: Ma:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% e. X: ^2 o I" M L% k9 e
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
