|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。' U* C2 v4 x1 A5 M! n) Q
; Z! i) H8 a8 o8 ^/ X& ^
1.基本语法规范6 B+ d# ^5 ]/ r
分析一个典型CSS的语句:
7 w9 Q7 F: ?# \2 qp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* G) Z1 _ }2 a& g; @# z9 c% }1 u其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
1 P V, q+ k1 W- ]" ]" m+ e* s% d0 S样式声明写在一对大括号"{}"中; 0 e% v; J' o. C# l* [* J, j
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
6 G* m/ g4 f. }"#FF0000"和"#FFFFFF"是属性的值(value)。, U4 C5 a: c4 ^: f& [
( [, h' R& i0 ]5 F/ N
2.颜色值
% o) `8 L' y: b; `; Y! y$ t, g
8 t5 B) G% h1 M# b' f颜色值可以用RGB值写,例如:
& |) B. w* T- q
- ]0 e F! v- P4 ^4 N, W6 q8 _5 F7 ]( I( [; x# J2 z; n3 l* @
,也可以用十六进制写,就象上面例子6 q9 Z$ L {3 u6 _$ U% y% l
5 X3 R; R. G) y
2 G$ U) Q, p+ }! _3 |: [如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
& u/ O9 @8 E' N, h* [
4 ]3 z& H& f w4 q( m3.定义字体8 T) p% }% v8 U# N
web标准推荐如下字体定义方法! r6 l$ a' o- C; r) n, j
$ C, w* u( d3 @. @- W' [$ Xbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* M. \/ B: w' O2 `字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; " l0 Z6 c; C+ ~7 W7 c( M! D
Lucida Grande字体适合Mac OS X; , E. }4 F1 y/ J
Verdana字体适合所有的Windows系统;
W5 D$ V5 p- d3 H; x8 q7 d; o ^% ~& XLucida适合UNIX用户 d5 @0 G8 c0 e y$ C
"宋体"适合中文简体用户; . ?2 O+ n0 N1 Z" ]1 I7 D! M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;+ H0 p8 T1 {* a' R' L# o
4 m* ]3 |5 w6 u% s8 J3 u1 V2 l
4.群选择器) F( J7 f0 l1 Z5 b* |- L$ g
9 | ]. I, I# g
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
* i+ g9 }$ |3 W: x- I3 j( B8 B% Z1 j* c) U$ Q9 A; x' D: p7 L
p, td, li { font-size : 12px ; }
. t4 j7 A; E& W* G# n- ?# O( D就是给li下面的子元素strong定义一个斜体不加粗的样式& t8 F5 b; J5 |/ N
5 H, |9 |' D/ B% g3 \& Z6.id选择器 s% b" z4 y5 K$ S% @3 u
# _6 x% B9 J- o' Y" k' I用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
8 a; [) L3 a, ?) Y
8 ? d m2 v& J+ X) z% E6 s- a& h3 q3 t7 T
然后在样式表里这样定义:
1 y# x) X K4 S0 N& H+ z- p
U% H' g+ E+ @) _, f
; l5 z! T; l# A#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! D6 @/ v" z4 I1 W. M3 f1 S q. [其中"menubar"是你自己定义的id名称。注意在前面加"#"号。4 q3 I! \2 K' p% n! U( Q
3 n- z6 a$ y+ Q
id选择器也同样支持派生,例如:
, o$ h; z/ s* I6 g$ p6 C#menubar p { text-align : right; margin-top : 10px; }
: R2 W% L# y! [6 j3 x; e: n, F0 P这个方法主要用来定义层和那些比较复杂,有多个派生的元素。3 h" z6 _/ }0 n; a2 A! q4 c
2 J V% o$ L" T" q% e: y( Y
6.类别选择器
- \$ I8 B7 R, J7 b) N9 U
, B; b/ v& Y1 X. p# [; o在CSS里用一个点开头表示类别选择器定义,例如:: z$ V# y+ J. c" _) O
.14px {color : #f60 ;font-size:14px ;} # B5 w3 H# S" U6 M: t k" }
4 u+ [. @5 C1 T% m1 O2 c0 {
在页面中,用class="类别名"的方法调用: g& h5 h4 \) t9 T
<span class="14px">14px大小的字体</span>
5 l* R4 E4 ]. ^7 H& g1 S2 g# O1 r& M3 k/ X
这个方法比较简单灵活,可以随时根据页面需要新建和删除。" H) l: b1 G8 b9 k' R& b0 ^
6 E' ]4 z- O5 _1 b2 c7.定义链接的样式
/ Q& t+ I, e3 I( p8 Z( V2 G% @CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:7 |+ b; H, t& `# M
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}5 j( v% u; H* d8 ~$ d
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
1 w+ L: D) S, Q! l4 ya:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
% n6 j3 D, I. la:active {font-weight : bold ;text-decoration : none ;color : #90 ;} * S# r' ^. } r, m8 ^/ T5 R
0 f4 |, Z4 E; g- {+ |/ b' ^& U
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|