|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
0 [7 _! c; d+ ?4 @
& V* e$ [3 w7 M. y* C1.基本语法规范
0 u9 [8 `1 T, x% B g" z分析一个典型CSS的语句:4 G( o4 }& e' e) Y1 T
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 5 f0 j% i! C% z V- e# y; o& u+ s, O
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; " {# J. X1 S3 [4 h; ?0 Q& j8 Y
样式声明写在一对大括号"{}"中;
1 H6 V. l- z* x( \/ P; B3 B7 E, e9 LCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
# {" x& y5 W* h V) B G"#FF0000"和"#FFFFFF"是属性的值(value)。
- _" n" m0 a- s! m: h4 |
+ g; V8 n2 z6 e6 E$ E! G. F% [0 B2.颜色值
+ T: p; ?. T- s) K8 ]
1 m& b% m) ?- y( W8 N颜色值可以用RGB值写,例如:2 M, }/ `& L: p
/ |% U" c0 E. z6 i
2 ]! Z4 h) e$ ~$ U5 r,也可以用十六进制写,就象上面例子
- y/ Z2 H2 f2 ?& N0 v, R- @0 f- u- ~
% `! h: @* q; N
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。! t0 \6 {! l- l8 j- }
. O! D6 E' k/ M0 g5 E
3.定义字体8 J2 q* [+ a9 G+ F+ A9 b: b
web标准推荐如下字体定义方法
9 u. Q0 L$ P- ?; P$ V; X+ [$ j. z b3 |' t5 m
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } * v# e. O; F4 h! M4 O; d. m: Z! b
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
% P' f7 w; ~3 D: ]6 l( ULucida Grande字体适合Mac OS X; 0 N9 c7 V; f" v: P6 F. G2 V; t" e
Verdana字体适合所有的Windows系统; 6 t4 f- o& Q; B) j) B1 K9 F& v
Lucida适合UNIX用户 4 L) C1 h5 I" I- \8 O
"宋体"适合中文简体用户;
8 |. g, T0 p. z) Y7 G0 d如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;) s$ H M9 D& j7 {& i0 ]5 i( o) L
p% o8 @8 g0 H* E: G
4.群选择器
- ^* g* h6 j/ t% @$ i. {' A/ f' A# m/ y% i1 F4 i6 Q t
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:4 g6 j' \ i! s" V. W7 T
% u; B' F4 _+ W O5 s! J
p, td, li { font-size : 12px ; } . m. l( O% q. F
就是给li下面的子元素strong定义一个斜体不加粗的样式
# Q) N9 N( p7 f) n0 Z
6 Z" |0 O+ C U6.id选择器
3 _# f& @, E+ }# b
' C, ]! H, J. s4 D1 E$ O V用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层5 e; V7 J- S# f( D
4 D% o4 P" H8 p! y; X6 T9 M# o# G; f
) c6 W- B$ d" ~! j- }然后在样式表里这样定义:
: [" P' u1 B: i& ^4 A1 u6 f* g+ _% G: ]: O' P# M
' R9 |+ {' l9 h
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
1 l0 t# }1 j0 E+ `$ y* n9 @其中"menubar"是你自己定义的id名称。注意在前面加"#"号。* c! {8 R. ^- I# f8 a
' F/ ^3 o1 P+ l+ |' w4 Hid选择器也同样支持派生,例如:- B: k+ r) ^( U0 q$ {; [) g! ]
#menubar p { text-align : right; margin-top : 10px; }
% ?5 M& w) c/ V v- o B1 Y0 u这个方法主要用来定义层和那些比较复杂,有多个派生的元素。$ Y# D) e. {* T2 E' }) s0 s
* q7 G3 k8 k8 \' e' Y$ R% U+ H! a6.类别选择器8 |( r# P6 Y' _0 y" |7 m a8 g% J8 u
9 ?3 ~% Q4 R6 Y/ l! V在CSS里用一个点开头表示类别选择器定义,例如:. a: o. d% x" ]
.14px {color : #f60 ;font-size:14px ;} + g& A' i0 \2 I$ B
. U5 \. Q6 `; Y! c9 x! I7 g在页面中,用class="类别名"的方法调用:+ v' {3 q; |- U/ [7 Y* M7 {/ I
<span class="14px">14px大小的字体</span>
% @: p E% g& I4 ^; O4 E) q* F' F& r# {
这个方法比较简单灵活,可以随时根据页面需要新建和删除。. \ K- }8 W( a3 B7 x, F
3 Q( D- h5 I( s( o" S6 Q
7.定义链接的样式6 w7 v ^: A6 j4 w+ }1 ?
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:# g2 @1 M3 d% _! M
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
& D4 Z& h3 \( b- z+ H# r* y! ra:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 Q5 Q8 W/ L" N% a4 t3 b7 C
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# r, \& ^3 ^! O+ q' }. y. W
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% _7 F8 r5 H: G; W3 @! O$ i; o: h9 O
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|