|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
0 D( B- i1 `: @- M2 Y" f
/ y0 o# \, \& _ a4 g1.基本语法规范& v9 ]5 Z: p2 s. S P# E
分析一个典型CSS的语句:
/ a5 l3 G' b8 g: up {COLOR:#FF0000;BACKGROUND:#FFFFFF}
7 T; A) O5 y% ^9 G其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; # w/ q- i0 s5 m" `2 m/ R
样式声明写在一对大括号"{}"中; + F& H F% Z0 F/ E- B
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
0 B. Q1 X, X+ i. t, m8 ^"#FF0000"和"#FFFFFF"是属性的值(value)。' f/ R! Y5 \3 \: E) n0 v4 b
& A4 z e2 T8 |5 {0 D. i2.颜色值
" C) F8 |0 f0 I* i# z8 c5 ?# w
8 t( r+ ^5 \3 `颜色值可以用RGB值写,例如:
y$ c* b, ?1 i$ O* j4 K' ~5 c9 B! u2 p, J& m* |: j4 |
- ~3 [8 J2 |5 c3 \/ b8 o/ i5 L8 D,也可以用十六进制写,就象上面例子
1 H$ d. [& M2 X7 |# b. f# K" b+ ?5 f( x1 @$ v- l% e
- t$ N3 x/ o' {. l, I7 i7 z
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。! `! ]8 n6 F: K8 p8 ^
7 d& ]2 o" Z5 K+ T3.定义字体6 f X5 ?" w: y, }3 ]0 E3 c
web标准推荐如下字体定义方法 w5 {. b6 I; c+ x! d
& ] f+ p1 o% G) Q2 Y9 B3 g8 t' r
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } & K; T( c3 Q* [. b* w3 Q h
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
5 x4 \3 K( }( C) ~( g) J) VLucida Grande字体适合Mac OS X; 1 F- l9 I. ^. @8 m5 s8 d. Z
Verdana字体适合所有的Windows系统; ; R {( u8 f: y$ I" R9 {9 b
Lucida适合UNIX用户
9 b7 k5 ~& v' e& s* \"宋体"适合中文简体用户;
; P# \, T% v$ _; j如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;% `' `& [# i: u6 Z; s: N) k
$ G$ `; H. h* f# a* ^7 `8 J
4.群选择器
9 G, U% R! ]2 a7 R* ~8 f% i0 f; G) ]3 ]1 E
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:) X0 {6 M4 I' U8 j0 j
/ _* r+ ?' C' ]. G0 M p, td, li { font-size : 12px ; }
+ h6 U5 m$ _/ s2 q6 e9 a: N就是给li下面的子元素strong定义一个斜体不加粗的样式$ c2 q/ _+ z3 C" m( y
" R, A& e( G) L6.id选择器
7 i g8 C' ~4 U7 o B* q5 z7 P4 {( q5 D9 Y- @) M' `
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层+ C3 P2 e* ]4 z; P0 V+ }2 @! |' Y0 x
7 W- Y5 o% s/ W* j' Y9 ~. D! Q! f
$ s% k$ ~7 K2 i然后在样式表里这样定义:; c* v: E V% I# d" w8 h
8 j3 r: ^6 c6 M5 B' M1 r8 ^2 b
( h4 o" E" O+ n7 b G# U3 C#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 h: t6 j4 p, _其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, {* s/ T5 X% E }! D
" k. g0 e! H3 U& N
id选择器也同样支持派生,例如:) P% r; U; i+ g! [: P% q
#menubar p { text-align : right; margin-top : 10px; } 0 v& Y3 H8 X3 h
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
$ Q" j/ }( G; j$ U/ D9 ?
/ r1 h$ T! z* P6.类别选择器* ^7 [# K$ _4 }* H6 N
, D$ p( V8 n+ s# ]( a2 `在CSS里用一个点开头表示类别选择器定义,例如:( |" Q/ N X& ]. c5 D; z- B7 B
.14px {color : #f60 ;font-size:14px ;}
0 L& n) U9 f- R. S% d
n$ j1 K) @' w- e( L w在页面中,用class="类别名"的方法调用:
5 t* a! {2 n7 L5 V& ~<span class="14px">14px大小的字体</span> 1 y4 H# x" }( a
# \8 p6 y& `( L; c& o这个方法比较简单灵活,可以随时根据页面需要新建和删除。' x. @, B5 C$ A* V& n# r
2 g; B* `4 j: D( ]8 k! j* J
7.定义链接的样式
0 C( R, ?+ n0 C0 U0 B. B0 GCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:5 _: e3 I$ R# M0 }
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 K' S$ W; L! P: l& w$ ?1 C* Ca:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
2 n3 R" b+ t0 Q" t6 @a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}+ ]+ D8 J$ V" K# [8 f' G+ e
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 3 m( d/ q+ F. Q) ~
6 o5 U }0 @1 z5 {/ @# K, R$ P
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|