|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。! n& W% ?9 a8 e
# R' Q7 }) U0 F& g2 o1.基本语法规范
; j6 R* u# ?: _6 L7 I3 J4 S分析一个典型CSS的语句：
9 k. g! }! M; N5 H) b3 l8 D4 @p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
/ }2 a9 A# ?; u7 t: y3 s; w) i2 |/ t其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
# \+ Q* m6 N; D$ U( L* w样式声明写在一对大括号"{}"中； 8 {2 \( e% l5 Z$ U, B5 m% u( n. j) F# W
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 7 v! A6 U6 G5 z3 l F
"#FF0000"和"#FFFFFF"是属性的值(value)。
# Q! }) {5 R$ Y" i5 I' i3 ^7 w& p/ o2 H9 J
2.颜色值) v& D5 v8 [* i3 W4 @* Q' `: f
8 ?$ z) I0 y8 Q+ I颜色值可以用RGB值写，例如：
5 Y; m$ ~4 i5 ]
/ T' E" h# \. ]8 f& J* R9 ~% H9 e+ v0 _% r8 l* C
，也可以用十六进制写，就象上面例子0 p# p0 y9 C+ r: }3 ^( h: q7 G: s% k
6 d' |5 |4 M( m" \
8 N# e* c' R- _$ x
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
) ^1 B! U0 H, U6 I9 ?* k2 Q2 G
3 S; ?% I" x y' _: o3.定义字体
$ @% S( }0 {# J: \/ z* Z# p% ]8 wweb标准推荐如下字体定义方法& y, @6 Z2 |+ x- [- R
* H/ [' w8 F' F' n' f; j2 rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
( `: p; W3 \+ jLucida Grande字体适合Mac OS X； 6 A+ R+ q4 \! I8 H5 z$ N/ d% j- u
Verdana字体适合所有的Windows系统；
+ V( W; K* ]) W; WLucida适合UNIX用户 $ [. x$ \; D% p, ` l
"宋体"适合中文简体用户;
9 W6 [6 @5 `6 Y7 d4 `0 f7 { u如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;1 |5 x5 \1 `3 r+ |5 H8 N
% c0 i' R t$ y! Z. g* T4.群选择器
: v" e, l; m3 I0 ?0 k2 j& b2 y( x$ o- J6 R5 O( g+ z
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
' F5 D8 b! U- p- r, y
# @+ a, o, N& H6 m p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式- }) N) o/ J, G( K# E
. m; b8 }4 C, Z
6.id选择器7 p! {( I2 q- a" X* ~4 m v
0 U$ N) a2 c# k/ ]
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层: W* M: K- f6 S9 \$ c2 F
: j4 A( ?4 L { s1 X
. [/ X. u- M7 y1 t* {% d. \然后在样式表里这样定义：% R2 k# b2 _9 Y% r7 P
/ J: o: k" H2 M4 b- {+ J
* j2 D$ ?( ^, q0 F#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 \* y- {* V2 T" x
& e( ?3 w1 h1 D( Lid选择器也同样支持派生，例如：! B* W' [9 Z2 ^* A/ V9 x
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
0 Y$ ] Y4 B* Z# x; e8 b! [% N% p& O% R/ A1 X# K& h2 \
6.类别选择器7 w$ a5 c! l6 O8 I% w
, S2 `& G$ t$ r. ^8 v& b0 s# r% o
在CSS里用一个点开头表示类别选择器定义，例如：
9 |; [3 v" u: ]' z.14px {color : #f60 ;font-size:14px ;}
4 _0 l/ o5 K T
在页面中，用class="类别名"的方法调用：
7 Y! K% A* B y8 A9 s+ s: y<span class="14px">14px大小的字体</span>
# K1 t* s/ d {( V; _1 G) H( V9 y5 P, E0 z
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
W8 {1 k" [, |) A* }' A" k
[$ ~6 h7 z2 s' y3 _2 J5 D7.定义链接的样式
1 M5 D$ _( x* a4 ?0 R5 `5 W9 ]* qCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
% p0 ~8 Q' O9 R7 B; e2 v* ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* t& }) g& x D# Z
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. U" @( g2 K f# _6 M3 [a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
( w8 j6 z. Z5 _1 n6 m2 V4 t* ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 ?2 g1 p4 k4 ]* c+ S! ]' Y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
