|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
& x; J) W* G \% k0 C$ m6 L5 f5 |8 d3 T1 w6 L( T* d$ j
1.基本语法规范
. U1 c; I1 d% B6 F& A2 p+ z1 p分析一个典型CSS的语句:
. t3 a9 x2 F. ]& u% @/ hp {COLOR:#FF0000;BACKGROUND:#FFFFFF} - a5 T- A V+ B2 ^7 A) f: S
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; : l# ~3 r; e5 z5 `* ] B5 ]: ~
样式声明写在一对大括号"{}"中; 3 b- U# i& x$ v' `
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
+ n% `0 L+ h3 u2 T, r7 N"#FF0000"和"#FFFFFF"是属性的值(value)。& y- B v5 r7 j( G( w+ l
& }& S6 [3 K6 D: y7 l% p$ e
2.颜色值
) b4 a6 }4 Z- V9 U+ Q, n+ {6 q# k u! ]1 ?9 w& F
颜色值可以用RGB值写,例如:
b2 w) ]( x: M3 l# M8 _! R% c
) X% B, v4 h! K9 j, x9 K' g3 F# V! k* A% ^+ b8 }
,也可以用十六进制写,就象上面例子* A2 ^) u( ]" W3 f
i0 w5 r# B% N U+ U
7 t7 o! B4 a9 [1 E) [如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
( l, c) g" p3 ?) }2 K" G; Q6 K9 e) k* h; [, Y2 ]' M
3.定义字体, ] E. n; e- q3 S
web标准推荐如下字体定义方法
! a9 c1 g, g9 `; R3 v+ U7 K
" S+ C. q& V# t" W) H" } E* wbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 m( V( t% l7 D) ]) T: e( A字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; . o) T( W5 e& @* q/ _3 H9 u2 I
Lucida Grande字体适合Mac OS X; 0 O+ w) R( b- u5 O, |# {, v: _
Verdana字体适合所有的Windows系统;
5 }/ {& J, e$ c. FLucida适合UNIX用户
# Q" d5 g! I$ [1 U"宋体"适合中文简体用户;
! {2 j! V* Z1 d& H% U如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
9 c' d% _& L$ X) I4 R6 ?* i* x, u
2 y2 F6 L" X1 J7 \4.群选择器
$ p; q( y7 u I1 ~* @
# J- t; \2 f. B& H当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ o7 i4 i5 [, M ?2 B& t
% A" D' i, E) Z! K2 @/ Q p, td, li { font-size : 12px ; }
" n4 M X. ?4 f7 l+ C$ T就是给li下面的子元素strong定义一个斜体不加粗的样式
! U- ]4 I0 q& \% m$ P9 Q
! @- t- z- L9 a. R% a2 d+ ]8 l6.id选择器
! k" R+ K b' x3 Q, ^$ F. x; h L" I% C/ h+ U
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
6 Q4 }) X' K) ~5 t- U
+ H2 v( G( B8 W! s( `: J5 t; k C: g/ ~8 q6 s& @
然后在样式表里这样定义:
% n/ i8 p1 f8 o7 r. X) z9 c9 W. c! M# N- a" W. _) D' q7 i9 X1 s4 F
; {: A9 u& i1 C8 z#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
, o% B/ u" w5 m+ ?( N6 |& _4 N其中"menubar"是你自己定义的id名称。注意在前面加"#"号。; B" ~8 {( [# d5 b; }
% }0 `8 N# I. T/ b7 Z+ q
id选择器也同样支持派生,例如:5 E( i2 O, J% p+ d( ~$ [8 P
#menubar p { text-align : right; margin-top : 10px; } # [3 f3 p; G9 K7 d9 ~7 K
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
" d1 Y' `8 D8 E8 p9 a& b6 @1 c y, p" _( G( a$ Q( E
6.类别选择器
- v( X2 D8 O5 [; B- V& Y" _) u/ e$ n0 B- g
在CSS里用一个点开头表示类别选择器定义,例如:, R" J! I# M3 u0 E& U( I1 c0 v
.14px {color : #f60 ;font-size:14px ;}
6 v2 O) o; |4 U F6 ]1 U
2 S/ e9 C) k" ]' u* o& k在页面中,用class="类别名"的方法调用:& z0 U3 ?! Y: n; S( U
<span class="14px">14px大小的字体</span>
) s* X2 E! W3 `( x, D; H8 c1 k7 {" M I) b: \$ \( t
这个方法比较简单灵活,可以随时根据页面需要新建和删除。: o o Q! n4 e; m$ k
/ \! M4 ?* ^+ K7.定义链接的样式
8 L F }' E7 nCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:, a- Z9 q; B* P6 y
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}# R- c7 J' t: k, s* {
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
2 u4 ~2 ^2 ?: O9 Y2 @1 Ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}0 k9 x4 S" q6 f5 N7 h( b0 }
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
# T) a+ j$ C- \" a: O! U6 S5 p9 e. H% C$ ~; {2 J3 M8 }
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|