|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
9 V; Y+ J- K- ]* ]8 A) B
) W; X2 w4 P( [4 ~, S* C- q m7 E! J1.基本语法规范
) L6 \6 q3 ?& ~( U* l) w1 q分析一个典型CSS的语句:! W6 y4 g" k/ H: X
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
8 \7 ^, Z! Q* [. I其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; # X$ u2 s; E, M# p9 ?1 y M
样式声明写在一对大括号"{}"中; 6 C$ c/ [& I0 s% J: d/ D, g
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
+ r" z+ p* x4 d. z"#FF0000"和"#FFFFFF"是属性的值(value)。
" S# [. l+ Z) k6 o0 f
' X: V; L( U0 l0 S. n& R2 Q2.颜色值
2 {! |% i6 V" o
$ \8 L0 m1 `! n9 O9 ?0 L3 z颜色值可以用RGB值写,例如:
2 `5 a$ k3 `5 f
4 Y5 R! ?" X' P8 X6 ~: W3 r, X
& J3 d# c% b. K s- i,也可以用十六进制写,就象上面例子: P/ w, a7 j5 H! m1 {! F
5 q) M' F' w- G9 {( V5 l, X
( c: z) c0 r; g如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。4 E. X+ V6 k/ `, }- W7 }5 ^% J0 q+ ]
_) H5 Y0 U$ u
3.定义字体/ v0 g: a# d0 }* Z4 T0 S! x. f5 }
web标准推荐如下字体定义方法
( S1 ]$ r0 u- B" O) _/ M
$ _: M- g/ o. a) ^6 s$ S( Obody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } % R# j. l( ~$ q" a& X3 c% @: r
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
' V" v, p( D/ S, d" W/ B$ LLucida Grande字体适合Mac OS X; 9 b; r9 p. i# N/ P& Q/ U* e! T' |
Verdana字体适合所有的Windows系统; ' \' k/ k- t% [$ O
Lucida适合UNIX用户 - k) c0 n( R6 A' D3 o/ {% | q' s" v
"宋体"适合中文简体用户; $ D5 F1 Y7 j, A* C* K: a
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
( |2 p& O/ F6 h) o8 Z
3 Q; W# K1 D( Q! h4.群选择器
0 r8 c0 h$ T+ k1 D. k
8 z9 _% c9 U% p0 f当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:* _- @1 b7 g/ k
, z5 g D6 m# p3 K8 I2 S- @ p, td, li { font-size : 12px ; } 6 G$ F3 K+ X- b! j" w% {+ q) o
就是给li下面的子元素strong定义一个斜体不加粗的样式5 C: |4 f4 u, A( ~
6 q6 J4 w! {; H, m) V6.id选择器$ I9 v) f8 ?! Y9 l$ v
# m+ e/ l5 i3 \4 g% g. g用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层: N! U- M7 u$ _ J: E3 ?' E
% E+ q5 i! j, N
/ M; G3 }8 }- W1 B$ f W
然后在样式表里这样定义:
m* Y1 P+ ~0 T' x% s1 R) J9 q% p \7 E/ Z% z
2 W# s+ E4 o& a6 \#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 4 T! I$ I) X6 M k7 x9 v
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
* B! X, P7 \- A0 T4 Z4 j" K C) i* Q( g; w2 `3 i- r
id选择器也同样支持派生,例如:9 L, \9 ^% Q& v! O9 r+ Q/ E
#menubar p { text-align : right; margin-top : 10px; }
; I' ~5 I. w# B4 } S7 [4 @* T这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
4 M; |$ F: `; R8 R8 P* I* z" x3 B2 ~5 L% D! K( g! u
6.类别选择器( z* c0 y1 b; H6 ~+ {8 n0 p/ m
9 r+ ~! o: x1 Y- U X) F在CSS里用一个点开头表示类别选择器定义,例如:
0 @2 W! G0 x+ t! P* O& d.14px {color : #f60 ;font-size:14px ;} 5 A6 M0 x% s; V2 V
7 \* Z6 }3 [6 g; L3 L+ T0 Q3 g
在页面中,用class="类别名"的方法调用:! ]2 R8 }3 `* e0 o3 D! i) F
<span class="14px">14px大小的字体</span> 3 n0 m1 {% _' l Z/ Z2 C& J
; u+ L' z. |, d8 n这个方法比较简单灵活,可以随时根据页面需要新建和删除。/ |* |: x K' s" q
: b! [$ m0 L p& L3 _% p/ k7.定义链接的样式; s: {% H# t6 [9 o6 ?7 r J
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% T3 o) A0 n- b. V+ J1 o
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
5 z6 l/ b9 F) ]0 c- Z4 i+ Qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
1 |) C8 ]% G7 ?7 i1 Ia:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# X6 q* I1 N7 E3 h
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ! J) J' a5 p2 `. A. P- J5 e. G
" A: I& f: }3 g- F# l2 K
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|