|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
7 U/ Y3 y" Y' ~1 T7 r# F; G# N) t( A. z& A! L& g
1.基本语法规范+ @0 d$ s+ Y: c L2 N
分析一个典型CSS的语句:
% M2 e) ]5 u/ i7 t6 ]- Xp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* o) q5 h. W7 Q$ @# t- i9 y其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; $ }" Q) t. k! t7 b/ V7 i
样式声明写在一对大括号"{}"中;
1 \5 q! B! i- W5 p5 fCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
; K4 J, g* G8 y7 [. \5 |"#FF0000"和"#FFFFFF"是属性的值(value)。
& M) y& ]. [* N5 p6 m5 G3 [" @2 S+ d1 m+ c3 S
2.颜色值
; u e8 v6 b1 E% e! Z3 R
8 j* m( Z" H( \, ?9 b& x8 ~+ S颜色值可以用RGB值写,例如:- W0 D$ ~# [ p3 O" P+ c8 F* q
* M1 W2 H! Z! N% r. [
! j+ r0 w. k+ K1 V# }* K
,也可以用十六进制写,就象上面例子0 o# _4 M& g* t& v) `# \
; [* L: A' P9 P! L
: V# ]" C/ G8 o8 y5 a6 X' p& a; e如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。" k& W/ a3 C" y" B
& d) J6 M J0 o: f# [* }. b
3.定义字体8 X) _7 H3 ?, [0 e5 p/ q3 Q; W+ S
web标准推荐如下字体定义方法
5 J, |5 P4 M8 f0 G" o' _* T O) S! k U \ v. I
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
+ t2 R4 L, h2 m, _( R' f( A字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 2 H2 M) h4 R- O; \/ P
Lucida Grande字体适合Mac OS X;
- ~# d6 U1 M% Q5 f2 v& aVerdana字体适合所有的Windows系统;
& @' X, w7 S8 A3 B; v6 [0 ~, GLucida适合UNIX用户 + v, z/ q5 V0 p4 j' ~5 [
"宋体"适合中文简体用户; 4 C1 z, c: X# t# @
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;3 N6 T) Z) {+ c `& t& O0 r; W
( D; ^, T7 w$ m$ f' Y+ M
4.群选择器* W# i9 k- F7 R3 @+ F) h
# Y$ D% u- U N6 ~7 a当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
! L8 ?8 p' v% {5 z4 X8 ?
7 p7 s' P' F& l p, td, li { font-size : 12px ; } 7 @0 W: z1 R& z3 v8 X* ~1 l# t
就是给li下面的子元素strong定义一个斜体不加粗的样式
6 f/ d% `& U- X; ~8 L, B# V
/ n% G0 S ]% _& `: S: q6.id选择器( h. d0 U& J/ ?/ a }
2 [& K& R0 o% a4 w
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* @, Z# J2 Y3 d) O, s7 V! n+ s \/ _* J" l: P
1 y3 Q. v. p9 z. L# W然后在样式表里这样定义:
- U8 ~2 C8 B- B6 H+ i# c
1 X5 y" c: g9 \4 s) \2 E- Q) W' p3 `, p% r" p; j' \' y) V/ p
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& ]: Q& Y. D# U! W; ~$ ?4 i其中"menubar"是你自己定义的id名称。注意在前面加"#"号。2 Q" k! W6 Q A( O2 d
" x& C. q5 u+ k4 cid选择器也同样支持派生,例如: B p+ B8 P {
#menubar p { text-align : right; margin-top : 10px; }
Y) w4 I% a; b; b这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
4 A! a' R7 ]" G+ z
: o# B0 f5 ]5 b9 r9 ^) }6.类别选择器
- O, {% F1 ^ `2 `/ X: Z4 n, L, ]! B2 R$ u n n2 |
在CSS里用一个点开头表示类别选择器定义,例如:
8 W, N2 Y o, K0 I.14px {color : #f60 ;font-size:14px ;} 6 W/ ~2 `- e. F! }, r) b
$ }5 e; Q- s4 @- V
在页面中,用class="类别名"的方法调用:
2 U% m. ?- x7 X6 o! a! \<span class="14px">14px大小的字体</span>
# a- i# \( D. n, } G7 ]
" H$ Q( w. ]/ w) N' A* Q这个方法比较简单灵活,可以随时根据页面需要新建和删除。 ]. o+ R! e$ o* s M
/ v- k3 s8 f7 F% }4 H7.定义链接的样式
% c* j$ H( T4 i. [6 j# I: e! d) ACSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
9 M+ g' y2 t Y: t D+ ka:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}; r+ q# z. o0 N8 B) a7 @
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
. ]6 E+ U0 T/ I2 va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* k; S8 V' f- P% B, D& j
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
% D% A9 J/ L# X/ E6 U" ]
) l6 T+ M8 Z/ X6 z8 o! i* ^以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|