|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。& U' }+ a( S) D9 h$ _1 r, ]" ~3 t
0 L' D/ ]- L8 X3 s b1.基本语法规范
. a( l: @9 s& T y4 ?分析一个典型CSS的语句:
/ F. B$ v& [7 Z# T3 wp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& `* t8 r* H* }2 Z! r( Z" {其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 T( G6 W' D- ]" @! i/ P6 X, w样式声明写在一对大括号"{}"中;
/ C4 a q+ Z# {& H8 ICOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 ^$ q$ o8 ^; y, y7 J0 r( s/ t
"#FF0000"和"#FFFFFF"是属性的值(value)。
1 x( D% {$ U" c; G7 v: k1 }- k/ ~. Y8 d% v6 c6 p) R
2.颜色值
/ Q1 J: ^# L" S/ U9 K4 c. E" g) C3 B0 |6 d& \1 t/ |! ^
颜色值可以用RGB值写,例如:
! x8 u3 X0 Q0 d$ D: D
t+ Y6 ~, j: A! r6 Q- p
8 u- C6 j% }9 H$ {6 x7 S,也可以用十六进制写,就象上面例子: y$ a2 c* e9 u5 U
; ~8 n0 d' ?$ c5 h A
7 p7 G9 J8 _/ C9 X! M* e8 X/ z
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
& a8 C5 n; a9 L/ K4 P6 q# T
+ d1 R4 D3 E( {) K# g) s0 ^0 R3.定义字体/ u8 D# }; @9 f1 r Y( a
web标准推荐如下字体定义方法
4 \# d+ a1 U0 m( e5 h# S
* A7 w9 {* J, m9 e3 fbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } - X1 a0 b' }! P" R9 V
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
5 c: J8 k" l9 b$ PLucida Grande字体适合Mac OS X; L2 j, c$ w" R8 p" d# J# i
Verdana字体适合所有的Windows系统;
, F' ^4 k0 s! ?6 XLucida适合UNIX用户 ) l. U4 k4 \9 z5 s; x& e
"宋体"适合中文简体用户;
0 n3 E6 X' e$ e3 |* M! g0 r如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
. @! j# v. T4 M
9 j: s1 h; Y% Y2 |4.群选择器
1 D3 ~- Q' k9 ]6 J, ^$ ~) p& ]3 d9 R; f5 \6 N
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:0 P6 i/ Q2 V) O( E
7 K# l$ y5 d3 y& D# T7 p
p, td, li { font-size : 12px ; } ! n- c, I( B0 `( e2 _
就是给li下面的子元素strong定义一个斜体不加粗的样式
' _" z, F) r" t2 t
|8 g5 u6 y; Q5 V6.id选择器. Z& L" R% F+ V X0 `( t
5 j/ @5 U! U( l( s用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层. c# {3 L, w f/ f
' ]$ x Q1 }! ?2 o
# d" k& Y1 N9 ^+ {8 I, \& L/ W7 E然后在样式表里这样定义:
0 G$ e. \3 m# n' _( d8 Z, U( U+ H( L( K4 B
! D( o, W" x- i8 |( _
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 9 P( a2 @ l6 \& P* }7 x
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。/ d7 O p4 s! X, s' W( Q" K
- c l; k1 d; M( m8 y$ q
id选择器也同样支持派生,例如:' O. M9 ]6 h! p+ K* ? P
#menubar p { text-align : right; margin-top : 10px; }
) ^8 w6 @2 t( z0 ]6 v这个方法主要用来定义层和那些比较复杂,有多个派生的元素。: [. k) H& u* Z) w& |2 c( \
. [! w' k& f8 t* c+ B' B7 a
6.类别选择器
5 |$ |" Y( B" v# b/ Y- |6 E% J
@6 {6 X$ f4 E' K) i& ?0 N在CSS里用一个点开头表示类别选择器定义,例如:( r' }0 w) @: [8 P4 [, v6 k
.14px {color : #f60 ;font-size:14px ;} 1 o7 t3 L2 W2 Z: ` b5 b
$ `% Q- Z5 y. v3 l% p1 S4 K, D% }在页面中,用class="类别名"的方法调用: p, {4 x3 V5 i s; S
<span class="14px">14px大小的字体</span> 9 d- T: ]: x& q! l8 M2 l
! `. [; B& {6 z9 k* _0 k: w
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: V& i9 G* H, T+ Y2 ~' P, A5 l2 v# }; q' ^4 K
7.定义链接的样式* O1 B0 c5 Z8 }7 i* L
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
( s* Q5 W/ }5 C- _a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
/ ^% y2 J: S5 Xa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. {. f. }! R3 g+ _: ?& Ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# H. B9 p$ q, }* D: F! N/ p' h
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
# {/ G' i3 i7 ?4 @9 G7 A _9 R: `+ x& J* Z
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|