|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。" B( b1 p/ y: ]. H. N
4 g, p$ W) h7 ~+ x3 W+ o1.基本语法规范
7 j* _1 `. o8 X& T4 a; |- j9 A( ^分析一个典型CSS的语句:2 d5 w. V \2 S3 k& v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
3 P0 A8 q3 Q9 g/ V6 Y, C其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
5 Q- a; g5 v7 O样式声明写在一对大括号"{}"中;
/ }' M ^5 i0 r4 RCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 4 ~5 R5 Q. t" _! Y& \
"#FF0000"和"#FFFFFF"是属性的值(value)。
# G; Z' K) I8 Z: K
; }) r0 |7 J% e2.颜色值
) G8 k& l& `' [! {) P. E
+ p3 X: _3 F2 Z9 c" }4 k颜色值可以用RGB值写,例如:& n* {* g; w. m. O* i V, @
$ o9 H/ z( f0 u# e$ q- M/ x0 F; p# Z$ j# J
,也可以用十六进制写,就象上面例子
( O! ^3 \+ ^1 ^+ o! N' j- f* g1 o3 Y* Q3 }
' @/ J- l3 |/ Y6 `/ j- m; d
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。& v' T5 p9 W9 ~
$ ]3 q4 r" T2 F. V$ x; B3.定义字体
+ [6 [! N9 ~/ \- a" E9 ?web标准推荐如下字体定义方法% |8 s" N7 W1 [; M* X+ t
" t' z; m6 J3 O$ O
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 8 M) x$ u; p% h# T8 n
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
; }1 d0 [0 w( _& I& H* |/ {( }Lucida Grande字体适合Mac OS X; . O# B5 h6 r, m/ S
Verdana字体适合所有的Windows系统;
. l' q: A2 T& E1 ?# E3 t4 tLucida适合UNIX用户
' A+ @. x3 e! d% o$ ~; e3 V: A"宋体"适合中文简体用户; $ m( e. H O3 [
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;' r* Y" D) v- g" E& O% ^
4 L* \" n" F5 Z* E0 H$ }9 J- D+ s
4.群选择器8 T1 e* c4 D1 J8 s- v- b" _# E
% G$ M p0 R; U当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:5 g, T: |( z) Y
4 a ~/ i. W$ F# s0 g+ W5 P% p p6 L
p, td, li { font-size : 12px ; } 5 g7 U( [1 }+ k! T; I6 j& M; H
就是给li下面的子元素strong定义一个斜体不加粗的样式
- P, d0 T8 M* u) @
0 p6 Y; g8 H5 T0 I6.id选择器2 u$ s$ Q* z4 m9 U
: u+ R, K8 }' Q& H( F
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
& C* w4 t* ~8 R, @7 m4 N, B, b
1 x8 @; T5 H9 M- W! l
; T( y0 v8 G! U+ j7 t, q2 s然后在样式表里这样定义:: A8 s$ `/ r2 d, v
9 h. M; V8 _+ V
1 f' @- s. r# H* h#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 0 N+ W% A3 y- K6 y
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。9 F3 G' Y3 t3 U
& @& n* q1 Q; q- cid选择器也同样支持派生,例如:
$ H* ~. ^6 Y2 v/ E8 d5 N#menubar p { text-align : right; margin-top : 10px; } " R# m7 j8 q8 j9 D& ]4 C
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。 b& S, i/ ]+ J$ }6 s" I
/ n" F: v# u6 V$ ^. S7 _# h6.类别选择器
& ]& b6 n( @$ R; F2 V# M/ F1 S# }7 w
在CSS里用一个点开头表示类别选择器定义,例如:& z. }3 t4 c* s. r1 u( P, q0 G
.14px {color : #f60 ;font-size:14px ;}
" k9 i( [' N I: z H- T, A- S1 k% @4 ^/ V( j
在页面中,用class="类别名"的方法调用:$ O \* U, Q( |
<span class="14px">14px大小的字体</span>
3 U- ^0 t) o4 }- g
& A6 ^: G5 u$ x% G4 C4 z$ z4 U s4 q这个方法比较简单灵活,可以随时根据页面需要新建和删除。7 L4 L$ @6 i5 c3 |8 R
4 N, b" L& p- x) v5 c/ Y7.定义链接的样式
4 y) e m" ~3 e& K4 I# ECSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
. ~7 D6 x$ S. e4 V. wa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}5 B0 y5 l) r/ i' h
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
r+ w0 r& w xa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 u) N: j/ i& I2 O) T+ o N) j, Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 h) S) g) R5 O6 z. n
" N5 J2 \' Y9 Y2 a% E( I以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|