|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。4 v! z+ q+ O& D8 `: r
& j g$ q0 p5 f
1.基本语法规范5 M' f1 z5 ^3 ^& [( J& E% ^1 l9 Z2 s
分析一个典型CSS的语句:) T+ g6 f* M% R% w0 Y
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 1 e8 I2 r. I( j1 I6 d9 u
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ; Q& u- p% V0 @9 I" [
样式声明写在一对大括号"{}"中;
, r7 u9 d# t- D8 HCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; % O! K7 n% b5 e6 D
"#FF0000"和"#FFFFFF"是属性的值(value)。, G' R4 G( X& x* B( T# v5 V: i
5 f$ F7 f: L' p
2.颜色值1 t- [# [* d# q& ~% L; v8 ~1 }
6 H! M$ ~7 D( Z# j5 i颜色值可以用RGB值写,例如:
' w: X D+ @: e$ i9 S/ U3 n
, g7 A# ]( C3 A2 |, b; K- w& D
E/ s ~+ L0 J* M2 m; z,也可以用十六进制写,就象上面例子1 r) Y, u/ T+ w1 S# L/ Q8 w& G
7 e" r$ D0 P$ B9 N, N6 P+ L2 O+ W2 u) ^" G3 d6 @: a
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
0 p; A+ M, E: C3 n6 v' `5 Y# L n( o# y8 \% U! B' G
3.定义字体+ N; U0 s5 l2 c$ ^0 r2 A3 P
web标准推荐如下字体定义方法3 J( p2 t1 }3 s
% h. ~* O+ r& s! l E3 Tbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } + Z+ ?. i. Q8 [; O" J5 V4 m
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 O$ g3 ?: C8 k" U$ ~0 ^
Lucida Grande字体适合Mac OS X; / [% Y$ S. e. k; k$ K- }
Verdana字体适合所有的Windows系统; ( g p! x0 A; W) c3 f
Lucida适合UNIX用户 ( q- j0 d( r( K( U
"宋体"适合中文简体用户;
3 a; O9 Q1 k$ K; q6 r1 v3 J4 T如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
0 j1 C! d: ^ _) `/ Y# {. F0 J; N4 X4 U
4.群选择器 h5 Z7 \5 G+ s* b
* z6 \/ \, ~) a8 Q% J: ?( \
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:. [) y1 B4 H9 L t, e
/ J3 t/ R. }: Y, g7 N p, td, li { font-size : 12px ; }
1 c, Z2 l2 y( ^( y$ O' b5 a就是给li下面的子元素strong定义一个斜体不加粗的样式6 x, {. l' E- L! e
, i$ L8 v8 ^) z0 h! i' M9 L' R
6.id选择器1 p) }6 p$ ]: y( P, H. F) f" O
' C+ @7 L1 W0 Z; R用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层+ y# m9 s1 p3 \& `0 Y5 [! G
) x9 P; X$ A; O @" c5 m$ u
R+ T* J7 ]4 U D( L
然后在样式表里这样定义:
- c! s- H! e c3 b0 ?* x' Z% h% y" T* z8 {. s
6 T4 e: j* u4 Q, k#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
|4 V y) q a! U4 ]3 H/ K- @5 f其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
. g7 }+ i& l9 m s: Q
; Y1 x7 R0 H$ lid选择器也同样支持派生,例如:
% V$ Q( \" b ]$ D$ q#menubar p { text-align : right; margin-top : 10px; }
$ u- k8 G! \6 I |5 v这个方法主要用来定义层和那些比较复杂,有多个派生的元素。/ ~; N2 |2 v( g9 N6 L
/ g2 z! V( D2 w/ x% r% I& [
6.类别选择器4 ]' ]4 H, q- ^+ m! r
' Z& E! |) S( A& o在CSS里用一个点开头表示类别选择器定义,例如:
r+ t( {6 I; n! Y4 f.14px {color : #f60 ;font-size:14px ;} 7 a3 s) S/ A3 \) z
; Y! Y' L5 V7 D9 G
在页面中,用class="类别名"的方法调用:. O5 `: `5 L6 K# I, Q
<span class="14px">14px大小的字体</span> # r7 ^9 j( {# ~8 S4 U- R
2 P0 c) z7 y; P5 Z3 D这个方法比较简单灵活,可以随时根据页面需要新建和删除。% h. x# s* X- m7 I N! N7 p% j
, B$ J5 E) u; I% j" E! V7.定义链接的样式2 x6 W8 E0 P A+ p9 v9 q3 b5 l! r
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:- @' ? y! ] M ^( K$ _
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
; e( k: e k1 ?4 ?a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 f8 \3 X, B# j J& o% L- p
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}9 f9 W' N5 H! U2 k. J" P
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 d( z+ ^& s. _6 M. @$ w2 `! F* b. D$ X4 c# _7 f( D/ P+ O; d
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|