|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。) f! n, W' p/ J: q3 C$ h- Y& @
4 r# d T4 C7 R$ V4 S
1.基本语法规范1 r& @( K( [& u: z
分析一个典型CSS的语句:
D; J8 W9 \* W, o N( Op {COLOR:#FF0000;BACKGROUND:#FFFFFF}
) [5 w: n4 L% w. b( }- o3 u4 E其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; + U" O( v5 H! q& Q! G. d* _
样式声明写在一对大括号"{}"中; * P. f+ M+ t4 z
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
u# y& q% K) c, Z( W3 l"#FF0000"和"#FFFFFF"是属性的值(value)。
7 h* h! _! M7 G; a7 A) u7 H/ N. o3 J+ P9 G6 }. o
2.颜色值
; @- k6 u# d$ O0 P' J
( t# z: d( h1 k( O: l& w颜色值可以用RGB值写,例如:# N& h0 P- a; s' r0 m8 ]# I
% n9 V- _! T& E- p/ }' g8 c7 K( l* L* I9 Y* p! E
,也可以用十六进制写,就象上面例子; ~3 t. m' J: J
! V* N; g$ D5 M9 y
% i, m5 l7 D: [% T" n5 S9 b
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。$ N/ f+ i! `; v# h) y4 p
. I+ l* a' ?- f! @$ @2 X6 J
3.定义字体. d8 R* @; H" ^- A: F7 b
web标准推荐如下字体定义方法
R; F9 `8 z5 g
# v) ~3 O# b' `! tbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; i, ?$ P; j3 h' }7 G字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; $ s% N$ }& I+ K7 Q! Z( W/ d
Lucida Grande字体适合Mac OS X; 8 c9 W3 N9 c' t6 i) q
Verdana字体适合所有的Windows系统; " B5 z5 H4 y* V: Z7 a
Lucida适合UNIX用户
, X4 i0 U( R2 W V8 v4 L"宋体"适合中文简体用户;
) k6 C2 u# P8 E9 ~如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
* J |3 K7 @. U, q5 k/ k
. w Y5 D$ v& _8 N4.群选择器
# j6 t" X( ^& T2 g# G: R. e
5 J3 D- F8 A" R( w- R8 e当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
' L1 o% p8 ~% n3 K
2 M- ~( H( U7 P$ I0 E z p, td, li { font-size : 12px ; }
. G R. d2 V9 ]! K; k7 {就是给li下面的子元素strong定义一个斜体不加粗的样式8 U( t3 x. R$ Y2 F2 u! S
8 r2 T. ~0 [6 {, ?7 s6.id选择器* K0 f$ _2 f$ f/ F9 q- m F4 F
8 `; L: Y! \' d8 K9 E
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ H( O: G4 ?$ j3 E; j
/ q+ A9 `, B# f6 l* `; e
k) I* p4 O- X9 J$ |
然后在样式表里这样定义:
/ e" I: t5 O! z L$ ]; |* C; U: V8 g
( E- w$ a: r6 {- j% [, z- v) ~6 B8 M
+ C( S( X% m$ P/ u* \5 C- e) c/ x#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
0 Z) L# Z$ q8 P- ^其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
) ]+ y+ m- z: ^% D) j3 a/ e" C6 Q
id选择器也同样支持派生,例如:( s; _: x8 B& q; o6 E
#menubar p { text-align : right; margin-top : 10px; }
! H, m6 G+ `, s' U这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& `/ E! Y1 ^0 {0 k% l( _ B" B* g: Z I+ H. X
6.类别选择器9 S- B6 K; } ^+ L3 j( r
3 x4 ~0 Z. y6 R8 _& ]% M
在CSS里用一个点开头表示类别选择器定义,例如:5 z8 }' X, D* I Y3 y
.14px {color : #f60 ;font-size:14px ;} - R0 y# `. }" O" \& |0 z) C
. r; d/ h0 J+ W& o3 I4 n$ G
在页面中,用class="类别名"的方法调用:' S, {% A# D+ { `& R
<span class="14px">14px大小的字体</span>
$ u P0 i. P9 O) X
2 j% @ f4 X' q, i这个方法比较简单灵活,可以随时根据页面需要新建和删除。
& o% \! a4 E/ V0 r3 H+ X' Y7 W' }8 x9 Z! V* | U+ b. j
7.定义链接的样式
# h B, C; e) HCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:3 Q0 i" |7 r: m) K5 O" Z, ~
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
9 \2 q% L. v% U6 s7 E C* B- Qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}/ q& z' f) ^0 Z* V
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}% p0 H' l& e+ o A, t
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 z" h, C8 A! c
* Z; P3 ]# F( x; I- K3 z' S以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|