|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。/ \; q8 P; S8 t* C" ?
& X3 m/ H# }! B0 g4 Q) H1.基本语法规范& g8 P, u' R: y( i( j' y7 g1 A
分析一个典型CSS的语句：( }7 }! v' |" A6 Z3 V
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 1 K2 N' f6 M! |& x; ]
样式声明写在一对大括号"{}"中； 9 ^8 C- `( {: M) a7 ~' }0 v
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
& h. V3 H0 I! ~0 ~"#FF0000"和"#FFFFFF"是属性的值(value)。
I% k$ p) e+ v* w9 H
: C7 g# U' N* h6 M& x2.颜色值
( b. a! i* z0 h( ?! e( T1 A/ g( g/ U$ f O9 Q- `3 o- P4 n& x0 y
颜色值可以用RGB值写，例如：* F1 ^: m7 ?: z2 z' ]1 v
5 E" m% Z! B" x% N/ e
5 P, |+ y5 e; D3 R，也可以用十六进制写，就象上面例子
% k( W) ^! c0 g$ X* D! f9 R1 |
! j9 Q- k" V1 x3 }5 | j& G- B% z* X1 z8 k# T" ]
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
4 X% s0 I" W) h y, J8 w" B9 R% a, p, o1 g! A8 O
3.定义字体
4 K" r3 E/ q S4 _: iweb标准推荐如下字体定义方法
& ?" p1 @: Y. R( t) Q, @" ]
. b$ |: }/ R7 F$ N" m+ Rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
/ [; A5 w5 L( _1 l7 S! {2 R$ h字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
0 e, r, d/ y6 X/ [. ~Lucida Grande字体适合Mac OS X； 4 e/ O! e A% c/ \ g/ W* k6 r+ ?
Verdana字体适合所有的Windows系统；
1 J# u0 Q0 H5 L- W" [Lucida适合UNIX用户
7 t' g7 ^% W2 b+ K6 B"宋体"适合中文简体用户; 8 `9 N% O) a5 U
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
( X3 Z$ W* a6 v) ]) y
0 [! ]! e) s! |3 |9 E4.群选择器% \0 }' z# y/ D- d) ]
8 c' b. }% X# f% j1 F/ |1 X当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
, S+ v) x0 l! C
/ n- G. Q' b- t' @ p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
0 z" i% b0 C9 w/ G) ~
( D3 ]2 t8 B+ ^4 } d6.id选择器1 u8 p/ |. ]- V+ |7 o4 V
. i+ e9 [$ k0 \; P/ R
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
" W; N! {1 j( ?( J# U7 o8 b" J% C3 s. W' T! O
" Z5 e+ s/ v& c( P7 N/ q* \
然后在样式表里这样定义：
% d# U8 s8 n9 L: k
& c% R u) n" }; i D' d: O" l* n: ~3 i5 e. v; D
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 t6 j* o/ x s$ r其中"menubar"是你自己定义的id名称。注意在前面加"#"号。) F* E5 [& f+ @* h) ^. R- _
- `0 C$ P# Y3 Y0 b d3 n V1 \id选择器也同样支持派生，例如：
" x: a0 ?) X& j, A( y& U- a t#menubar p { text-align : right; margin-top : 10px; }
$ X4 e- S4 _2 j/ x( [ x; W这个方法主要用来定义层和那些比较复杂，有多个派生的元素。& N$ o) ^% K! B7 Z; z
1 T, [( B2 C$ l( `) r, _5 y; T6.类别选择器- o) |. `) C9 ^6 S! i: V
' x3 |* u0 M1 g, Q* c9 }+ e
在CSS里用一个点开头表示类别选择器定义，例如：/ D. ~/ S+ j5 Y7 H( S
.14px {color : #f60 ;font-size:14px ;}
; z+ ]# i' t( U w
0 `/ n, k/ \6 t9 }5 M, E& u v在页面中，用class="类别名"的方法调用：
6 K2 T; z) h' H3 X<span class="14px">14px大小的字体</span>
( d" |9 W9 ~& G9 |这个方法比较简单灵活，可以随时根据页面需要新建和删除。
& u) G0 |- H& V) H
c! V0 j; n% x! w! M' J. g9 h" N7.定义链接的样式( ]4 O( U3 Y, x7 B. z
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
; u1 Q1 t5 |" h6 `a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* m4 R+ f8 E+ i! L
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}$ c n% E8 T8 o& J! l* @+ l' O4 D
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
/ V' _: J# ~4 H La:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! ~+ H1 P; B5 Q B
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
