|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。4 l% U# u, [2 U, d: r8 W
5 X: t* r7 S% ]3 `
1.基本语法规范6 @) R# h& i1 H6 `3 E! ]
分析一个典型CSS的语句:5 \ _* t" \7 Z# Z9 w P, ^8 G
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} , L8 p8 K" u4 m
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
5 f% a2 ~, a7 U样式声明写在一对大括号"{}"中;
# H5 N8 P9 Q( s/ x5 P! ^" FCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 9 W" e3 Z- B0 b$ m9 h0 w% d
"#FF0000"和"#FFFFFF"是属性的值(value)。0 f! v: u! l# u; ^7 Y0 p2 f T
# U2 ]$ {$ F0 M) A& O
2.颜色值
4 ]0 ~* ~" Y }5 X1 b0 d0 d3 o3 P) v
颜色值可以用RGB值写,例如:
, T" _6 z2 l8 a# G* Y8 @
! p3 _+ @2 z' R; z* _5 l4 x/ E3 T5 }7 I* T3 e. ]; `
,也可以用十六进制写,就象上面例子) c6 Z7 @0 H! J& \2 n
# F h4 C7 f. R/ R: p \. E3 [
- R* ?: I6 Z8 z1 l% f如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
S7 a% C! j+ ?' o0 m8 {9 ]; Q) e1 [6 K V% `( v+ y
3.定义字体
4 w- \) W7 b8 @1 g+ R, xweb标准推荐如下字体定义方法5 m( a3 n3 }1 X- {: y
8 {" S: O! q' {& V
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: |& s) f0 F+ V字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - o+ `) V) s0 \9 E. [5 c$ ?
Lucida Grande字体适合Mac OS X;
6 A1 }) j! r+ q: ]; z* @: lVerdana字体适合所有的Windows系统; 5 Q* l3 G( [6 K0 {. Z5 m& V6 `! d
Lucida适合UNIX用户 * B$ }( q) H! J1 w; {: c
"宋体"适合中文简体用户; # } X5 ]- j' }! F
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;8 B" x5 P. W; Q4 l: K
) T" R6 I: G6 ]' T6 s
4.群选择器
+ B1 {( p5 {, h8 Y4 W; ?8 U( q# h: u: s Y6 O* E+ D N
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:! o0 x0 j1 d3 A( F9 t7 K+ }8 J2 H b2 v0 N
1 D( P. b* K/ f3 H6 q
p, td, li { font-size : 12px ; }
: |# Q: s4 R% {就是给li下面的子元素strong定义一个斜体不加粗的样式& _% A, x- X' V% L5 j3 Z
1 W( Z6 o( `# L* _% g6 y. D. \
6.id选择器
5 m: D1 [) ?9 g [0 s
& U$ H0 j. b7 B) F1 }+ f+ u* u用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层/ A: X( e6 U1 ` f5 j, n
+ y7 u& M* O/ K# A) w1 O4 E. x/ K/ y! }1 d' Q. S- B
然后在样式表里这样定义:
% Y q5 r Q- \" o2 Y! J/ Z8 c. Q% K7 ~ T) B
7 j! a" u6 @+ l, l9 o#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( V/ r' ?: m) ~: s$ q0 p9 A其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 N* n3 M& t& A( O1 f3 D8 N
# k9 ]! ~1 L3 R: w/ [id选择器也同样支持派生,例如:
, t, n! I, [* ?! E+ A- L#menubar p { text-align : right; margin-top : 10px; }
* _- E# {0 e, T4 B5 K! L# T这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
2 g4 c+ _9 ?, k& r1 ^' b5 V6 V" P" t% ?- m9 U7 G: M
6.类别选择器1 _+ r& S' ~; Y1 \
& g# N/ B+ g# J% V2 _在CSS里用一个点开头表示类别选择器定义,例如:
' S6 c6 G' Y; S; N# g$ ^; O.14px {color : #f60 ;font-size:14px ;}
3 j& I9 P- B# a. U/ ?! U) [
2 _7 Y: r o: L在页面中,用class="类别名"的方法调用:* N) @8 e$ G3 A, P6 ~
<span class="14px">14px大小的字体</span> / a6 U8 ?6 P7 `+ T
8 F3 [/ {6 B# F! G8 m. F: N
这个方法比较简单灵活,可以随时根据页面需要新建和删除。/ a7 o3 R* J& `1 V
0 l: l+ W/ n3 w5 j5 n" v
7.定义链接的样式
8 ]' q0 i; E" _- F9 o" mCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
% J5 ?# ^. `8 z$ Va:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 G7 _7 `0 C' K+ a7 Ha:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}' T& {; P% ^- ~; q" } V/ c$ z
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
9 J. N/ ?. j7 ]' ga:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 D1 g+ d. U! a; [
3 Z: o8 `; p! e以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|