|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。" t/ t6 H, G f) Z9 H
" e& ?) b5 r4 v8 C5 P9 `+ n, h1 \1.基本语法规范5 e5 k) ]% ?* o* w, k; Y6 I
分析一个典型CSS的语句:
9 P) J2 \, z9 X# k% tp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
: p, e5 u/ `3 x+ W其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
3 r8 ]3 E/ `; |2 k [0 O# G7 L样式声明写在一对大括号"{}"中;
. d: Q! A: X% m# l/ |) A# WCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 3 j# N' ^" V. I: O3 P: X
"#FF0000"和"#FFFFFF"是属性的值(value)。" E) u& A: R9 J- {9 J
" M% L' ]. E ^: ]6 L, p& ]6 W2.颜色值
' M! H0 g$ A8 l& v& m' m: u8 b& |- G! s" s" I$ ]. A
颜色值可以用RGB值写,例如:
- H# J' E }+ D" m8 \& U, X! _+ C+ |# \3 m* a
2 z) z4 z5 I+ D& M
,也可以用十六进制写,就象上面例子$ C/ _7 f0 Z! `& j6 w- v, [( e
- o" D9 C7 F% j' S
# D& O' W8 B: a, J
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
9 g4 m. @8 {8 J N
4 [- v. y6 K: m5 L3.定义字体5 V- X1 ]" q. [% Z' j1 j
web标准推荐如下字体定义方法
: K$ c* T6 S( \4 p3 ^% w F% n- e6 e! Y# f7 `$ N; G- P
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } - ~ F/ T* ^; i W- A. d/ i& I
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; # L. D& v; d; F
Lucida Grande字体适合Mac OS X;
1 d( S' |0 E) o( {( N3 u, b8 kVerdana字体适合所有的Windows系统; 3 d& `' B8 P0 i& @- V& S- f
Lucida适合UNIX用户 + r$ X; H5 t3 t4 Z. p
"宋体"适合中文简体用户;
' G+ b6 k! F, D6 m7 t如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
3 D, J6 k" w }3 ^ B& d- X$ t3 L9 b2 E2 n$ H7 d |5 h' s# C
4.群选择器
: _" |/ X& Y+ f9 c. f, X: C% B, G) a2 q7 B9 h4 J6 e# x! T8 }/ Y
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:3 M) |; q1 W. J8 r8 Z
9 |) c* B& h H- Z" z
p, td, li { font-size : 12px ; } ( ?' C; T s7 x; \# {: p+ W
就是给li下面的子元素strong定义一个斜体不加粗的样式
+ {; w9 I- J. n, B4 t( G: C
; k' h7 N8 K/ I. B/ R ^9 O3 c6.id选择器
+ `2 ~+ ]+ F& B# `
- n5 |; s# d1 \9 h7 ]用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
6 z; D/ I" K/ O7 c
# R4 Q' A7 r( G7 H0 l$ c1 V Y7 ]" C; @" }
然后在样式表里这样定义:
: G1 P3 c& h: I" M. v( n) r! S1 ]0 C1 E
m4 z1 `9 ~! F5 m3 E# g+ v#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ( O4 a3 J6 d& r3 S) m D
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, o5 O6 @+ F9 V8 k a+ a& _1 d
i& @5 R/ o' Nid选择器也同样支持派生,例如:+ ], v2 v8 i" S" N( [1 s ~( P
#menubar p { text-align : right; margin-top : 10px; } % M8 u. S1 D7 ^5 |
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
$ {4 |8 E4 ~& ^1 F* ]% f e: x7 u) K7 f6 y
6.类别选择器
2 G L8 ^3 D* r% y2 h2 S. S" p* e, y5 ?9 P# ~0 C& r) d9 J
在CSS里用一个点开头表示类别选择器定义,例如:6 @9 ?: B2 H7 k E) f# ]& E% @0 j* b
.14px {color : #f60 ;font-size:14px ;}
: Z: M% H2 y7 Q# i1 q
* p% c+ @4 n* j) ~在页面中,用class="类别名"的方法调用:' |1 O. W7 p2 L' K
<span class="14px">14px大小的字体</span>
- \6 B% O4 R% ]2 G! b. f- r0 k3 n0 i# e0 e9 u
这个方法比较简单灵活,可以随时根据页面需要新建和删除。; [2 x: t& @. o0 x! _% ^
9 c/ T1 C) R( q" S! t+ M7.定义链接的样式' V3 g8 ~! M: D# I" w4 T, h e
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:. d/ Y# g; }+ Y: M' }; r- M# b
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}$ r0 b: { x, u! P2 g4 m+ R5 |
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
& X9 p) f0 n: ~8 ]0 Oa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}' C8 N/ ?' g5 `" `
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 8 D# O- m1 o0 ^ M2 g
: z# J6 b$ I% o' ~, T. F. \以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|