|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
2 h( [3 X$ Z. ~+ R P
3 m6 u1 r$ Q7 o7 ~( `# ]& q5 j1.基本语法规范
1 V# |& ?0 n! a0 a5 c分析一个典型CSS的语句:
' L* A4 [: q! z5 {p {COLOR:#FF0000;BACKGROUND:#FFFFFF} / M, D! j. O0 G
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 5 B/ M9 X7 k6 x+ f0 Y9 {2 p
样式声明写在一对大括号"{}"中;
+ Z8 ]: H" A$ FCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; - @4 y* t. Q2 m
"#FF0000"和"#FFFFFF"是属性的值(value)。
9 x, R! q# x# |- l; T
( n0 [9 f1 S% ]$ @2.颜色值! L* U/ @/ ~, n5 D
, [6 f9 e2 V7 J颜色值可以用RGB值写,例如:
! {% o% [$ S! o, L! {+ O6 z% w& l/ E% T0 L: r, i, |6 n
7 Z9 r0 ?% F6 m: ^$ D! ^,也可以用十六进制写,就象上面例子
; z6 ]9 C$ \- a/ c: E% W- N$ b, t
% Y5 d. D R" d$ Q9 d9 W3 _
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。 [3 O6 x: F/ z8 k* d" o2 H
7 N; B0 v7 _/ a) e3.定义字体9 P& ?- L* }7 d* Y5 d
web标准推荐如下字体定义方法- V# Z9 R$ ?' h& {" u B
5 ~, f: ?/ P) l; L8 \" Gbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
7 H8 D5 \% Y7 _( t4 f3 x字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
2 _/ u* w8 ]) H3 N$ S% O' P/ ]Lucida Grande字体适合Mac OS X; - C7 M- U7 Q- {% b, U+ |0 s
Verdana字体适合所有的Windows系统;
: ~% P8 F4 |& f9 dLucida适合UNIX用户 1 o5 D/ R( c$ v( Z; }
"宋体"适合中文简体用户;
$ _4 x# h3 |& Q如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;3 b% Q; U7 Y' m9 x
! J/ @ Q7 _% {; j4 u
4.群选择器
1 g) u3 H: K& g: n( Y( C/ }6 b+ N! Q) Y' p. b
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
8 N' M O1 S/ l% u T5 [+ F' k' N
5 Z& S2 h. M; |& y/ s p, td, li { font-size : 12px ; } . y( n* A8 z, J1 j' k8 i/ O
就是给li下面的子元素strong定义一个斜体不加粗的样式
9 a, B* `- V" m6 z2 M6 D* o) g: H) ^$ ?- _5 W5 d" \/ p
6.id选择器* i# h7 \: I1 ^/ M" M
. b6 D( I; d8 \& O, S4 G
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
% R' x4 w' Y/ Z+ B4 z, ]" `) f2 \& x& m9 n" I( h
, `8 m- W) I5 J# F% L; u+ T& q4 c
然后在样式表里这样定义:
+ E, n5 y, v# K. n P
& z: X0 v$ v4 a% I/ N7 E; ~4 Q* J" o1 n) Y9 A8 }; ~
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
4 ?& _, U! A4 V F- R) r其中"menubar"是你自己定义的id名称。注意在前面加"#"号。+ Z) W- B9 D1 q9 s2 h. s& h$ f
5 ]' D% f( k, K+ z6 J2 Q m, ?id选择器也同样支持派生,例如:
+ z+ F# E I; E#menubar p { text-align : right; margin-top : 10px; }
( B( O3 _5 m- m这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6 g( h5 ~$ \) y. X1 L, }: B1 D1 d. \9 L( B/ z7 g
6.类别选择器
3 s1 m! p- f2 \# o ~ F1 f0 g2 O+ P
$ v7 n. A( ^$ \) ]5 B( t在CSS里用一个点开头表示类别选择器定义,例如:1 X8 i/ r5 \, |7 [% A! W+ k. V
.14px {color : #f60 ;font-size:14px ;}
: |2 B& I+ K- `: @0 ]6 v3 T3 b* B, y; G% X% e8 _
在页面中,用class="类别名"的方法调用:) @& W$ a4 `3 ~7 v
<span class="14px">14px大小的字体</span>
5 R9 I$ x) I1 @0 c! E! v5 G$ v, h$ j! I- i0 i
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
0 E5 {% ?8 j1 z( f1 a/ c; A6 \
) X7 u. |, w9 X7.定义链接的样式
: q6 q' K9 w/ w6 i" @- p* NCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:5 V! @! d" s7 k* B# x# k0 j
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# B4 |$ o4 R3 ]/ Ta:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* c/ a _4 D& V, B' C1 a
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( ^0 L7 A, b# H' s/ l, {
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
$ ~6 }& t& C$ C' s6 f6 U* h+ q% r
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|