|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。8 H* _/ E. P+ v1 A
" F% [+ ?& S7 [$ B$ n1.基本语法规范) N; I% c+ h5 T, B4 f4 ?
分析一个典型CSS的语句:: ]% \, ]8 `/ I
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
# i5 c5 d7 Y1 z/ k+ W! g2 l其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
x. j! ~ G* K. @: r+ O( K样式声明写在一对大括号"{}"中; ; I9 H. ?. b/ g
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
+ l& L' V5 V2 ?& y2 f; p% n"#FF0000"和"#FFFFFF"是属性的值(value)。$ p4 z+ j) j! I0 A0 j
5 I3 O$ ^/ y: \6 K5 R) d ~
2.颜色值
* P" Z& M. |% Y9 Q
) Y4 A8 s- s' C$ Y颜色值可以用RGB值写,例如:
/ p; Y$ q+ X: e5 S. S
# H& f. A) [ v/ u4 E+ Z/ [
8 A3 Z5 O8 w' z* R& C2 O8 L! x,也可以用十六进制写,就象上面例子 ?& V" r& i7 k
0 k% E: w3 t/ u6 s0 z/ L
/ A j) b. h! p/ O- b1 k( `如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
2 Y; g/ j, B; x; `5 t$ S8 Q4 g. \& r% r+ O! M2 C9 }7 O
3.定义字体
* g% E, o' U0 e3 ~! [web标准推荐如下字体定义方法, H: L g+ j3 x& ~+ J+ j' e% @
6 P. L( L% `3 j5 o- y" n6 G; x
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } * h+ l; s2 E2 o/ \; A6 b
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ' u' W9 y1 m; ]" R3 b9 L \
Lucida Grande字体适合Mac OS X;
, O8 e5 }% {+ K2 B# s* V) [Verdana字体适合所有的Windows系统;
- R' O1 S. g5 |) g/ l6 h. XLucida适合UNIX用户 ( D" q' b, q% u6 O
"宋体"适合中文简体用户;
) j6 S0 y9 p0 E6 D如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
- V, Q* B" f6 C z. V1 |: _* X* W# O/ r* ?) @- T
4.群选择器
1 @9 a' Q, D7 z* z) j% ]2 N/ i) c, u N/ Z
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
+ H; B2 ]4 w2 N: o5 e. ^. z8 P( U& I: z4 I8 M/ {4 v" e }
p, td, li { font-size : 12px ; }
5 Z$ b( n$ r7 Y+ g就是给li下面的子元素strong定义一个斜体不加粗的样式1 M6 B7 P) K8 ~' t9 B3 J' t
& }' X& O: |% N: y! S6.id选择器8 v% K$ t5 y- q0 e4 y5 @
9 I& h0 `1 E; Q; o
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
' v7 O, z* e. ?
6 j3 L% [/ s8 M& x, |1 G; f6 f, `$ p+ d1 n+ A/ s
然后在样式表里这样定义:
5 _0 N& h( @5 K: N( ?" {+ d! l) h2 O" Y% b
6 K( M4 y( ]0 }2 A2 j! I#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
) `7 e: x$ x. R" D1 l' q5 f, d其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
4 z/ \* u0 f2 R- z7 W6 r7 @- X( X% j I4 ?$ ^6 k
id选择器也同样支持派生,例如:
; M: t0 i P1 _2 t) R#menubar p { text-align : right; margin-top : 10px; } 3 Y- b/ z" c) `& T" V# }$ Z
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。4 M/ w: _$ N& f; R" o: L \
! O/ f9 K1 |: V1 v; C6.类别选择器
6 e# {+ `! H0 M( S% O* V
: c- k* ]' r1 }+ o$ p6 n) `/ X在CSS里用一个点开头表示类别选择器定义,例如:! z7 w7 R/ P4 G, h
.14px {color : #f60 ;font-size:14px ;} : Q/ _& M4 R( Z
: E! p2 j0 S* k, Y3 X. ?
在页面中,用class="类别名"的方法调用:: U( U* j5 R0 R* m2 l! b
<span class="14px">14px大小的字体</span> $ [' X, }0 i# {; }9 C {
' _& T) F; |8 m# f8 @4 q" m
这个方法比较简单灵活,可以随时根据页面需要新建和删除。" u) F+ P, ?5 m8 D
2 w4 @4 ]" N) H. Z" m; ?" I
7.定义链接的样式! D6 u, Z T+ `6 u+ d. l
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:. f" m/ E1 M2 M7 I& b: @" e
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}. y+ _$ n, k/ v
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}- \) c+ P# h8 }* X
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
! f9 n) K* L8 Wa:active {font-weight : bold ;text-decoration : none ;color : #90 ;} : z. z* q2 J; e; X( g1 o
, y C! Z0 V7 d0 I8 H
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|