|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。+ a6 q4 x$ n- ^% Q8 e( D4 m" x
9 j, p( ?" Z0 ^ z1.基本语法规范6 C( D: q5 N1 e, t& K& o
分析一个典型CSS的语句:
+ e6 \4 B& @& e" w; Hp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 5 Q3 @3 u1 H! \
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; $ I8 v- z( D9 v8 {, u
样式声明写在一对大括号"{}"中; . g+ x1 W/ t" R. b
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
: C! B) ~- o+ |+ i; Y"#FF0000"和"#FFFFFF"是属性的值(value)。3 ^0 e* r8 {* Q
( g$ X& U+ D3 m% S- n4 R# [
2.颜色值
0 w; b. q# W. I6 f
" Z4 o, w Z0 v' T" v/ u: C4 v' t3 x1 i3 ]颜色值可以用RGB值写,例如:
0 w& U, X5 l+ D- H6 G: e% o, V
; ?: \$ D+ y# B0 T- h) J5 p% z# C1 F0 H& @
,也可以用十六进制写,就象上面例子, _2 r) u3 E2 ?2 p- d2 z
, ~/ y/ V! e6 L E& }# I9 K% M1 d4 X
# \3 g8 o) B: f+ W
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
' Y/ m) \0 K- Z% m+ Z8 }1 d
" x* ^1 F/ D! k3 L4 _* C3.定义字体
$ V9 c7 z0 e5 Y( qweb标准推荐如下字体定义方法
( v; V# N- y% u; Z
: y; H$ v2 i0 M9 F1 Jbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 5 f. L2 ?/ |- D, D) Z4 }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; + y: H1 u# X2 H. J' O2 r
Lucida Grande字体适合Mac OS X;
6 f/ G2 S- |6 ?" NVerdana字体适合所有的Windows系统;
4 }! E% G, b. {! w9 g0 K+ kLucida适合UNIX用户 # N9 j4 K. c. y. \' N e! k1 W2 D
"宋体"适合中文简体用户; * p1 s3 ] \' ?! t2 k4 G
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;1 H; M1 p/ l" v# s7 |
, K$ u- I+ @8 }1 {/ T, A3 Q% L4.群选择器/ G2 C8 |8 Y( x( u( [0 U5 u
6 K, S; y" I, E# N3 U当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
F5 |2 \8 ~. S- |2 V; a7 H( x; Y C1 S! Z# f
p, td, li { font-size : 12px ; }
6 |( u0 T9 A, e- ?; i, e就是给li下面的子元素strong定义一个斜体不加粗的样式
; F6 B& M6 P8 y' c! ~( B* F
4 b% \& U* X: Y" C, f: i. N/ C: _; g R6.id选择器0 R8 V/ u! T+ I" U) r( p
; l0 o/ q5 V' ]- k+ \3 B
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 a6 z. L; c% s$ n+ ]! d- W
" B4 i. c: F/ k M0 H$ S$ E; y, h- a: n# x }% t5 L5 F
然后在样式表里这样定义:7 Y8 \- n# D' X7 `: Y, ?
6 K1 T5 D+ e+ A+ ]" k2 m/ i Q
7 C( z r5 a* }: j. X#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 2 ~: O$ A0 f% u2 A6 ^) u7 z. S, S
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 \! ]1 _% ?6 o
% _, k1 ^4 ]; X
id选择器也同样支持派生,例如:
& _ j w7 ~/ a* d- P#menubar p { text-align : right; margin-top : 10px; }
l R9 z0 x0 A- R/ J这个方法主要用来定义层和那些比较复杂,有多个派生的元素。# u3 h1 x* D6 ]* x% [
: Y: V s y- w6 p& b
6.类别选择器9 c# t9 F+ k% k1 ]; B- y
9 o: r& ^: ^" Y; H' F' O" |在CSS里用一个点开头表示类别选择器定义,例如:' X* ~2 L4 x9 l& J0 X
.14px {color : #f60 ;font-size:14px ;} & t4 a7 _( P/ d( P$ p
& d9 w) P- t( ~# J+ X# d
在页面中,用class="类别名"的方法调用:3 o* F" M/ G, z$ [ a
<span class="14px">14px大小的字体</span>
- d) v5 u% s: g- r v7 K0 \3 I. B4 }) R! p* f; a5 |
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
' N% ?. U8 S) E. j) }# C9 \6 g! y: e+ s& p4 |& H5 b! C1 R2 ^1 ]+ U
7.定义链接的样式* W+ s$ {( G* V6 @/ B! t+ L( N
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
v' X3 j9 z% }; \4 C& b9 Q7 ga:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
0 _" f; C7 Y4 ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
% L. S! ]& d8 M+ N, c6 q. Za:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}/ j4 |$ F& d9 ~# v5 n6 H9 i
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} + Q5 ~! h" \- z N4 }
6 c: u$ g* }( h8 Q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|