|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。- _" K# p1 E' F9 w# S
, w( S7 ? @) P! M, a
1.基本语法规范
" ?2 U% Y, t/ K5 J分析一个典型CSS的语句:: F! i7 a" C% A
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
3 w1 T5 @8 S0 m) z" j0 F7 X其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
0 q& ^+ y! ^1 \8 b+ I5 |样式声明写在一对大括号"{}"中;
9 a" k! p0 y: W6 D/ R& G3 n; }COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; : @( S5 u3 [" e
"#FF0000"和"#FFFFFF"是属性的值(value)。
( t" Q. f/ U0 y/ Q" b, i7 f% ?, R# O" k# Y1 P) H
2.颜色值; ^3 R& u3 o# T6 x
8 f+ `: q: m( Y1 C颜色值可以用RGB值写,例如:
" e$ f; w/ q1 A$ M6 ]. r. v# w
, P! |$ a+ o" t+ K J. L+ a6 Z8 ?/ e7 n! o' F2 v. y
,也可以用十六进制写,就象上面例子
/ D1 l, K: p5 m" X
5 v2 T% z/ A# W, B% K* ?3 |* ~* u4 E' O/ M: ^5 ~3 K8 q9 ~* d
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。0 b/ X) J2 M# n+ ?& ]7 G
% k/ X- E! }1 J% R6 H! ?- w
3.定义字体7 C7 ?( v1 f" l8 S
web标准推荐如下字体定义方法
& ^4 J8 P K2 b& r, e$ K, a) ~, r% ]
$ C" T* s$ n* K8 ]body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; o# B- W. @0 c9 I4 |! q: w字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; $ f. A _) X7 G5 Y
Lucida Grande字体适合Mac OS X; ( L+ Z7 B* l( g* U, s% a0 l
Verdana字体适合所有的Windows系统; ' G2 p! V1 W f H& L. y R
Lucida适合UNIX用户
, {$ m" ~# A: y1 j"宋体"适合中文简体用户;
( s9 y+ ~+ @1 |; u如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
; F7 h# v3 E& c4 b6 w$ g) G
: O7 x! v" A6 [4.群选择器; G4 n1 C* Q4 S8 ~0 U5 D- B
( y: Y: |5 c6 t* ]" a
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
! e! M* a0 X; k1 H) r; e" B% g; s1 w6 F: y/ n1 J4 p- A8 j
p, td, li { font-size : 12px ; }
% D2 ~2 J& t! Y1 g1 a就是给li下面的子元素strong定义一个斜体不加粗的样式+ P, y) I; c1 X3 x# M
% x7 A G B$ C& h6.id选择器
% k* x, t* S! M( a) h' c2 [& u- [9 v. z% J& e8 ]& F f' F
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. O \8 m# x) S9 i( p
; h" a* X. H& s [8 a$ `
6 I( Q6 z( q7 f1 |然后在样式表里这样定义:0 B5 i% e& S$ A2 o: J9 {
n" I4 y5 }* R% I F+ l6 V+ x$ k1 O+ K7 n% r# P9 S
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
1 I6 D' x% J$ ~$ p' m% {其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, N& _5 a$ `# J* D' T0 Z
& B$ A3 B( }* E9 aid选择器也同样支持派生,例如:' n5 d9 O2 H! m1 @1 C( @8 W( U; @
#menubar p { text-align : right; margin-top : 10px; } ; y9 B' }( I) h. K
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。* a) V/ {7 n7 {' `; R& t4 A
7 n5 B* Y1 x y
6.类别选择器4 i3 |8 F o) U9 i" A( Q
) n e" b& {, H0 q( M0 u5 Q
在CSS里用一个点开头表示类别选择器定义,例如:: ?. g. t9 n) R* Q @
.14px {color : #f60 ;font-size:14px ;} + H1 J; p: D5 _% F# X
a6 U8 W( W( ?2 L* p' N9 a在页面中,用class="类别名"的方法调用:
5 O3 g8 v; t: F<span class="14px">14px大小的字体</span>
* R9 ^1 x# Z3 a+ }' d1 y9 Q5 o4 n2 R0 _; F+ S6 G- ]1 o
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: |5 s8 ~$ R6 r7 L5 c! N
& g9 d- g* f! D7.定义链接的样式
# I3 k& O+ v; K$ @7 kCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
3 K7 E7 j) V: @a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}8 d+ |8 j( K, g; o
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 v( j: ~! m8 V' i) b2 l
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}$ A8 U$ V; R. V; z8 C
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} # |' @5 V- D9 z( R6 h! L- z/ W
2 X! x5 b j! ^+ {% n+ j* R
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|