|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。( k' m! P" j6 Q8 p$ W- ^
4 a. \+ w7 v7 Z1 v1.基本语法规范( I: f& H( R1 d3 H
分析一个典型CSS的语句:1 v' v) \& z1 b' Z6 F+ H
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} @8 V2 o: ~$ u/ B1 r
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 9 _% Y9 s& E9 L- n8 @
样式声明写在一对大括号"{}"中;
. [8 q) ^! g$ u, l* ICOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 0 u# a2 R" G+ y
"#FF0000"和"#FFFFFF"是属性的值(value)。# X" o* J9 ?0 E9 O
) k [" t! Y% i
2.颜色值: o; J4 b0 {+ c1 E7 [2 S
2 b6 l( l( r* {- b4 x9 U& c0 D' k4 u: l颜色值可以用RGB值写,例如:5 G* ~" Z j/ w# d0 Y* V, ^/ J+ b
' Y) k# n7 C7 ? T$ R5 Q( ^( @) Q' m2 r- Z6 D# |# t6 j
,也可以用十六进制写,就象上面例子 B# ?! ?3 H- Z
- Y% R6 B& N: @( I) P' v' u% R/ f% T# `0 f
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。+ r# J# X6 C* Y
6 ?- W7 Y; B1 E0 ?& Y3.定义字体. Q* ~0 l, u$ s, b4 P9 ^8 |# l6 `
web标准推荐如下字体定义方法
M" P7 a+ ^; a4 `) x$ d/ X% p# ]2 ?; D0 U- o
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } $ O1 C2 J/ i. T8 u+ k8 n! |, K
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; : U, r$ M4 |3 X$ s6 ~
Lucida Grande字体适合Mac OS X; 3 W' Z$ z E2 \1 _. k% b
Verdana字体适合所有的Windows系统; ) d# r0 I2 ~+ D# a" r4 u
Lucida适合UNIX用户 & I! q& `/ }* W+ F+ b q! P" R* B
"宋体"适合中文简体用户;
* @1 l* j6 T \如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
1 Y- P% v) U- N& Z8 m4 J
. q2 ?6 e6 }5 J' G f4.群选择器
$ O! T- c# y- v; a5 l- N
5 ]) z8 t: Y6 U当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:7 v4 Q/ D" ], O0 w& H3 d
Q. h3 p& H, l- c. q3 c+ r p, td, li { font-size : 12px ; } 4 ]9 C& E+ r& K- ^6 S3 K C
就是给li下面的子元素strong定义一个斜体不加粗的样式
1 O2 P* D; d( n' X+ D5 p9 y* G0 `& e; l0 P y* a9 R# ?5 P) l( [
6.id选择器
- L K1 f; j( ~ o2 n: j. j
$ \$ ^' a4 }) i! k- @) J用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
3 k0 v, m4 J* `4 _- h+ q1 D+ f0 }
6 A4 z8 Z4 v: j: H
然后在样式表里这样定义:
0 E, O# x6 G0 _% x0 @+ [ a
3 \1 ?5 b# j! @! }6 n" v6 |
- `. Z6 |0 V- ^6 P" w1 |' J#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} % @# t) K: m, d$ k) U! m3 O; i
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
- |) F7 Q6 ^; V' Y5 o [" D' E
/ i) A" F& f: j8 lid选择器也同样支持派生,例如:; y" y1 [4 I' ~ o
#menubar p { text-align : right; margin-top : 10px; } * Y1 \7 r' u3 e( _$ _# m- [
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
1 C6 h/ @: q5 W# s: z8 C/ p+ D% M# m
. G4 J, B3 }, g4 E6.类别选择器, V( T+ b' ?- N- ~4 k( F8 K4 J+ E* l
5 v4 N9 x; f/ d% c1 W在CSS里用一个点开头表示类别选择器定义,例如:
$ k! R3 ]: k7 H9 N.14px {color : #f60 ;font-size:14px ;} : w2 s2 T" g: e/ P7 s+ h
) r" ~& M" `/ u+ x: ~在页面中,用class="类别名"的方法调用:
* _ C2 {9 B4 ?. X0 m8 g! \: B<span class="14px">14px大小的字体</span>
1 J! n. I F3 a" y3 }8 y
" y5 D8 {# Z& W8 ~& A6 d# f这个方法比较简单灵活,可以随时根据页面需要新建和删除。
4 r( ]0 _9 t* t t: U1 | i' [) m& B- V
* [! w# c8 ~. V0 N& \5 x# O0 f7.定义链接的样式
- [4 D0 V) s9 v2 RCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:, i' P9 p! v6 W, y, X: D
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}. _ V2 T# g' ?- J3 z3 k2 A9 M. b9 o
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 u0 r) \1 \! P5 O" D& Ua:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& N6 A- U3 t$ x" Q
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 1 g; Z$ |4 @" V: q) o% e& Y* {
* ]0 h! U7 P, J9 x- N% W9 }, Q
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|