|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
2 Z, F- N* b v
z2 N( y: V& @2 g: G6 t$ ?1.基本语法规范
6 V# q" T; `% T+ m8 w! c* X8 M; s: B T分析一个典型CSS的语句：) \. A& B9 A) b! }1 x7 v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
7 K* \6 ~ y* w2 l* C样式声明写在一对大括号"{}"中；
, c4 I( `4 o9 k3 `4 ^$ {5 aCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
; O8 C' o% g! ["#FF0000"和"#FFFFFF"是属性的值(value)。
) f0 T# M2 H; u9 L3 S! Z+ C* T$ F! Z) L! G
2.颜色值4 g# X6 R( K8 R6 |5 q; w+ v( v
1 E- x8 _& i6 P1 f m2 a颜色值可以用RGB值写，例如：
3 w+ ~; G. n \# \
6 Z7 y' U/ ]" Q) C
) j$ K7 k8 _( \! ^，也可以用十六进制写，就象上面例子9 d S' I: r5 t3 h
' Z9 E/ p1 A, m- q3 R; o
. Y/ S4 B: ?$ h# j. x+ H如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
4 g0 V6 [6 b" k' f3 h* I* j S1 Q6 N8 q, S) v* b8 M# j
3.定义字体. s; X+ C' O8 u w; h
web标准推荐如下字体定义方法
/ _( e" E' X2 o- j. o6 K; r8 M& ~* l* }6 L+ q/ P6 x
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
8 j. T9 w9 x1 x; X% \0 h! i字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
/ u9 f0 H) d# s" u y. PLucida Grande字体适合Mac OS X； # ^0 O0 R2 [8 D& h1 k% F* H: T; A; L
Verdana字体适合所有的Windows系统；
* l b% n4 E+ w$ `( [Lucida适合UNIX用户
7 d, E+ K. P2 p+ ~"宋体"适合中文简体用户;
! N$ f4 x) t3 g; s& H4 Z# s如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;/ H$ j( Y$ q- e: \9 W9 K
' _9 W+ C7 F$ n4.群选择器$ [* ?( u+ B# G
7 `9 h( A3 @1 K5 z1 D+ T当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
% C" I/ H, ]4 g/ \" v4 Y2 u9 k
; n- J: @7 W0 T$ n/ i p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式: U( I( D& b, D- u, b6 Z
: w! H4 |0 G+ f+ d* y
6.id选择器
7 H }/ e5 H3 x
3 j/ Q) O: X& W4 W2 [2 s! r0 z: E用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层# j7 p2 R) x. i& h9 @# }" U: E
* O; ~0 S% G2 Q; A
3 A9 l* C! k$ I然后在样式表里这样定义：% ^+ U# p% u0 `3 L. D
' b6 G5 _( G/ Z5 D$ m4 ?9 e: }8 h- b) j4 O8 j) _4 \. [
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& a% e8 B5 }4 j. R其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
8 a9 [# H% J9 C' @; O/ i( h
! A* Y9 @$ Z1 y9 a' ?$ s8 Z+ qid选择器也同样支持派生，例如：
1 S% L( U5 t G/ |#menubar p { text-align : right; margin-top : 10px; }
3 [ p6 P4 n3 N8 L9 j" `这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
/ b+ I5 ^; q- V$ e$ F. r5 g" q: _" M/ l: v
6.类别选择器6 q' d, d. h" ?) E! ?
0 p/ z% z: J+ O0 B0 ~2 h在CSS里用一个点开头表示类别选择器定义，例如：
# t: Y u" U2 |3 `$ C# R$ o. F5 Y" U.14px {color : #f60 ;font-size:14px ;}
0 O+ \7 U+ P- H% U( j5 u$ I. \ Q+ Q; \/ E9 s# _; w
在页面中，用class="类别名"的方法调用：1 a% q) P! |* k. h6 j2 N8 R/ }" K
<span class="14px">14px大小的字体</span>
7 L% ^4 D$ o( B
+ Z+ Y; j9 s& h$ T3 v这个方法比较简单灵活，可以随时根据页面需要新建和删除。
( _4 H0 b+ z6 v* q1 u" G5 u2 K# ?2 h9 O) }# M. ~: d, N
7.定义链接的样式 k' s0 V% d8 G, S% N
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
0 {) J- R9 {9 c+ N6 k2 S, _a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}; M/ ?6 ^+ [ s+ A9 g, h% V* J
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
3 B$ y, q+ ~& z9 ]) R7 Da:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 A3 F2 p- c5 j* I; B
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
- O9 T5 h- b4 h+ N R! m) p& ^+ _
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
