|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。9 ?2 b3 e& k7 Z2 e: x0 U8 u
' C6 g! t1 V' D0 n. d1.基本语法规范3 Q, h/ e k* u
分析一个典型CSS的语句:. H2 |" x5 c: u2 @$ W0 [6 S
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
: J f2 {! [) w" O& S2 x8 s& o其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; U! [# I% A$ e* a" N; K8 b
样式声明写在一对大括号"{}"中; 2 A: d) ~2 U1 A% H1 J. f+ _
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; : K8 ~5 j" {9 P2 q2 R: l7 K! x
"#FF0000"和"#FFFFFF"是属性的值(value)。
1 h! y1 c0 }. r0 b, ]+ p g# v! T) g0 P. V
2.颜色值, o( k2 C5 c. s6 w
" ]& \7 o$ @6 N3 l" _ b
颜色值可以用RGB值写,例如:
8 g. C( t1 ]5 X5 F: C9 x( P `
, H$ w7 {8 U# ?) R( ^$ J4 ^. F: L% G" I! l* w3 V
,也可以用十六进制写,就象上面例子
0 R. w7 V, L' S1 @- `, D5 D( [. y) U% K- b
! J' G. l0 n8 e, a- U H; ]如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
, r- f2 N% h( A/ e; [ r E) Y$ M: P. M8 T# s R
3.定义字体
- v0 w5 Z$ a1 [4 R! P. C. [3 ?: Dweb标准推荐如下字体定义方法! u9 ]% c7 L0 ]
9 q/ m9 d1 C& A3 \body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ' t! i0 \! M" y0 ? Q3 r
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - ~# r! e7 g, U+ l) D
Lucida Grande字体适合Mac OS X;
; ~ E" Z' U) Z. t" U7 q) gVerdana字体适合所有的Windows系统; ' [8 A+ M) [5 I# X
Lucida适合UNIX用户 / W- @3 c9 d" `) y
"宋体"适合中文简体用户; 4 S, |5 V" j" Z* m Q2 e
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
$ r7 R6 }- O$ S& z4 D7 n* T) m# W0 Z( t
4.群选择器
$ d* q9 t$ G/ m! r. k8 R4 G W! T( T" z" w6 ^
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:* ~2 C. F6 p& ^
$ T4 P0 M0 I; F( @ p, td, li { font-size : 12px ; } - }. @* R, B; R: d, y$ A
就是给li下面的子元素strong定义一个斜体不加粗的样式) r! i( {8 ]2 D3 c2 j# B0 ?
4 [+ M) h& r5 _
6.id选择器5 {6 E0 `/ W* t( t. `% B: c1 N/ m
; C5 Y% K, V1 ?5 j4 S' P* I用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
, T( j f$ S8 L
4 A2 B; s$ B0 f1 _
1 r- E( v3 ]7 X1 d- Z然后在样式表里这样定义:
7 |$ h0 O* g. m% B" ], V9 @3 s n
4 ?( D# u& X; E9 `' @& C1 l3 I
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
K! H4 [' @3 S* P其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& f7 Z1 F( c- @4 r6 q
}1 {! P5 s8 C. J( A2 `id选择器也同样支持派生,例如:# C; [8 X# h0 [
#menubar p { text-align : right; margin-top : 10px; }
8 e2 d4 n. @- m9 m, b1 [这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
% u: g1 g; t0 ?; L4 @
; ~# H# N: O: \' K. W" ^6.类别选择器
7 \8 ?# e- I8 x1 _, N+ D
0 Y+ w$ H* @* c3 D- k9 ~ a3 S在CSS里用一个点开头表示类别选择器定义,例如:7 M! o K* ^& C0 G
.14px {color : #f60 ;font-size:14px ;} 8 k/ U" p: G# C
* z4 T$ d5 N& k& t$ [6 q8 i) Y
在页面中,用class="类别名"的方法调用:5 u q; I" t4 ~
<span class="14px">14px大小的字体</span>
- }! S& ^7 @, d
/ i8 ]7 [* v. ]7 A* o6 H2 m这个方法比较简单灵活,可以随时根据页面需要新建和删除。* I: ^& h9 b. a; U5 s$ E Q8 u
) [& p" ?$ V8 \0 s& j0 H6 V& A: z7.定义链接的样式4 L9 l& |# N3 o7 z' T) V- Q* B6 H7 O
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
8 Z$ j) f5 m L& u- Z& m! ua:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
! v( M9 ^" D9 `. Sa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
8 b/ o; ]! e+ l3 P1 va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 Q( I3 s/ _' C7 I# la:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
8 t5 K* g. t% O. U) ?( K4 [8 |( ? e% [% K5 g: D+ [8 @4 S: i
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|