|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。- A7 F" y1 X, v9 K. J9 Y
! W2 H8 n, [, k' ]1.基本语法规范
% P* O4 S* `; f! m. V) e分析一个典型CSS的语句:
) J& t: ~4 l8 W) x# `6 op {COLOR:#FF0000;BACKGROUND:#FFFFFF}
9 j9 R' v! D, I3 l其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ' H& t v. H% X# a4 {+ t- B
样式声明写在一对大括号"{}"中; ; z2 z) s% C) U e
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
- X% k6 j A" V"#FF0000"和"#FFFFFF"是属性的值(value)。/ f$ ]7 l% e2 o6 q& u* E' _
5 ?, L6 [% U$ o7 s: e
2.颜色值, k* O8 y4 l5 |$ k4 P
8 D g% c! N; Y颜色值可以用RGB值写,例如:
; f7 W* r6 x7 C1 G2 K$ F2 V; _5 ^1 D$ m! |$ A
5 m$ `# d% r0 A' y, z: s6 H8 l,也可以用十六进制写,就象上面例子: ]4 q7 e: P; k2 B* n
! g7 f9 C2 @/ x! ^7 G" j( M# ~- a5 l. A& f! J
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。( b9 }% {' W6 Q0 s! J- O Y0 {
) l0 {4 m4 P1 n' x; a) W
3.定义字体+ P! m+ k. A' G' u
web标准推荐如下字体定义方法0 c9 B6 o7 n4 X, V9 ~( y, z
; X3 d; x6 ?8 E1 r% }1 w- x
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
1 m2 ~2 Z% n4 S* f0 c3 R, G% f字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
A& ^3 K% Q* T5 K0 y k' z$ E' ULucida Grande字体适合Mac OS X;
3 m6 R4 c9 H: m. D( Z/ OVerdana字体适合所有的Windows系统;
4 @( T. w! l8 r9 k: c gLucida适合UNIX用户
v' y% Z e% e: r; O( X"宋体"适合中文简体用户; 1 b$ q' Q# Q& G
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
8 `6 N, m' E: x+ {6 w5 I+ A/ i E5 i6 t) n
4.群选择器5 X2 u2 H. n; ?8 S
) z, d: T7 X6 g: v0 {4 S" M0 O4 Y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:- }/ i4 V. X, Q! R; U/ ~- f5 \
* B& q# S: E2 y" l* o+ q8 f) V p, td, li { font-size : 12px ; }
! {' y/ B7 \2 x2 r1 b3 V/ q就是给li下面的子元素strong定义一个斜体不加粗的样式4 G& O0 X: o& G$ {2 e% r
$ ]( H. i7 `5 v6.id选择器
$ {+ S' u/ |2 N1 Z: r$ ~5 D, U+ {- _# v: S W0 f# r& _; b
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层- G% D. ]1 i2 q" ^4 z% g
+ x& s4 U- f* F
5 y+ o H% z8 n% ]+ V
然后在样式表里这样定义:# K+ H6 l$ ?" z# B% q0 D( O
6 _# b f2 ?: ] z; B4 y; x( J/ a5 u* W
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} + K8 `% X$ S4 b) D! C
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。1 x/ g* Z0 g$ ~, Q$ _& U; \' p5 h7 e: h
3 R7 T6 ^4 S# Z, z& F2 {id选择器也同样支持派生,例如:
8 Z$ O+ Y* X% W& m+ Q#menubar p { text-align : right; margin-top : 10px; } 4 n* J3 f* z) V! E/ H6 I! r/ }" y
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
- @) m6 A1 \, ~$ g) b* E1 c- q4 I; @0 e( B* w- G4 B) Z! P5 e/ a* E$ C
6.类别选择器
3 n8 `6 x5 |5 h) t
) p/ @4 e1 V! H. k/ U在CSS里用一个点开头表示类别选择器定义,例如:
- o9 T1 e0 n7 K# r" _1 E) [.14px {color : #f60 ;font-size:14px ;} ) q5 B$ ?/ J ] ~5 _5 T3 P) u/ `
L! r" x. x' F% o( B2 M/ v5 @0 z在页面中,用class="类别名"的方法调用:" n) d3 `8 Y5 [0 |6 ^0 P2 [
<span class="14px">14px大小的字体</span> % t7 r9 A: ] e* l) m1 A
# J9 o1 z9 F9 s0 P4 l, c
这个方法比较简单灵活,可以随时根据页面需要新建和删除。" Q) X" K% G0 E5 N
, {, ?* {4 a0 K
7.定义链接的样式/ \6 x9 H2 H( n J7 h4 v! @. E
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
- z* ]# p$ F4 S5 D Ba:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
9 h! ~: B! l u o' Wa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
2 j9 _! F- Y y/ ~& d( M" E4 R! |; p& ?a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& H$ k2 C3 E7 T1 T; k7 `: ~a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
( Z( G8 z* k5 S* q3 [
$ Z/ }& m; _$ M5 v以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|