|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。/ W) z. S# O8 m4 T5 I: x. J2 i" A* u
. K9 d; W0 w! ^* {4 J1 `
1.基本语法规范1 n" _3 t t2 E/ X8 f
分析一个典型CSS的语句:
4 a/ \, V1 @( X% f p$ i: fp {COLOR:#FF0000;BACKGROUND:#FFFFFF} - D$ I5 R2 _7 `! ^
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
8 w2 p' \1 x' V6 l. J3 y样式声明写在一对大括号"{}"中;
/ ~ _3 C) O4 R1 L5 SCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
: R! h% `5 v6 p& ^6 [) \9 P7 x"#FF0000"和"#FFFFFF"是属性的值(value)。
$ {* a% o' K; C$ T+ m: T3 C' y" I
3 a3 P+ u9 \4 `6 Q! W* \" L2.颜色值
# w; b( m! } a1 ~' _/ p- s. b5 F6 O1 G# ^# K
颜色值可以用RGB值写,例如:7 ?, n0 D2 ~* p' P4 I0 p6 P8 `4 ^
4 W( ]/ T# C; H* [, c) I8 \
9 L3 J! n( J1 F# N,也可以用十六进制写,就象上面例子
& v4 {. W( U5 g3 b
1 t+ Y o9 w% |: `+ C. k/ ~. P/ i# s" N& y" x
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
: S' J! a% R+ b2 r2 f F) v
( f1 w7 @! j: u3.定义字体- i5 g2 R- `) a8 b7 k: z/ c9 o/ t
web标准推荐如下字体定义方法* U4 f* k$ N. H
5 C! ? ^6 g9 e
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } * ^/ d! |/ ^7 y. V2 @
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
' S) u2 F- d8 oLucida Grande字体适合Mac OS X;
$ c& P2 S5 b" g- A0 {) k- g6 z8 ~6 gVerdana字体适合所有的Windows系统; 7 c3 F% z8 }* M1 D" z8 @: a
Lucida适合UNIX用户 - L2 ]2 M5 m8 P* {* R
"宋体"适合中文简体用户; 9 B/ S1 z; a( i
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;1 S1 o" j/ r* h
* \9 D' j/ S+ G$ q( U: ]1 `- _9 Y
4.群选择器$ H; d" o @* r- b$ R( ]
9 q5 a$ r3 Z# k& }$ ^# J
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
1 K% O2 a/ A5 O: [4 F7 O7 U% r7 D5 G# J6 ^8 h
p, td, li { font-size : 12px ; } 1 k- T9 Z4 R, k: I, r" Z R9 L0 e& @
就是给li下面的子元素strong定义一个斜体不加粗的样式1 G1 j9 V4 ^1 f; n) o! q% h! x
" o1 ?" J k* b8 q' ?7 C
6.id选择器
3 ?, B6 O; |8 b& x% j, b4 G, e- d- f) n) a
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
# Z! e6 u( q+ e* \8 r7 c8 e
7 N6 Q1 j! u9 ?7 v# E1 l) E0 x* \
& h p' e K/ ]% B3 V! ?) y然后在样式表里这样定义:5 q T, I9 w( c% H6 y2 r" M: L( \
' d8 b+ T3 C# _2 t! ^
% L1 c# F1 p" C, i* d" p#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! F4 `9 W3 p4 h/ B其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
7 G% @2 V$ J+ p" G# { v( B) R: P5 ~* z* X4 G6 }
id选择器也同样支持派生,例如:. Y2 g$ G L' {
#menubar p { text-align : right; margin-top : 10px; } ! C+ Q6 q* k8 Q- p8 o- F8 O' M# U
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
7 o8 r* m2 i! D1 Z: F9 m; Y" _0 Z) n% c8 k
6.类别选择器
- c8 n" c. D2 ^3 l- Q7 D& `& w( H) H6 f4 Y
在CSS里用一个点开头表示类别选择器定义,例如:# ~. i4 w4 X* \8 n
.14px {color : #f60 ;font-size:14px ;}
9 T. a8 l X) F! g2 {7 |
5 C7 b0 Q- ?1 S9 G1 ~+ z在页面中,用class="类别名"的方法调用:; u" J' x2 y# ~5 q7 y* p- g6 [
<span class="14px">14px大小的字体</span>
5 v8 e) e" `0 k b* G( K5 v1 y6 | Q* K
这个方法比较简单灵活,可以随时根据页面需要新建和删除。7 C z* [: m! @( k
1 s$ O# a+ ? y( Z7.定义链接的样式
5 x% o: X& B9 d6 S* M% a2 l* w# i0 jCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
. R' w2 ?8 x, m1 a( R8 ]4 Xa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}+ @0 V; U0 `& Q l# \3 ]
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}! J" j9 K- w* t- m( ~6 w1 k
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}7 G4 u( t; I! D/ d
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 ^7 o2 q: F2 A0 y4 k! d* W" z1 [' Q, p9 N9 v; g% ~( D
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|