|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
l8 B6 ~2 D% @6 x; B
* z* z9 X0 ^6 I) P, i/ a1.基本语法规范
: ^2 f- |$ v1 I分析一个典型CSS的语句:
' s: {0 a ?1 @; l9 `p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
3 D; O2 P! k0 c其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
8 ]! R0 C+ }, r2 e样式声明写在一对大括号"{}"中;
& J5 \9 Q, ]2 w- ` I9 M$ G7 `COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 0 P/ z2 v; B+ E3 x4 @: u
"#FF0000"和"#FFFFFF"是属性的值(value)。! |# W' _: }* A8 M
+ \6 T5 o. q1 Q' K$ \
2.颜色值* W( M, y' l2 B( ]. I5 }
' h0 n2 w6 J6 E
颜色值可以用RGB值写,例如:
- s9 @" ^9 l; x7 c( U! y7 V' }
6 j( ~/ h- {: L" g! w7 P) `# Q7 Q U' X* m7 \6 Q2 d
,也可以用十六进制写,就象上面例子
6 B% ~: y: T9 v0 q u5 S) K+ o5 O+ W: H
% L$ D7 z& ^0 x6 |1 s如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。. V. H5 g; L) m5 f/ V' u
) g" y" t) C h1 V) B
3.定义字体
" }! Y I* ^8 j: a3 F V1 ^web标准推荐如下字体定义方法# I6 i$ Y9 o& u3 o; u2 M+ F! o
1 a, B+ `7 h# Z$ C: C5 w: {- O: Tbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
/ }* }8 m! r4 U/ z0 I: i字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 1 x4 h) f2 l: Y/ E# v' Q
Lucida Grande字体适合Mac OS X;
8 [* s% d$ m8 t' JVerdana字体适合所有的Windows系统;
% e% D+ n/ F5 C. TLucida适合UNIX用户
8 G! J6 d* |6 G& k! E0 t"宋体"适合中文简体用户;
& u3 |& j: Y! N如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;( W1 e* P7 ^. p" f- S
6 ^. |0 E% {- x2 K& d; Q4.群选择器
2 d) V( L% M/ U3 z1 v6 Z7 s6 | f$ a6 @( S: B
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
6 k7 N& d- b4 s D8 F6 `3 H: h$ E! w) ?# L: _/ s& U, t; ]! n
p, td, li { font-size : 12px ; } ; D/ h) _: r) S* \; x
就是给li下面的子元素strong定义一个斜体不加粗的样式4 M; W: ~$ `1 {: @
9 D, }+ Z3 w! l4 v6 h. P6 H6.id选择器 A/ [; T3 }4 i# E1 W2 [
# N3 k9 s) }3 ?( u, \' C# ?用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* z3 E& Y& U. D3 e
1 U9 V7 B! G1 K1 t
9 b5 O4 m8 N& O3 L) g然后在样式表里这样定义:! M4 l9 `" h$ |1 U0 `$ G
2 Q% G2 ]+ x" W: O- k. v. s; L: E+ Z5 ?' x* C0 [1 E
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} * W& Q! M7 Q$ |4 o; y
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# x7 R k0 n: Y1 W& Y) V% O9 E Q
! I* R3 u- V! [" ^1 d" vid选择器也同样支持派生,例如:
5 {0 k4 m2 f0 F#menubar p { text-align : right; margin-top : 10px; }
. r1 `! `& |2 ^$ D {- _这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
3 e1 P! D- Z K. R' u
: O+ V3 a+ a7 l6 C! |6.类别选择器
" ~* q9 |+ h }( H& {# L% h! C/ m2 |4 T- r9 {
在CSS里用一个点开头表示类别选择器定义,例如:# V7 q& I- O: k) R# m6 Z! g: J
.14px {color : #f60 ;font-size:14px ;} 5 Q0 _6 S. h) H7 }; b
7 J3 H* N$ j3 w( s; d* v# h; X/ y9 |; d& m0 R在页面中,用class="类别名"的方法调用:2 i4 Y/ o/ ~$ p3 s
<span class="14px">14px大小的字体</span>
0 ?) M0 L# d `; A
/ H+ R& |6 U& [- x% `" [这个方法比较简单灵活,可以随时根据页面需要新建和删除。
" i4 L1 r0 s9 V% V. @- k
4 l# j+ N2 }' N' f0 X7.定义链接的样式1 k+ T, [9 q2 I) }
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 G" D$ [$ b2 ~4 A3 {6 F
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}3 C1 m. u+ C; @ s+ a8 o
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
8 I: @ C5 v3 `- ba:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}% r4 w3 e( ^- Y9 x6 \6 z
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 3 t; \# a1 q" \4 H Y8 |8 Z" r; p
. U8 H S- u8 e
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|