|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
+ ~. I0 X' o2 m! C+ S
4 z/ |3 X( X+ `3 M, o/ O8 ]1.基本语法规范+ v+ Y7 Z& o3 D1 F
分析一个典型CSS的语句：
8 ~2 A% T9 N3 b. \: h3 S5 l) w, Ip {COLOR:#FF0000;BACKGROUND:#FFFFFF}
+ p2 t; F9 {7 l) c6 o( n8 q1 A其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
8 m3 D! X+ W& A3 [% @* ~& P* b9 t样式声明写在一对大括号"{}"中； 7 V; J9 H6 R, b3 Z
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
4 \- S5 B4 [; K+ o"#FF0000"和"#FFFFFF"是属性的值(value)。7 e1 {- L3 e) h5 {/ ]8 |# m
7 Q3 I% \; d# g# J* b' p6 r0 O
2.颜色值" @. V. x f! F& S
* `* k/ y+ |, \) m1 Z2 m0 H! n6 [
颜色值可以用RGB值写，例如：" J! Q( {% @; L! D: Z
i+ S' o& z9 q6 L& J1 s) U! N
l+ b N1 y) \" S A6 c+ _
，也可以用十六进制写，就象上面例子 O- l' e. P# t; u. J
) N1 A+ x! p! ^" a: _
! y& B/ X5 ?& b) `) {5 P' L如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。& R8 N7 s; }8 ]
- k6 N; h d( [, k- u3.定义字体
& A {* I) y! w7 |4 i8 S/ bweb标准推荐如下字体定义方法" v* X p0 _3 r
7 R/ d( t0 q+ Cbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
^. R# m8 a. F: z. u% F0 H% H- w' gLucida Grande字体适合Mac OS X；
, T0 r5 b/ e: j4 B5 JVerdana字体适合所有的Windows系统； ' b' K: H9 U- r2 q
Lucida适合UNIX用户 % f* O1 o2 u$ V: K' P ]
"宋体"适合中文简体用户;
5 V! E: R" J* x4 v8 ~. J如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
* G% k7 m2 m5 J3 J. B
6 I0 n* `3 {; s8 p! p4 n; E. i5 S4.群选择器
5 v. H6 N& E1 ^! x8 T+ p
n$ E \# ~/ k; u当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
$ U) V v6 b: K1 g
# l w' K1 r. d4 Z! V: ] p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
/ f- [, V R4 c( G
3 d1 Y6 f5 E) |( F6.id选择器% W* L# z4 v9 c4 d7 s* b
" b! h6 s5 w; v% k% C% @1 {用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层+ Z, e6 l2 d" T
- M: ~% Q- h) H
5 f( [8 _. j/ i/ u8 I) L
然后在样式表里这样定义：
8 r9 O4 R3 n9 f3 l$ x$ } J) ~$ |- I
' u# X+ u( | R2 K7 u) a
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
r; S: q0 d* [4 |; ~) O9 Q7 l2 F0 t+ f" [3 `" `; w
id选择器也同样支持派生，例如：7 F$ A" K, c$ Z/ A' b& f. ] }
#menubar p { text-align : right; margin-top : 10px; }
' N3 U6 o) Q, A0 m0 g5 f这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
, W- @0 \- W/ ^' m# V+ ^: z4 \+ q% J' S- ?, O
6.类别选择器
" l+ [1 R$ X6 Q9 g4 E. W. m3 n8 I6 d
& r! d8 c7 H3 z2 k0 Q在CSS里用一个点开头表示类别选择器定义，例如：
' N; m* _. ^: v( b5 s5 z.14px {color : #f60 ;font-size:14px ;}
$ F/ G2 O2 j' U$ c! q$ X/ l' W
在页面中，用class="类别名"的方法调用：! f& M$ z; I+ F8 y% g% y
<span class="14px">14px大小的字体</span>
9 ^2 P5 e2 P& a0 k
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
' s) w6 I4 {- \" R* H( N/ n4 A
: v6 u0 |8 D, r* y7.定义链接的样式; ?4 N# V. c2 O: b7 ^8 |2 Y- Z- R
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
: U4 \, V$ `* y2 c7 s6 ua:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}! w \# C9 N# |! {& f/ w3 r7 ~
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
/ F' K; T8 w0 t" |* a H1 S+ G9 Ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 O$ V! P- V" G' X4 ?+ A5 { I! i/ ~a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
$ v5 Y1 T5 s6 Y2 O/ v0 ~, w
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
