|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。7 Z# ?2 {3 k6 I( { n
% f7 ^/ v1 j, [9 C% d1 G1.基本语法规范
1 p& q- W. f& I* y0 e8 G分析一个典型CSS的语句：
: T# ~# V- ^+ Lp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
' [ l$ M7 Y& y3 l0 F: o样式声明写在一对大括号"{}"中；
+ X/ ~" R( c8 X" V. Z% Z! VCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
) y# Y; |7 q r; c: @/ H9 j ]0 f( Q"#FF0000"和"#FFFFFF"是属性的值(value)。: }9 E" p. f9 Y# [! @. T! ] A6 R
& C- |/ ~! e- l' K- p* b3 n
2.颜色值
) M Z3 O5 m5 s8 v' h
) ~( w; |2 H2 m颜色值可以用RGB值写，例如：$ x) J' m, z4 r4 \
+ C% k3 z8 i3 o
: N* t/ K- v+ s4 i7 g
，也可以用十六进制写，就象上面例子
# X* `: Y1 T: m/ d' |: F7 R" X
! Y2 m/ q, L% |! G; Q; k
/ o A; _2 T0 E2 W9 s& @如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
$ k' N; A' h: V8 _+ M; ]( l# F5 d$ Z. O' n8 K) w& ]
3.定义字体
o b8 T8 {( K" ]web标准推荐如下字体定义方法
4 N' T7 c5 v' t( l+ e! h
' d3 D( V/ j* b# C, R$ T' ibody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； + k! U, y3 V+ S/ a7 r& ?2 u
Lucida Grande字体适合Mac OS X； ( i, d4 o, z7 n8 a
Verdana字体适合所有的Windows系统； 3 `6 `- n. v. R7 h. \3 x) Z
Lucida适合UNIX用户
# r2 T$ L; U% k7 l% h/ T4 D8 ?"宋体"适合中文简体用户;
6 z+ ^% O F' ]( F如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;5 j, \0 w' t4 r# H! k
: _, S1 G3 v& w& H3 i+ N, _4.群选择器
l4 y2 U L" Q ]- ]8 o" _9 x9 |; J( O/ b% x& j' [
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
% C; P+ S7 \0 v0 v8 |# K) O6 C' p. \
p, td, li { font-size : 12px ; }
& u5 ?0 z. }5 u8 H$ I就是给li下面的子元素strong定义一个斜体不加粗的样式 O7 Y4 i9 N J" c& v& [
2 H) A; s' r3 O- D
6.id选择器
5 F+ X! L% R4 u* j1 ?' z/ L# x8 i' c. S. S* ?9 U
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层! i- t1 i1 @- `- k# e0 R8 F
) A% r1 d9 ?" {5 \% C/ k; n
, V F+ N& @: ?然后在样式表里这样定义：
) ]; L& Y+ s) ~8 H2 k- w. e0 ?+ c8 [0 U6 U) T
, \# B2 m, I, a#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 N1 ], G# g6 R8 I0 h* s7 `其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
* j# [ U5 [3 C% }" E7 |! Q
2 m5 h8 \; p& J. qid选择器也同样支持派生，例如： d3 X& Y" ~2 T2 v; g
#menubar p { text-align : right; margin-top : 10px; }
) Q$ r3 c% `- T1 U6 y1 x0 Z这个方法主要用来定义层和那些比较复杂，有多个派生的元素。! D& r8 V+ r: d6 _" z. _) _: L
% N% F& H1 B. m5 ^; v
6.类别选择器
, D* J! D. |8 m! W" G) a3 r% w Z8 U
在CSS里用一个点开头表示类别选择器定义，例如：
- S/ i& b# ?) e( G6 L9 n; }; @* V.14px {color : #f60 ;font-size:14px ;}
. ?0 m4 b1 I% \' b+ ~ |8 Q4 W! D
在页面中，用class="类别名"的方法调用：% A. j! o9 I6 {; E) E
<span class="14px">14px大小的字体</span>
* C8 t( |' H' C: r$ P e/ ^, P3 }+ j
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
" c' z b& {9 j5 J3 S0 J# {2 s
7.定义链接的样式
* e' p/ N6 d/ c; ?$ o% yCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
2 k: E' B7 b9 t0 V1 ja:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}' M5 t' [2 n% n! W/ o, c: q" @# {
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
; U+ S% b1 i" [9 T: e. _- Ba:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& F$ J, S. r* Y) ga:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
, C5 h* P2 }" l& ]/ Q
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
