|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。( Y2 b, F$ p: {& q2 r
% z) {$ H, K" d4 d. d- g; |# J
1.基本语法规范4 a% p) |. k% }; |9 F# u
分析一个典型CSS的语句:' _8 e- w- N0 S% `
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} * ~ H n. h4 G! H6 ~0 B
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
8 Q% s. Y3 ?' q& J4 n. w; |样式声明写在一对大括号"{}"中;
8 m( |7 Q# d. P$ W: }! F/ n* [COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
- V. X9 R7 `" [- c o"#FF0000"和"#FFFFFF"是属性的值(value)。2 u! u9 C3 r3 N$ \( R
. T2 Y3 z3 Z8 a/ O0 ^/ y4 ^2.颜色值
4 L' P1 Q8 I* e& g; e/ t3 V7 ]1 M% p! [5 M+ D7 N( G4 d+ ^, _' U4 W
颜色值可以用RGB值写,例如:. e i& w: a; J
+ a0 E" W8 C+ n6 S' h7 o( f u; x1 ^, k i/ r, T" _0 n2 F. O
,也可以用十六进制写,就象上面例子- ]0 w4 n( I0 T8 c+ v
7 G9 e1 {+ [0 r& Q4 Q" b8 q# \, o7 S/ x9 V/ m) L" B
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。3 |; v4 w* D9 r$ T3 n
( K' ]. ?3 T" b/ y7 y4 x0 m9 _7 E3.定义字体; h4 S8 T- Y7 s$ z. H+ Q- J
web标准推荐如下字体定义方法, Y3 P& V4 H1 Y: y, ~, E; O% k
6 a: w0 r; J4 H- r0 `2 H# Fbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
4 o2 `4 _- X+ B: t字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
- D C) \( K0 @. S# _. gLucida Grande字体适合Mac OS X;
" f% v9 u7 g) k% V1 y/ I, }$ G( ?Verdana字体适合所有的Windows系统; ( M5 ]/ }$ T# M7 z" d
Lucida适合UNIX用户
& {* G, z1 B% t$ T% v3 H"宋体"适合中文简体用户; . m4 b( E( n7 w
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;8 ^6 O. J8 @! v! ~) b
: ?0 }5 B8 ^* m* S: S
4.群选择器0 F" K5 K+ j% Y1 M
$ S- a' k8 `- l$ T" C" F# e$ u
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
$ Q- ~6 E! ^- V7 k; t+ } g- A3 {( C# f& q* J6 r' E$ N1 I) J5 z
p, td, li { font-size : 12px ; }
% l2 p% t: e/ O- P% U就是给li下面的子元素strong定义一个斜体不加粗的样式
' D& a+ z# T* l6 d8 t9 S0 Q& |3 \" ]" k8 r5 Y( Z N8 a: @
6.id选择器- B, m6 ^$ C6 ~+ M# T ]
! }) h) x$ u4 l6 Q
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ k7 R5 I/ U: S) A
9 M6 [% {1 i6 K8 Q
Z; L! z) M! f4 |; r然后在样式表里这样定义:, b( {$ C& B+ u; G0 Y C* m
6 b1 r3 r" f# t+ }/ M% k" M
/ `& v9 w5 ]8 i n8 A5 J1 g. ^; q2 y" V
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
5 [/ u& Z* A- U& h( L0 t其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 L4 j; M2 n% |9 f$ H2 R* I2 Y8 [* P/ Z
% g6 a; W" q2 X+ f8 a8 R* B( Z2 D/ qid选择器也同样支持派生,例如:- w# F+ X. x" L6 {( W0 A
#menubar p { text-align : right; margin-top : 10px; } & E! s- o; {9 }& ^5 R
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。5 E) r$ N$ s! G3 N
/ E+ m: \, {7 J. P/ l
6.类别选择器
7 ^2 ^) D; @! v( ]( I
9 a1 f, Z' H4 y8 z6 n在CSS里用一个点开头表示类别选择器定义,例如:8 k ?6 ?2 N/ N; k) ]: i( k9 f
.14px {color : #f60 ;font-size:14px ;} ! d3 S; G7 o- S% H) ^
/ m; m, ~4 d2 a- U9 v
在页面中,用class="类别名"的方法调用:' w" s. X/ Q$ x6 N$ G; T; a. ?
<span class="14px">14px大小的字体</span> ; g' D; F3 d" S1 d
2 n2 B5 k7 o; r! L: v. v6 c$ k
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
, g5 r) F E6 E, G+ x6 M; B9 r \8 e0 ~8 K
7.定义链接的样式: R6 N) [5 i1 G1 c8 b+ Y2 \3 d
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
& M5 h# k! k# f! ]2 }7 y0 F0 o8 Oa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}4 w" Q1 h1 S( w
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}. S6 w" g( ]! `2 }. e- Q3 p( ]2 n6 j
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} t7 S2 u. n+ P; W- c, S' V
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
& |/ K/ l L* ~( ~4 E
8 E |' O+ \: }$ ?: e- |3 ~& {以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|