|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。" K) ^7 J9 X' c" g
& q+ i3 B6 i+ Y% v1.基本语法规范
( D* ^9 `+ m$ @8 k分析一个典型CSS的语句:" g" Z! w4 n2 o3 u- Q% q
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} + q& o( ~, A# B) o3 s& o' D' f
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; - z, t, L% H* U9 O
样式声明写在一对大括号"{}"中; / H) K5 f% m* n2 v' m) ^
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
4 s4 D" ^5 B. K( h! R$ l: c3 J9 ]& u"#FF0000"和"#FFFFFF"是属性的值(value)。
7 L7 _5 d" t1 K U
) U0 Q' l6 E* T9 F2.颜色值2 o! ~+ P9 u. S' [1 R
/ e0 V+ H1 s4 p* v) R
颜色值可以用RGB值写,例如:9 D; G& R o* k4 F% [
* K f% q0 e# c+ ]. ^
. n3 C4 T* O) }( T9 I) {
,也可以用十六进制写,就象上面例子
3 f! W9 ?! j8 h- A) W$ b! p7 |2 i7 [- X# O) |+ {5 ^
8 T% A% V: T6 ?: G: R4 S如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
' b1 Y- N9 v5 T' B
# _2 w5 z5 F3 L/ s- K" k3.定义字体
0 `/ v: v6 q4 cweb标准推荐如下字体定义方法
1 @% I, ~. ?' W( u6 H
, L d# W9 z, d4 fbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) X: W* E8 I4 f! o0 a% j% X字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 d0 p! q/ A+ [3 d
Lucida Grande字体适合Mac OS X;
6 w6 f% T/ b) r/ sVerdana字体适合所有的Windows系统;
2 r2 J& `* o7 ~% N( gLucida适合UNIX用户
0 Q6 p) T8 Z/ }5 \8 ^"宋体"适合中文简体用户;
$ E$ I& v. e6 y- D如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
0 B: M+ a& v$ [& x/ m& K& i: D
. X O) g( q& x' d/ l# e4.群选择器0 _: C8 u9 x2 j5 M' R+ U6 w( ^
7 p# M7 u& ~' E9 U8 b
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:( v8 V! w% h7 D) o* s/ H a
) _+ z) n* {6 o3 L( b7 |0 ] p, td, li { font-size : 12px ; } ; m8 S- I5 N/ k; W0 G- O
就是给li下面的子元素strong定义一个斜体不加粗的样式. h8 Y5 a* u4 k! A; c( e
9 N8 e5 z$ i$ }2 ^, y8 E, B8 Y
6.id选择器
- J- [. Y, j" R& Q" O& w& V" b% Y* ?5 }: @% ?' v6 c
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
/ x3 e, x, Z7 a' v% @2 x G) e2 Y2 E8 t9 k& y
; I6 l5 s5 D! i然后在样式表里这样定义:9 x! i& @4 j2 g) e
' C$ @# l, M! \
X4 ^: s' k, p+ P: R2 y#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} " ~8 w* y/ R5 j
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。1 ]* s! H& S2 ^# L
7 A' i" _4 r2 |, [id选择器也同样支持派生,例如:+ a. U2 U- Z7 T4 C4 q6 f
#menubar p { text-align : right; margin-top : 10px; } ! f' a& ?0 N" m5 ^& W% y& K; U" ?9 }* \
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& P& ]* X6 O. r# W! C/ j7 W
% I% ]5 P' I' c& \6.类别选择器
; a# s' D* C7 ?. V; H* x/ L L3 j4 C
在CSS里用一个点开头表示类别选择器定义,例如:
9 W- M& r; P- ^" i. K: Q.14px {color : #f60 ;font-size:14px ;} + h- Z' v; X0 U4 W9 Y4 N& B& R3 t
5 S# r$ v. a+ k0 ~在页面中,用class="类别名"的方法调用:; k; D7 k1 r* G" j7 N: H2 ]; m
<span class="14px">14px大小的字体</span> 0 `: O9 K2 @2 z ?
y: @2 K; B' l) P( _
这个方法比较简单灵活,可以随时根据页面需要新建和删除。% x: ^0 X" H2 e; o1 V4 \
1 J. L- L" b. h6 R4 X( C$ s0 l& a6 r. d
7.定义链接的样式# M7 n: z9 L0 e
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 e" l. t" Z8 e9 } @ a& H: q
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
. T! z: W0 C' t, r) x+ ma:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}1 L0 ^- l7 v1 W! }7 q9 z
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}9 C4 e$ R* ~, C# {
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 3 b; B9 M) n' |* C5 N
( V2 {/ ^* P$ m$ [! l: A1 j
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|