|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; ?* x. M! C* W! k1 V5 K7 Z0 x
& y, @# K- P5 h9 k1.基本语法规范3 ?4 ^1 Y& Y9 }1 O
分析一个典型CSS的语句:# ^; M2 c' a' t/ S1 j2 T
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} " W6 ^4 B/ n! u
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
4 L0 Y3 L( a/ ?4 X样式声明写在一对大括号"{}"中;
- a Y" ]* B9 A. q2 c+ d0 I4 JCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
7 _7 F3 ?5 c# w. X6 D7 M"#FF0000"和"#FFFFFF"是属性的值(value)。
6 o( k% c) |: q; U5 Y/ S' u6 f7 S5 P" N3 o# d6 e! R1 ~
2.颜色值
" @4 s+ S6 i# R- K; D' i$ \- @- I$ v* V# }
颜色值可以用RGB值写,例如:
" d4 I- P7 j+ N, y- t2 ~+ y
3 M" T6 n% f6 Y
/ e- F% Q" |! k$ w,也可以用十六进制写,就象上面例子; I: }* _0 F8 V0 j) t# o" X, L
$ y* [, m6 q$ l6 B; ~$ [% y$ E
$ u$ T; H5 l. O4 o如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
- ~- ^1 g! K; r4 S. C- Q5 c) o$ `1 x) g
3.定义字体* u+ d7 p& ^: s: n9 }7 C3 ~
web标准推荐如下字体定义方法
2 S/ y4 K% |1 H2 d" w" ]# j
# F6 `# s* H/ Abody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
9 b$ g+ a- t8 k" L+ f( ~1 i字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
; d- r4 ^/ U( Z, T2 n1 A2 ]- p+ CLucida Grande字体适合Mac OS X;
2 J# M/ C. {! @, m8 t6 f0 n* {Verdana字体适合所有的Windows系统;
/ a$ ~4 \9 u- t- ^Lucida适合UNIX用户 h" [( T! i' r0 K7 k. N
"宋体"适合中文简体用户; ) V( [/ Q/ E6 }( q: x
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;$ p9 r0 |) ?3 O% }- r3 Z
5 s; _$ G! G# {! l4 g
4.群选择器 t, Y3 R/ L! m5 g# L6 w# E
Q+ ~% c/ X4 A/ |( r* ?" i9 @当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:1 x9 H7 N5 V1 S+ H
8 p" n. B) D1 _% P4 H4 L# D
p, td, li { font-size : 12px ; } 8 J8 J# s6 E5 |3 z! j! `# S
就是给li下面的子元素strong定义一个斜体不加粗的样式
8 u- z& i% A1 p3 F) K+ C4 T7 u: K' d/ g3 Q- c e
6.id选择器 R% r, H/ e& }( ]% {+ G. M% Q( e
3 X6 y' N. C& ~" ]; n( N
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; `) Y( m7 T- n* G3 @0 K s
- q$ T6 `( V# }
- g& G% E: G0 h/ v8 F然后在样式表里这样定义:
: l) T3 X: m0 @! B- k" V& S2 g) i% F5 I; F; J
+ f! u$ R4 k3 b i: X; J" b#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} . l- b7 z0 {6 w( g, G
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 Q* x& q, I- f4 S0 K |
: _7 Q' @3 ]" T; d6 K7 ~- n- o
id选择器也同样支持派生,例如:
4 i4 x. O: r" d5 f9 f; c5 i! {8 Q#menubar p { text-align : right; margin-top : 10px; } 6 k, U0 A2 a* ~' ^3 {5 z( a" l" C$ P
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
2 ^ q8 I- @8 Y6 G
$ T) ` Y! w# n/ o$ ~6.类别选择器
3 r! X- L' l' M3 R/ D$ u" @- g. m8 x. b6 I& C9 \1 Y
在CSS里用一个点开头表示类别选择器定义,例如:! h0 F1 C* Y7 z; L0 [. F
.14px {color : #f60 ;font-size:14px ;}
4 }% W$ s% {8 b* K2 ?/ }3 z) {1 r0 M
在页面中,用class="类别名"的方法调用:
' c# w7 c) M$ V2 V2 I<span class="14px">14px大小的字体</span>
) s9 y# g- O+ I* B: d0 {# s; m- L, o% Z( g" Z3 J; J- |
这个方法比较简单灵活,可以随时根据页面需要新建和删除。6 O7 P4 |1 m b @7 @/ A- G4 t
. ~0 ]7 ~9 @; s7 X
7.定义链接的样式2 H0 f/ I4 A8 s1 e$ M9 k# A! N* A
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
! x2 b& \+ A/ {% d8 e* Ka:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}2 B% u$ \2 Z% `% j. w1 g, H1 w4 U0 f
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}- k& R5 B2 p! E1 D6 ^( d0 ?
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}! L' k" T/ S) F/ m' T3 ?
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
v1 i) c+ L2 z$ g
( K" h0 I" A% ]( i以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|