|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
5 v9 n% B* S+ ~& Y: Z! X3 i1 s
/ F* q5 G* N! [; z) ~' l, x5 E1.基本语法规范
) s2 X' S9 U Z, o! }分析一个典型CSS的语句:
: b7 f8 E- g) L. @( jp {COLOR:#FF0000;BACKGROUND:#FFFFFF} ! x- q1 a1 a4 [5 `
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 1 @& u% w: O+ {3 k: k5 J
样式声明写在一对大括号"{}"中;
' @4 @- c0 f' \% y0 P( LCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
3 E0 F" ~* N2 x4 ]: n"#FF0000"和"#FFFFFF"是属性的值(value)。 _( n" h1 b$ f2 Z b3 }8 p6 j
# d( R; P. ?: p2 m& C, F
2.颜色值6 [5 I* u* U% ]+ i3 B G) W
9 ^ |; i6 L, C1 m6 a3 X+ v颜色值可以用RGB值写,例如: ~( W7 }% u: V7 q3 ~( [+ }5 n# d/ Z
# `3 O" h$ T* x4 B
( O8 |6 }, S5 d# f. o,也可以用十六进制写,就象上面例子
/ E" B0 m. T; r3 f0 w! d* d9 O5 h. Y# H) I, E @' i
; d; ^/ o$ i! e, a4 F: Q1 ~
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。/ P# W, n- F, V
& F; k# @; \; ?3 G' K3.定义字体% p$ R) A5 V5 V6 `8 E4 s
web标准推荐如下字体定义方法3 C2 v f2 T+ k6 g" ?
& j2 b$ ]3 \0 W9 B% [7 Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 5 v. M% k4 X4 N- |/ i% [: F
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ) k2 e8 X7 l1 ?9 S" \3 E. H- e
Lucida Grande字体适合Mac OS X;
7 ~/ j9 ^4 H1 ]0 QVerdana字体适合所有的Windows系统;
) X# c0 {( V4 {Lucida适合UNIX用户 ! [. F7 [. I( S! V4 K2 p
"宋体"适合中文简体用户; 7 ]% B, F7 r t4 C0 X$ l+ f$ i/ e
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
" y' G2 l" w) ^. G1 r# r6 C; v
! I, b D9 }$ ]( c& D; S9 N4.群选择器- }7 ~$ _3 z- G
2 G$ n5 c3 ?! z0 E8 B7 v% L6 B K当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:- w1 x2 F; Q0 [7 U& J1 t9 f- }* h: v
' {$ i# |/ n( S$ T" z
p, td, li { font-size : 12px ; } " c, t9 G, `; h
就是给li下面的子元素strong定义一个斜体不加粗的样式
* ? Y4 c( F& g/ F1 Y7 ~
$ z0 l9 X ]- M: L6.id选择器
9 ?+ g) C x% r' {2 w1 r# ^4 A5 {5 Y8 L& @
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层) } K; H, d$ L, J% ]' }
% F: w* ~# O A( W$ P
9 a/ s j( K5 H& d& ~然后在样式表里这样定义:
7 s- Z1 y: r+ h9 V- W, D+ q5 i, z& G' X- B, K
2 f& U+ T1 H/ P) Z1 c% }# v; ^' e
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 9 i5 c) k) U! Z7 M0 F
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。' p& \5 P. d- Y- b% A" G0 i+ \$ R
$ F/ t7 A/ s% x/ A. o5 {id选择器也同样支持派生,例如:- Q# o! M) M9 ?( y% x0 c
#menubar p { text-align : right; margin-top : 10px; }
$ i: U& w& q& n9 o' |* \3 ~这个方法主要用来定义层和那些比较复杂,有多个派生的元素。+ T1 a, x, u5 s2 f) y' g3 ?
" L# `% J4 A( U' O( H5 L
6.类别选择器( Z+ F- t9 ]3 f2 V4 M
1 o( ~) m9 B/ R$ \
在CSS里用一个点开头表示类别选择器定义,例如:% Q8 k! {# z5 E5 u
.14px {color : #f60 ;font-size:14px ;} * w' p* d3 u* Z7 q) V. P2 k
k, d7 i+ F7 t/ a! v6 B% R# ]
在页面中,用class="类别名"的方法调用:/ h: x3 N; r9 z( }
<span class="14px">14px大小的字体</span>
/ w- A- x' c/ c& b! k+ E* D2 Y* M
3 W& d1 @! }3 E4 C4 U) Z( V& j. ^4 D这个方法比较简单灵活,可以随时根据页面需要新建和删除。' a1 R9 h3 R' c( e& ]; S! Z% a, {
- P4 Z+ m. T/ N/ p+ A* b1 O
7.定义链接的样式
+ `2 i5 ?+ |2 f3 @* z6 vCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:! O& x: U& E, K7 q2 K$ M/ i
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# H8 h2 S; i! s; o% H# _+ \+ i6 M2 Ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
9 ]# _. `" \: c8 e# |a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}) F5 L: L8 l1 b" k9 s) r& b+ J
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 |$ H& l2 G7 o* c! B# ~5 q) `4 N2 C5 y0 F1 ]; f
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|