|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。3 z6 U' l3 z+ @: e
8 [9 V9 [$ z4 x/ D s I2 m: U
1.基本语法规范
$ v2 ~2 H+ Q) m: Z分析一个典型CSS的语句：
( D7 z' T" e1 @8 t$ pp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
! ]( n- O5 q. x5 d2 |样式声明写在一对大括号"{}"中； 6 d4 E) X) v/ ^+ r7 ^
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
+ G8 Y& L# n1 M! D% N j2 {0 f"#FF0000"和"#FFFFFF"是属性的值(value)。
! I( h( q* F1 u0 ?! g% X! j" q
0 L! C: ?' o9 r' a5 q5 t" ]2.颜色值
# W1 t( j8 H0 S' I" [( H- V3 v2 n: s: t6 H) u$ P
颜色值可以用RGB值写，例如：
) E' T- v3 M5 {$ d; v
. i8 E. v& @+ X4 A% k& L6 F1 U0 n" A' S0 O* d8 Q/ A
，也可以用十六进制写，就象上面例子1 f. |+ @3 c# q" W" w6 ^# H
8 T. U: n* l5 c& n' r J. {. ^; c# b- i
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。3 q; a. a9 E- R; \* t$ `
% r) C, W0 m1 I2 {
3.定义字体/ z: x& U! E# u2 y; [- x! P
web标准推荐如下字体定义方法" w4 b# p2 n1 h y" |
/ l' b3 A- u; ?* l8 H4 b6 ~
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； h3 c( ?' D' K" u! ^3 ^) G; x- w L
Lucida Grande字体适合Mac OS X；
7 a3 r# _7 ]! N2 i) eVerdana字体适合所有的Windows系统；
+ ]; x: e5 y/ O- M3 oLucida适合UNIX用户 $ `$ b5 B! _: K6 G- ]* Q2 M
"宋体"适合中文简体用户; ; s+ J4 k1 m. L# R d) _
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;1 j% c3 @1 i8 V, n+ h4 o
# V& h+ T& N* e' w3 W
4.群选择器
& O' @2 y* q( Z" A7 H" Q: w; H. |5 p6 k" p% I
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
v6 o6 C6 }/ r K' N' ^4 j5 v$ v: ~; H- q. K6 R
p, td, li { font-size : 12px ; }
, p2 U" i0 N8 U! y) X就是给li下面的子元素strong定义一个斜体不加粗的样式
& z5 a H4 k% b' ?* Z! \/ B, m
+ A; Y/ F& \* G1 d; w6.id选择器
# W& Y' N, | h0 _
5 X2 L$ r6 V- F7 A用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层, { m1 w3 d0 P% T* W0 K) e4 G% k
/ i% A/ q, y L; V& [% I
' f: O! `& w2 T- e! \7 v6 p然后在样式表里这样定义：" S1 Q: _, B& F$ I' R/ P+ n! r! P
\' H$ v* X' `- e/ V
: M6 h& D$ x/ G( s- K" ?8 C- v
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 X/ ^# e" ?% D/ d h" {, t其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
3 G# ]6 G6 r$ B: F e. z; }! Z6 J3 p* q- B0 o3 o* @9 m
id选择器也同样支持派生，例如：
4 R3 H- h; j" W: @ k#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
& O% [8 ?* Q t. w8 ]0 ]
; V2 ]- M$ [/ E% P6.类别选择器& g H$ n% C; i- }0 x) a
9 R0 p& a, a$ G3 O" o$ `9 B在CSS里用一个点开头表示类别选择器定义，例如：& B. s, J3 n0 P7 E( X' C0 k
.14px {color : #f60 ;font-size:14px ;}
2 \! i( w8 [; r3 A
7 M: S+ B. E/ d在页面中，用class="类别名"的方法调用：7 e4 ]' _+ o2 t1 {5 s6 V
<span class="14px">14px大小的字体</span>
4 G8 M; }$ i# `3 G% |
这个方法比较简单灵活，可以随时根据页面需要新建和删除。/ p& Z8 l$ t, _3 P; o* A8 l8 p* _
) B6 l8 B J7 g. n9 }# o* p
7.定义链接的样式
. G) q% U+ Y7 r. |) oCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
3 h, B8 a1 w0 u& m5 K& qa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}- g% @4 |8 z, T- a: L7 A; ^
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}8 X+ n( M& t9 k$ i$ _: a/ B3 f
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
* J) v% L. e$ k* r6 la:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
" p/ F. C- l+ x- ^- ?- @& A6 Q& E+ m8 X
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
