|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。7 Z7 \1 G+ j% u }; w
, Q" W; Q7 l# p$ _" K- F( y3 }
1.基本语法规范
: _" @- \0 n: S5 b6 V分析一个典型CSS的语句：
8 a3 m+ K) |; y7 t0 c! Bp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
, F' S# K6 K! n: V' e! t& q) c- q样式声明写在一对大括号"{}"中；
, c( Y# u" J5 A& xCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
1 R9 l ?( Q' _+ K% T' H1 q7 k"#FF0000"和"#FFFFFF"是属性的值(value)。
; c \* q p' |1 _
9 K/ i1 E& w& z, U- v1 x# o2.颜色值9 ]8 ?( Z0 B8 ^8 K$ g
7 e6 W8 L/ V+ W) d+ k颜色值可以用RGB值写，例如：
$ C$ d) a7 H, E5 H* Z3 F8 ~
( G+ \2 j1 p5 b+ w* D
' A+ W( h2 X4 j，也可以用十六进制写，就象上面例子0 L6 T# x- S1 L
* G6 H: N: B2 Q# V1 h2 {# V8 w! i( R0 |
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
( r( M) x6 E& w; V+ q2 Y5 ~) P- u' J/ u0 S
3.定义字体+ t0 d6 s+ g+ h3 @6 G
web标准推荐如下字体定义方法
! Y9 g$ r7 m1 A; b# l, }2 q
7 k, @7 F& M7 S7 H# Cbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
& G4 M& ]7 S2 h字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； # I2 @; J) t7 V9 b
Lucida Grande字体适合Mac OS X；
) E+ v. V4 ~3 ^4 Y8 e! jVerdana字体适合所有的Windows系统；
7 l3 V3 t2 l u; F9 oLucida适合UNIX用户
% I& A3 k- S; y7 X3 ^"宋体"适合中文简体用户;
' Y1 C, v8 X" q0 ~如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;! z; ?5 Z, n3 P. _3 H
3 Y! _5 P- B! u! a4.群选择器0 ]' [* ^, C1 @
) z0 w. s9 S) x; H% E
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
6 L* x7 u- o6 B5 ] K3 b) \
* C: Z5 l, f0 s' R0 ^+ i0 U p, td, li { font-size : 12px ; }
5 k' I) a( ?4 V9 q1 L( a就是给li下面的子元素strong定义一个斜体不加粗的样式9 U1 ?5 ? I/ ~: A( w( I$ R6 Z
& U0 y/ P- v' }6 B0 n
6.id选择器
- k8 y5 b5 o" Q% u( E' X9 z( _
; d5 L' M- Y, }+ i4 Q用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
: _! W5 n% D: \1 L M8 r: E7 X6 L: c! c2 D
: W# g# r# @9 M! W% ?" |然后在样式表里这样定义：) H0 `; l0 b& ~3 I6 q
: [5 C0 n1 P$ b+ m
/ e2 o9 L/ D3 B
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
) }& {& `' z" G& g# A' X+ K$ T' k6 c& V
id选择器也同样支持派生，例如：
x1 G$ Q0 Q$ ^/ t: h6 E0 @! O#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
* i+ Y Z" R4 e- r' x
( Y/ m- k% W# O6.类别选择器
3 L# x) [( D2 F4 N- T. z. }# w* a2 ?* S' s" A, x
在CSS里用一个点开头表示类别选择器定义，例如：
8 a3 m% j% e) x8 f.14px {color : #f60 ;font-size:14px ;}
7 a4 f( t2 Z$ h/ M. A9 v8 D5 H, {% O( ]; I# ?& I4 R
在页面中，用class="类别名"的方法调用：
. g, i1 u/ M2 e% ~! F- ]# n<span class="14px">14px大小的字体</span>
2 U) }6 B# j) t9 G! ^% ^% \0 a
3 A9 x% }4 C e) p( J+ j/ P这个方法比较简单灵活，可以随时根据页面需要新建和删除。0 J( g/ g6 C) p* b" c) D
" m9 @" o; \% w7 y, ~
7.定义链接的样式' B( d A" \$ E! }# A
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
2 T# k3 `4 R/ N' f# x3 Ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
2 d% X, F2 Q2 va:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
k6 p/ E5 d8 k1 @8 F8 Qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} N7 N5 B* n- W/ J8 }$ k7 B
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% ?# f6 S2 V! M3 Q$ C! ]以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
