|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
+ ]0 {1 {9 N* B( U5 x# V c& d$ B8 S3 b }
1.基本语法规范
/ j/ p( X+ }! [0 q2 C3 a分析一个典型CSS的语句:7 J. J3 U/ o+ v% I3 K
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} + a' M; ?/ \- |3 ]
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
% K; V' @0 P" @9 J4 O; G2 W样式声明写在一对大括号"{}"中;
& _5 H- z7 k* q$ |0 ?6 cCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
% @* b6 ?& P8 {8 x4 c9 o; g"#FF0000"和"#FFFFFF"是属性的值(value)。
6 F7 w0 f( a$ ^1 I$ Q+ o4 o0 Z+ G' G. T
2.颜色值
! L5 y- ^5 c# g8 g- y: N6 T W9 e5 W$ r! t* a2 G( u
颜色值可以用RGB值写,例如:6 O0 M+ O3 I9 n7 P* H
/ N! `4 W, H, G
# k6 H. g/ ~) L4 \0 W,也可以用十六进制写,就象上面例子! I) }4 y1 M9 S* |- u/ m- l
7 Z# \: o" G z" E: ]9 \' n, e3 g0 M9 _
. M. ]; k1 y/ _& `: r1 F
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
4 q: \; V% n& {1 K6 q$ B0 V T7 t2 a; l* U6 G: u- Q
3.定义字体
8 m- |* x; Z7 t0 Vweb标准推荐如下字体定义方法; ~/ @1 C6 c8 E6 Y2 N: d( U
" j1 d! C3 u% R5 B- x* Z3 O
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
3 a# {. f9 |- U3 {字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
& B' V2 f, o4 c: n0 x/ O' \# {# _Lucida Grande字体适合Mac OS X; 4 Q) ^4 b: d: S9 V/ V
Verdana字体适合所有的Windows系统;
: A9 f% d3 r4 k* ^9 T2 e% {Lucida适合UNIX用户 B; {3 K5 L% ?( f* C' v X
"宋体"适合中文简体用户; % k; M, @) U, ^
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;, {" n: z7 A( O B% K0 a
9 E8 }, E( _# @, G5 p4.群选择器) W' o7 j+ D) J, x
9 w7 O8 D: c6 y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
# d5 ^& y" z) G+ w
7 K# G+ O0 r* ^5 x! ?* M. { p, td, li { font-size : 12px ; } & M0 F% R. D- B2 \) {
就是给li下面的子元素strong定义一个斜体不加粗的样式/ D% R m0 S( b, s$ ~8 \* X$ U( ~
! u! o6 p0 g5 q6.id选择器+ j \4 k: V0 e3 T
# _$ `$ T5 j. m用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层# N' P1 a% Y1 T$ {# Q/ z
/ \" h# w3 o- v6 h* O6 l* Q* [+ p* A* y
然后在样式表里这样定义:, b2 s9 e) m* W
* t0 {8 J8 h, t# h( ~1 k: z. E$ }+ T8 ^/ o& b. E
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 2 j i! j& }0 H0 b) d' {
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 Z: {! j. K' u' U$ l( G* m7 f
+ D* s( f- O- X; R- L5 i3 B
id选择器也同样支持派生,例如:
! n* j$ o4 @. _ q9 w2 @#menubar p { text-align : right; margin-top : 10px; }
# K4 k6 M; l% h4 o这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 b) v8 @7 E+ Q# X$ B) B. T0 \
; Q) p/ D: N) c' h/ |/ y& Q% C6.类别选择器( M9 i3 f5 j' Z3 M7 p
. p% j# k2 d3 b在CSS里用一个点开头表示类别选择器定义,例如:
% u& @0 N n" V/ n9 Z8 f.14px {color : #f60 ;font-size:14px ;} ( o6 [" |% i: |
. f7 x: J( W1 B
在页面中,用class="类别名"的方法调用:& @7 |9 k) \: D* G4 t
<span class="14px">14px大小的字体</span>
$ R: m' ~2 |/ V9 T( x/ S ~/ P3 c7 k, A0 F4 |- i2 J& K& [
这个方法比较简单灵活,可以随时根据页面需要新建和删除。/ u: s3 Y7 U$ X$ ]- G2 N( }
- f! m! O4 H% ]! J7 ?" L9 X
7.定义链接的样式
9 o/ C4 j0 D, H) R& zCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:+ |: F8 X0 B5 [9 H% V- x
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}- e* v3 z. h) y$ ?8 A
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}+ Z2 @$ W: O! [% N. Z0 T
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}4 J7 u6 X/ }$ |6 C h
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ; |8 P+ o$ O7 C& ^; o1 C& t
+ V( K8 F! ?7 m5 x, }: @7 Q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|