|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。3 c; A- Y( z8 o9 I I) g8 o
, Z% \; K' N$ I3 L8 Q- T$ t
1.基本语法规范5 {! w0 u- f6 j9 `2 S
分析一个典型CSS的语句:
5 j$ E$ P, |# C% C" n7 c! u9 G Cp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
; v$ V- T9 C( B. Y: e& E其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: g3 m; V/ e5 [% F) O样式声明写在一对大括号"{}"中; 7 v3 X" m q6 \6 w# c
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
* C; z1 ^* F' Z7 a/ q9 s"#FF0000"和"#FFFFFF"是属性的值(value)。% f& C, o- x; p- ]
3 n1 u; U+ r7 ^4 `! @1 |
2.颜色值9 K2 y/ a0 j3 E# Y: R
: q, C- x" i) p9 X$ Z4 u2 o颜色值可以用RGB值写,例如:# d& q1 F0 K" h1 g4 R
( a9 `; H$ ~. A# K- p
0 ]; L* x4 X m/ E
,也可以用十六进制写,就象上面例子2 x0 ^' f( [+ O8 d! Q
7 ~% B& ]5 s* _4 P0 b0 e
3 `7 ?* Q9 x1 t如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。6 ~+ m1 \+ r9 H% z" z1 P7 Y
. n& _4 v0 y5 _2 R/ r3.定义字体8 X+ U1 m1 E* Q) m; H0 k/ N
web标准推荐如下字体定义方法2 l0 ^5 p0 H3 M
- S" j" m* Z% O* l- A9 q
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; I7 m1 ^/ {! v) f4 l字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ) p$ M% \, u: [4 B* n
Lucida Grande字体适合Mac OS X; + v* S: k; q1 k
Verdana字体适合所有的Windows系统; $ j( I! q+ [, h! P0 Z
Lucida适合UNIX用户
5 t" m, s6 H: u. R: ["宋体"适合中文简体用户; - _/ a) C: A, n
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- H; ]. ^ V. c+ U
+ y! L5 C! Y' Y* e& g+ F8 f4.群选择器
F' z1 m& j" }2 L0 U. ] O) J
& t$ N; y( ^& a$ u8 }3 D当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:) c T- l( n( x$ b! L
% E5 i8 D) Z& H5 m/ @" H' K d
p, td, li { font-size : 12px ; }
; e- g: Z+ p2 g( H( b+ I. i* g就是给li下面的子元素strong定义一个斜体不加粗的样式- R% M6 G* Z/ `* d( N* h/ W
2 `$ p( N. Y0 E& H
6.id选择器 r% S, _- Y4 p6 n* N
+ l6 \# j/ i$ f/ l% X7 z. H用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层* L. K3 t1 b# ^* e& x N2 R* m
% o! S. V/ r% h }6 D* p% s* y; ~
) N( L: m" |7 i0 R$ ]然后在样式表里这样定义:5 _; R- |' i0 h6 J1 E$ d
8 N( j3 m$ _# ~; v
# h( Q0 w7 z+ d: ?, u0 j2 F) J' ?
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 8 y: P6 h( ?9 p+ {* |& D V
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。+ ~$ u4 }2 M3 c+ S3 y2 c
V% o$ b: l0 n3 k7 yid选择器也同样支持派生,例如:
: }. {( M* ?$ [1 S#menubar p { text-align : right; margin-top : 10px; }
) E/ ~" X% w4 X0 H+ t- W这个方法主要用来定义层和那些比较复杂,有多个派生的元素。+ ^' |7 ~; d% h3 U, o! D
+ N" h# d3 r N6.类别选择器, m8 y" @/ c$ ?& J$ P2 w0 v
' i. E, Y. Z% L0 S, w0 }1 h! ~2 a在CSS里用一个点开头表示类别选择器定义,例如:) m N O- \% k; P
.14px {color : #f60 ;font-size:14px ;} ! a! R- t, H! n8 p
. F( \& x- b, x) p在页面中,用class="类别名"的方法调用:0 u7 d( A& X4 I& D: J$ J& i3 j
<span class="14px">14px大小的字体</span>
4 e! p6 Z( U( ]! ~; A& m1 x
- w3 P) F5 M3 l4 X1 |1 A这个方法比较简单灵活,可以随时根据页面需要新建和删除。
# X" h/ @: P9 j" Z9 e
Z: ^8 \, m1 E8 S7.定义链接的样式, w5 Z5 e5 h" u& U$ Y B
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
# x+ }! m/ J8 J5 M' q( W- x& Ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# \1 C" e+ N0 T/ Na:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}) b* F5 Z0 f+ c5 ]
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 C& R* M7 Z) |0 m
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
" T( v7 {3 a: b' o2 m; |# k
2 V7 [ m- \- Z; F; b9 A以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|