|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。/ S; {& |! D4 n0 m- s! r D1 s# ^) A
1 `! o- Q( H% L- F8 ?9 \5 q1.基本语法规范
# S& \+ j$ I" K2 w3 ?1 O分析一个典型CSS的语句:8 Q1 o' H+ P4 X: |
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} $ O( l) Z( w/ y) }8 W" E
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
0 H1 H3 Z/ L; a2 q样式声明写在一对大括号"{}"中; l! {+ n# O8 c# V& Y3 O7 V
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; & n4 S% e0 G; H2 ^2 h- N
"#FF0000"和"#FFFFFF"是属性的值(value)。
. Z3 l7 z- H7 ]
! `, n, o0 z! p$ X& J. C2.颜色值+ C, M; E9 [; i" L+ H( p2 g+ P
$ v! ]$ q; Y: E2 U
颜色值可以用RGB值写,例如:
6 d) q; v; P+ X( w M, }9 J# _0 b7 p& O* R; z
5 u3 F5 ~6 U/ K6 I$ x
,也可以用十六进制写,就象上面例子
5 K8 I; [" ~9 O. N0 R) l
, `# h+ [- \0 ?# J+ @/ k' N* a) [- }( i2 E! ?6 R; u( [7 J
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。* U# ?3 j/ J- v, i. e
) |' K1 @: T- s: S
3.定义字体
+ i# i/ n) e: U4 Z# Gweb标准推荐如下字体定义方法" a; {+ V1 y' T7 d6 I
- [: _$ n, E( \0 |$ Rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" g j& S5 y/ Z& E" b. ]0 n字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 9 d4 L/ @% n! y0 I# r+ Q& P
Lucida Grande字体适合Mac OS X;
0 Y( i: i- H+ N3 z& `# `0 R) tVerdana字体适合所有的Windows系统;
7 G) n4 h; C( S! ^! X3 }Lucida适合UNIX用户
* @+ Z+ o# ~4 g0 F. Y"宋体"适合中文简体用户;
8 i# ^5 d! a1 P% z如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;+ N. N4 h& W0 E- S
' x0 ]1 X" B; h$ i7 P/ @4.群选择器
8 K3 l' H( d% _- n% f& I9 [6 f! z5 `) q1 y) J4 o+ _. {% R
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
3 H" |! e9 B/ @4 R0 }! L% X5 s* ~) l& n7 H! Q( h
p, td, li { font-size : 12px ; } , h! X& G5 P! k! q+ o
就是给li下面的子元素strong定义一个斜体不加粗的样式 D6 n1 f7 Y8 @9 J* t O& M, a
! w! v; H" y4 G; y8 \6.id选择器
* w6 Q d' c( ^* I, }3 O9 _* f) o* P
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
: T7 i, q& A, m$ a: k
* B, X5 |- f9 u. L1 I5 a! c' B
$ R. Z- n1 x4 c2 [然后在样式表里这样定义:
5 v* X; I3 s3 r8 r0 f* L% Q& o O* [
3 A5 z( _) a0 p" c( F; X# N, S- m+ T
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ( C% Q k3 y% T1 n
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。5 k3 ^! P5 y6 S
0 y* b7 h1 G# a: U h6 C/ ~id选择器也同样支持派生,例如:
# b$ y& A" B) N8 b* U7 L- Y#menubar p { text-align : right; margin-top : 10px; }
. V# F" h' x& B/ D u9 y) W这个方法主要用来定义层和那些比较复杂,有多个派生的元素。0 s/ m: ]* a1 I; L
9 ~( d8 R) J: ]& p; m
6.类别选择器0 O) b+ D$ [( s* O, R9 R8 q. E
# O o, e$ k* s在CSS里用一个点开头表示类别选择器定义,例如:
( p! _9 A W7 ]( _+ ~.14px {color : #f60 ;font-size:14px ;} $ h7 G, s1 Q6 e7 ^8 o
+ A& `& ]7 ~0 a- d' N
在页面中,用class="类别名"的方法调用:! ?! v1 L/ {9 G: v3 F
<span class="14px">14px大小的字体</span>
9 T6 b( m; y6 w3 c/ |8 T2 j3 ^
这个方法比较简单灵活,可以随时根据页面需要新建和删除。, y7 ^ K5 O1 X7 _( D- s7 q) C
1 [4 J& A6 K8 W0 B& t. b5 Y) z7.定义链接的样式5 g# P% p4 ~% L$ S& R; z8 b( P
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:1 P+ T( F* f- h9 D; B
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}- X/ E7 n9 ~# B
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
- c/ Z" V0 E1 ya:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}4 I9 \. q0 }! T e
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} , A4 u* }, e8 \1 C
% P5 N6 @6 N0 `以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|