|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。! @% q2 N0 R' M" E4 N, a5 f9 U; t
' d: a$ v8 @+ J" R; _6 C1.基本语法规范+ V/ p) J g2 c8 f- ?) X7 i* d9 o6 _
分析一个典型CSS的语句:; f# s. o' S& S E1 V
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 5 w! |- s& g6 r; \' H
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; / n* F4 b6 J& x
样式声明写在一对大括号"{}"中;
( ~) T* P' [( K& C- O7 gCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
6 \3 H( i+ x% ~; z& t% M"#FF0000"和"#FFFFFF"是属性的值(value)。
8 T4 J# T& y. ?7 x# P3 f& @/ p* [. Y8 L2 [4 f& J) W
2.颜色值
7 ~7 n* ^$ _2 W7 j9 Z7 H
+ P& q- K+ B5 K% q" R颜色值可以用RGB值写,例如:, K" \; a3 t- s
" {/ k5 W, y! O$ |! E' h% `8 ?7 N/ S! K- N
: s' P2 A! E/ H* Y0 K( B1 b
,也可以用十六进制写,就象上面例子3 K) B R. ~3 x% u1 f; N5 ^. i
) m Y1 T; n: u& N+ }/ l' p
: c8 T1 O1 [+ ~: h: v( u
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。9 H9 { E/ N5 n, g" I+ O
4 c- z: q( s8 Y# C: w! K8 B3.定义字体
5 s. e# C; g5 Z, P, @web标准推荐如下字体定义方法
5 o3 b- o+ [; F, i3 ~5 h
% |, u0 g$ x' t2 b% w+ Y* D3 o- G3 Q8 Abody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; Q+ h0 y/ b6 q: m$ Q1 j% {字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
2 a! U$ m+ b; [0 b2 ]; ILucida Grande字体适合Mac OS X; . m# n' e L) T. X1 c- Y% `6 Q/ l
Verdana字体适合所有的Windows系统; % ]6 Q" M2 r) l1 T
Lucida适合UNIX用户
3 b2 }- Q7 [8 ^3 H, M/ \( h"宋体"适合中文简体用户; ! S& G' D* ]2 \. l
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: p9 E" v" K: D4 q9 z( v9 D4 b* T/ ?6 X+ n7 ^% V
4.群选择器; Q1 _/ f: t: g0 [* ?3 h7 ^
& ]0 }0 u# H, S2 b" s当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:3 m, z* s6 a5 N6 ?9 Z) p8 z
0 g0 N! K1 \) E4 A- c6 G. n0 q
p, td, li { font-size : 12px ; } # p$ Z# ]5 q6 j" r
就是给li下面的子元素strong定义一个斜体不加粗的样式! @: A% @/ S2 K8 @; [3 h; J
3 b0 y* T, n; a6.id选择器
, z. H( P. u9 o+ q( @; j! v. ?- P- l3 |8 G/ I% P
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
0 V3 r0 ^7 H0 E5 z" i2 q
8 v g, W$ D/ d. T5 [. Z: }+ g" |5 d) F* R4 I6 o
然后在样式表里这样定义:
4 U- _1 S4 H! L, r
1 F, l- J7 O3 d* l" Y) Y: v J" w% s5 j+ w! C
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} - a0 A$ E- H& \0 o* k8 x/ m/ t3 A
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
. T9 s y. A9 e6 N" K* m8 {. f5 o" x2 M* p' G6 F9 Q5 B
id选择器也同样支持派生,例如:
. u9 T: k0 Y' ^! _5 ?5 ]#menubar p { text-align : right; margin-top : 10px; } 2 N; @* |* I! I& j7 Q
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
+ o0 X- i( ^ g) f1 g* o8 S/ b" P0 Z: B* l
6.类别选择器# X$ R5 [* a6 @, v2 S, [
2 [, h0 T7 m& X. F+ o6 T在CSS里用一个点开头表示类别选择器定义,例如:
2 ?9 E4 h ^3 E3 l! F! ]: y.14px {color : #f60 ;font-size:14px ;} ! p9 x" M# j; N# T0 \
9 u+ ^* B! V# [7 S在页面中,用class="类别名"的方法调用:& v- J' Y% S+ w3 ?" r
<span class="14px">14px大小的字体</span>
# S7 y% e# s9 f$ q, O* K5 `$ t3 [: _( n; E
这个方法比较简单灵活,可以随时根据页面需要新建和删除。. r9 F$ o; w$ P+ I, G% _0 g: i
; {- Z0 h% \% j7.定义链接的样式
* j5 J/ K% Y+ O! G2 hCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
' w7 v8 r/ Z/ s! k4 Y( Ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
2 `* o$ I6 I# e6 m: p+ D5 f" ^3 J: Ba:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! _: f5 D- a. \ z" `a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
5 R+ K! e1 ^/ [: o: V+ j4 b% O8 ja:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
2 Z; a% V# B( d6 b' A, s$ z- I9 b X) l7 `6 ~7 D
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|