|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。4 a: W+ C6 ?4 J& Q& L. j& s# ?, j
3 v. O2 `+ V4 j. s
1.基本语法规范$ {: ?0 s2 K+ T0 O
分析一个典型CSS的语句:% H5 a' t( n# }! A2 d4 I
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} . N9 D- W: L; k* t" A
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 8 h* A( O2 u3 K7 {; V
样式声明写在一对大括号"{}"中;
" o h. @5 j) H9 n- F; w4 n* d! cCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; - f8 g; f; i( G* b# `
"#FF0000"和"#FFFFFF"是属性的值(value)。! n) _4 {; }- s% j5 r4 Z9 i
/ v& R* C% i Q( \% Z H g2.颜色值
2 m; P4 _9 }9 w3 N
2 _0 H0 `# m( ?# \, b: C颜色值可以用RGB值写,例如:
! p0 B2 t% ]+ E0 q5 v& `8 n8 M+ M j" m
8 v* O6 x. x! O5 {3 g% ?# i,也可以用十六进制写,就象上面例子9 b9 D5 k" }* W0 Q, a
0 }9 k) Y9 J2 O- u- K9 M! _% t4 }
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。) B0 L+ A( L* B. a& X
; V4 D. F6 T& r7 B; k1 b& m
3.定义字体
: ?; v Y0 c, i r" p# X, Vweb标准推荐如下字体定义方法
k \/ _' j' y6 J8 P7 R" m9 z
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) V0 h9 M+ c7 d6 }# N% c字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 6 c. o; F8 j& }' s
Lucida Grande字体适合Mac OS X; . M# A2 W% E C1 `
Verdana字体适合所有的Windows系统;
/ l1 ~0 T4 F1 [- q% VLucida适合UNIX用户
H, `1 h/ }8 S) v, F"宋体"适合中文简体用户; ; ~9 G% O8 e8 U5 w0 f# P k' `, p7 B
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
" x4 t# Q, c5 r8 d- C9 o/ x3 Z( p( E" T& `
4.群选择器
# b0 J, \, I7 T8 {! @: r4 k' Z; X; z
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:0 J- n W8 y$ X. f3 U
9 R8 L! a" M6 W6 z4 L
p, td, li { font-size : 12px ; } 8 F7 n4 w! ^' A
就是给li下面的子元素strong定义一个斜体不加粗的样式; L# V5 J3 S: e# e
- q ?- l% _ ?( ?0 b" I6.id选择器
) V( t# d7 P" J8 O. }% A+ ^6 r) G+ g/ E5 c7 h k
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层% h& j4 r$ x. ]6 ?+ N# Y+ N
- q& s* s r, a+ ~8 c6 M0 M
5 B* h7 M" d9 u然后在样式表里这样定义:
& v) g. _: a8 C4 C$ ], G% i9 L/ l- m$ Q1 o; }/ k
! M3 [, j) q: q& s; R1 O#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} - e/ [) A; x; u2 U( X
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
3 Z5 ^$ R( I8 P [; n' F
/ X- S% e' N" @id选择器也同样支持派生,例如:
6 h$ z! n% w8 [#menubar p { text-align : right; margin-top : 10px; } 3 E7 i9 i% ?: Y9 I9 G
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& Y0 w& {; D0 l/ P) a% f) S- f: k6 b P% w( {
6.类别选择器& T7 r, @; h! q; p3 m
, p7 n& [% ^6 Y4 s& {2 S. Z9 M在CSS里用一个点开头表示类别选择器定义,例如:
/ z! S! m5 Q8 C, W0 n7 J; B, v.14px {color : #f60 ;font-size:14px ;} . s7 U* q" _: b) s0 Y
: J, Z% E9 B: u. b( c% s
在页面中,用class="类别名"的方法调用:
, Z% |* H" ? H) t2 ^<span class="14px">14px大小的字体</span>
( `- k( p9 S' W3 _1 ^; A/ s/ V2 V ]: a+ M }, a' j
这个方法比较简单灵活,可以随时根据页面需要新建和删除。# i4 s7 z/ B W) s
' U- w/ ?0 ?& r! ^7 i V! y7.定义链接的样式1 r, P2 Q ?6 C3 u% V$ @2 [! u' \
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
3 u1 }( q) [; C: L# D; L" Ya:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}5 C# L9 a2 x1 l
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
; L; E, a! Q; T/ l$ Va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}6 k; o* {0 m* B
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ g- d* \1 z% R4 [: ?6 D" S. r# V% V' Y1 m' Z3 o. E: G3 b
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|