|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。7 |1 a% T$ F8 O' C1 x8 h
J( }+ d/ J7 R! e* {& ]2 M1 C2 O5 F( {
1.基本语法规范
$ L8 _8 v$ _# ^分析一个典型CSS的语句:8 I+ d$ q( n' O3 o6 H; B( [
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- P: U1 j5 T) k! m% @2 C其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! U- c( O6 I' F+ P- ~
样式声明写在一对大括号"{}"中; 5 B+ {- W& V. a
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
" v; [6 Y, T9 C7 d"#FF0000"和"#FFFFFF"是属性的值(value)。8 b" {2 Y! Q: p, J+ f/ I
0 O( D H. \$ L: a2.颜色值5 {/ u9 k" }, n' w8 W
# B+ G# O* S9 y7 |" o5 Y: r: z
颜色值可以用RGB值写,例如:# ?0 K' Z; u* R- R
0 B; X* ^8 O" y1 O1 b# ], J
0 f9 t5 E; d' L: W,也可以用十六进制写,就象上面例子
- b) t! ?$ t' i8 h, n( F; J- z" T1 e7 g" q+ J) J) f0 o
. I+ o; J( r1 k如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
/ ?3 Y9 G6 \* N, X' |9 X5 m, X
' F8 @+ \5 h+ t7 R* @+ B/ M1 d3.定义字体
# K% G7 C0 i. F0 ^. w. h% uweb标准推荐如下字体定义方法
- ]5 K9 M0 F8 B; d; a
% J3 {6 Z$ i0 t- d; Sbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
n4 M. J% \2 t1 C$ d# t% c' t- Q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; + |9 x$ r$ I, J) a; a' r
Lucida Grande字体适合Mac OS X; : `, F0 n, S! R1 M0 B
Verdana字体适合所有的Windows系统; . \. b- g* T( N+ Q1 [ k* N/ J
Lucida适合UNIX用户 2 Z" g! e! ?* M3 p3 t
"宋体"适合中文简体用户;
3 @9 C% m1 @/ p4 h! \2 B2 n如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: w" [* @( N+ t) u# l: X* {6 G
2 p1 E* I& w! T# }0 Q4.群选择器
: Y9 q" n5 M9 r' {( `1 n7 g+ B9 ^+ J7 o4 w
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 G2 C- O% K8 M" b* l5 N; M. r& J$ ^
p, td, li { font-size : 12px ; } a1 k6 U+ t- c4 R/ v
就是给li下面的子元素strong定义一个斜体不加粗的样式$ x" T: A7 q- [# g+ B: S7 W) l+ F6 Z
% f3 ~4 @. @9 J, k1 B5 R: Z6.id选择器9 W/ h8 h+ q4 o! U" |9 j6 Z
8 I1 o) a! }3 k0 X- X4 g用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
( k7 [% ]3 @' q7 T1 ^9 `
$ o% ^+ e( e, R1 {5 r
" A, ~# [5 T; e4 L9 n. o然后在样式表里这样定义:; `$ Y: x2 D$ l6 k$ q% c% e( j
( @+ {( W0 ]% J- B; e' y
3 e; @' A; a- f' o% p4 k#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- p9 x7 s& {+ S, I2 J其中"menubar"是你自己定义的id名称。注意在前面加"#"号。+ E1 O$ s3 P4 R* u* I8 X
: V- O- k' f6 L# z- u
id选择器也同样支持派生,例如:
( i1 S4 v7 _$ Q6 d- Y2 F+ Y#menubar p { text-align : right; margin-top : 10px; } $ f; T6 [! \8 v# N
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
# \$ ]- }+ w6 o, s7 L+ L
2 S! [0 }$ f8 U, [" C6.类别选择器4 Y. G9 {4 j7 d' A9 X( u2 Y1 P0 M
6 W6 K* ~( U: X8 `9 M( h- h6 i4 i
在CSS里用一个点开头表示类别选择器定义,例如:
P, A! t. i4 V2 W.14px {color : #f60 ;font-size:14px ;}
8 d3 u( q$ A% {, n; h5 |
) K. t* J1 h S! { r% d4 `在页面中,用class="类别名"的方法调用:
# m$ {$ s5 A4 _, e' v<span class="14px">14px大小的字体</span>
9 K% A5 s" F- H8 _, h# L' Q+ L8 [; `6 P" h3 f. W6 _# h7 m
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
" X2 q$ i- H0 O% S4 K3 ]
4 h$ Y! k7 ~% T5 p( ]* l9 d7.定义链接的样式
1 ?7 O) O4 Q7 B8 Y/ h" lCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如: L. T; v7 ?8 U2 L" B3 h
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}7 ]4 W6 X5 Z# z+ e
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
* i& z3 w7 D2 z$ `9 T0 ga:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
- S7 X# g+ ]4 V0 {$ W( J, fa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
t' }' @( _! w+ l( Q' T
' s- O) g+ D/ G8 y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|