|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
5 J. f6 i+ i* x$ R
3 I3 }2 A. u2 Y1.基本语法规范; h( p$ n+ \7 t. n0 u' _2 m; `/ H
分析一个典型CSS的语句:' z$ e: X$ E3 ^$ o% U8 @' I- {
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
0 A) e( ]( e; M2 ]其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
! K9 ` y9 j- `) c' j样式声明写在一对大括号"{}"中;
% U9 j6 ]4 z: s: ]( E; yCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
% b* f/ P0 c% ^. T' ]4 ]"#FF0000"和"#FFFFFF"是属性的值(value)。$ { R; L) @: @' H$ l" Y1 F) Q+ w
3 A- f q: V& E. I$ G- F2.颜色值5 S. c9 G9 f% a9 O( F9 x6 T+ u7 M
+ k' A0 ]0 \) N1 e! Y; B4 f: B颜色值可以用RGB值写,例如:! |! s( R, q9 _; {: C4 Y
, X4 |0 ^) V3 d
/ {) u' A: G- ]5 t,也可以用十六进制写,就象上面例子
) |2 J. E: c9 E0 w- u; C4 Y% ?
& J3 g- Q; R& M8 [$ p5 f
- u( X# n& W- E. m* G! O如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
% o4 _: X, L$ W# `* i" \$ `* X1 H; y$ ]( z( X% H$ X1 q
3.定义字体, J s5 w) z# J5 d1 W2 m& A
web标准推荐如下字体定义方法
- H, p5 j1 u' ?7 s5 m! m3 l4 T: g1 V0 F1 e' x! i# g" C
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
1 Z6 R. A) G( X0 z字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
- p0 {' H! c' }: B2 }Lucida Grande字体适合Mac OS X;
7 k0 C0 }0 X1 \9 I6 |Verdana字体适合所有的Windows系统;
* G. m8 ^7 Z6 y! {+ t3 [Lucida适合UNIX用户
. N3 l9 K5 L5 i* s, q6 J"宋体"适合中文简体用户;
& \9 f" ~( u. O# t0 A- l5 `如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: q7 i- ?4 P: V) H: E! b0 B/ U7 Q
4.群选择器
4 }7 d1 \0 @) q1 ~2 \# n I5 f0 \6 C W9 n2 K
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:3 J6 B9 C a4 |+ U. O: K s4 W g' }
8 k, ~8 Z. ?4 i# X) V q+ r p, td, li { font-size : 12px ; }
9 D$ O- I1 n: n0 t* C; |0 P! Y就是给li下面的子元素strong定义一个斜体不加粗的样式 f$ y. S7 G/ G1 n
9 d" f4 V2 O! p
6.id选择器$ w& ^* ]# y$ n8 s3 Z
. u% y2 b; d* z v+ ~) @, @3 ^0 _
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层8 v* d9 A/ R% t
$ ?, k2 E+ G4 e3 M) i) b& Q
1 \- I6 y: ?& f; F: I1 G/ w然后在样式表里这样定义:5 G$ g4 {. m# Z0 p' W
. C, S( y: [/ g+ k! U9 v! u
2 N- v/ v+ v$ v/ m#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
* O3 ]" M P, ~* E/ }% t其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
; J1 J% X( v }! d
( |+ t( m* c: z5 d: X& l9 Iid选择器也同样支持派生,例如:
$ H4 ]8 f+ z8 p w) |#menubar p { text-align : right; margin-top : 10px; } 4 D w( \% b6 i, a9 X9 W0 e
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。% x. P) G1 k( \9 j# }% c+ T
C& R$ r0 u5 N" L) y
6.类别选择器
. [8 Z# e6 R8 B; x$ C
5 H8 c* W0 J( s8 |6 b在CSS里用一个点开头表示类别选择器定义,例如:1 L6 B D! r3 A- |, m
.14px {color : #f60 ;font-size:14px ;}
+ a9 }" ?' y b2 c; r- x8 j# G
( V4 ` u" P. p; O2 ?( a在页面中,用class="类别名"的方法调用:
/ k0 o( d- J" b E<span class="14px">14px大小的字体</span> ) G, n7 e8 s2 V4 m8 v% B1 V% H+ R
0 @ e3 Y" B3 ?0 e1 @
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
* S* [5 ?$ d2 B% ^) w G8 D b
6 k* w" c( D; l7.定义链接的样式
& R4 e3 N; v/ ~+ f9 H! PCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:1 V8 l, |( t3 i" E
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}# u7 g4 H$ @ Z" i7 [4 S
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}. U: V& z9 W- s! Z h
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}4 i5 _8 T8 K1 Y* K9 H" ~" G" n* S
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
) j! h' ]. w! e6 m2 `
: m0 ]- v+ i" Y# s9 _6 `& T以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|