|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。+ A# d- E- W3 W. K1 A( w
^! l! O6 v3 w8 ?* U
1.基本语法规范
1 V T$ V/ |, o5 x; A! W& _分析一个典型CSS的语句：
B" S' f7 n+ R# S- o% ~p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
0 |, m/ {6 O- t% c样式声明写在一对大括号"{}"中； 0 x0 {" f( S& G6 d) ?
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 0 s5 {- x+ b. d# D
"#FF0000"和"#FFFFFF"是属性的值(value)。
6 D6 {# ?$ c8 ?2 ]7 \8 C
3 _& e2 ~' V" x) ^8 a! z2.颜色值
9 H, G/ a* i' \( L5 o# M l* y% _ y! N* p8 M: B
颜色值可以用RGB值写，例如：2 f1 l1 N. w/ y0 ~0 @4 h
3 g9 p ~9 H& S0 Y
( M' R! g0 Q& E/ s2 n5 e
，也可以用十六进制写，就象上面例子2 a) T; t. W/ ~( n7 c0 y9 Y. F
# o+ g, m! o2 C# H
: L. C v5 O; z2 Z如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。" T" K% l0 `8 e8 L6 C5 l F. h
9 p7 N9 N$ ?; ^! y# X& j: C& v
3.定义字体
, [, s4 f" ~0 S& h; ~web标准推荐如下字体定义方法* o0 r# c% t4 v8 G
# ?6 W) T- c5 Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； - K+ v! u! k& W! C' U
Lucida Grande字体适合Mac OS X；
l7 Y0 ]- C0 {/ BVerdana字体适合所有的Windows系统； : M- x/ Q" u: q
Lucida适合UNIX用户
6 V( j! S! \0 [' s9 B"宋体"适合中文简体用户;
! O! `( R- k8 x$ D如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;- D! B8 A/ u6 ~- |8 X
$ r8 B% q2 A" @2 J2 g3 x1 K
4.群选择器* L/ C# d" \ D. R9 V* i
' a$ X0 l; y5 u0 u" U
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
t9 d! \# i- m( l1 n( N
+ z( G% L+ b* Z) Y ]) h p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
7 L9 \0 t3 l- D; G6 e" i- w! a6 s* r3 ]8 _! d: F' |7 v) t
6.id选择器3 L) ]5 P3 `- I& N6 O( F3 H
* D G% e9 l$ ]6 n
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层" i( q/ i! s( Q3 G. \, `& a; z, j+ x
) s9 s( T5 F; U8 Q S: A
- G. w! K0 ^4 ]& Z4 A( H2 f( @然后在样式表里这样定义：
Y6 ^3 W, V/ G
& A. F) e' w7 M# ^; Z! i
8 o4 ~, J, T0 b" {7 U1 ~. H3 O1 C5 T#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
4 x- G' q/ p* Y! i其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' v- e% {8 q3 S9 G/ ?" u! ~+ o0 C0 v [& t! x! P
id选择器也同样支持派生，例如：: q7 ~: y) [4 g1 y, D) X; D
#menubar p { text-align : right; margin-top : 10px; }
+ e; a/ Z, E/ N/ Z7 I& ]3 w这个方法主要用来定义层和那些比较复杂，有多个派生的元素。# P5 O7 P+ m2 c4 I
8 S3 P$ _* \* J5 I& }
6.类别选择器7 a/ z' S/ I3 Z0 {' U* O
v1 n m. m2 ^6 K9 V3 M
在CSS里用一个点开头表示类别选择器定义，例如：; \0 l8 y8 Y7 e9 w7 D# Q5 a7 h
.14px {color : #f60 ;font-size:14px ;}
. n v+ n. _0 i4 I2 l: l0 s7 S3 k p$ a
在页面中，用class="类别名"的方法调用：" Q8 Z6 N; k# G, B
<span class="14px">14px大小的字体</span>
4 Y: b3 `* o) _! {
% P5 |, [1 R5 [0 Q4 x% M这个方法比较简单灵活，可以随时根据页面需要新建和删除。 i! b. M/ L3 V. J* \6 X
9 `6 Y3 t7 z, h! W
7.定义链接的样式
1 A8 D. ?: p# e; U8 O6 h% V8 r' O) rCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
$ b. p9 C! e: ` p: G; ga:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
5 t$ a8 \# j( @' ]1 J2 Fa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}; m, ~) O: @% z# r
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
0 O1 A- S" P0 B) X5 Za:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ ]6 l# [4 c5 N( m+ n
! B' X; j. `, T4 p$ {1 Z C" M以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
