|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1 y p. E( D. F1 _ N3 F
z. N, x- A. J% b: ~! J6 g1.基本语法规范& e" A* R$ V6 U8 {7 F
分析一个典型CSS的语句:! b1 q; s; Y/ K. x1 q
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
3 o+ f1 b4 ~4 p- q' |其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; + [5 Y3 K7 e- {- B, A( y `8 ]/ g" j
样式声明写在一对大括号"{}"中;
8 E: S |# j( o9 t( c" \0 mCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
+ V2 y6 E3 f0 V"#FF0000"和"#FFFFFF"是属性的值(value)。
. y7 i( j+ u* R/ W/ Q) v+ `$ Z: c6 I/ X0 w% s
2.颜色值2 G* ]. [( R5 O+ `1 G* G. h& p
- K$ M# ?& E% H颜色值可以用RGB值写,例如:; g4 F! p! Q, |: Q6 B5 b
# Z1 W9 p, |5 p
9 g% ]1 g( ~9 D/ V- M
,也可以用十六进制写,就象上面例子
9 I5 l* b& `6 b' p' g: D4 e6 t' y! B5 E+ g# Y+ _* }
8 I: S( d% q5 t# h R8 O6 n
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。7 R8 t! j1 o1 k
9 R3 Y+ O, A* h" }. I2 ?( p) X
3.定义字体
, N' z; m Y% ?6 m- Iweb标准推荐如下字体定义方法
9 L4 Z2 `/ P% h) x4 M l z0 [* Y9 W2 h# h( ^ l5 Q' O6 a: G
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } , I' I* B: J. K7 E
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ' N% L( x& k7 }* q2 |3 o1 Y8 M: J k
Lucida Grande字体适合Mac OS X;
: R3 r& M6 @( @Verdana字体适合所有的Windows系统; ) p6 t x3 C6 m* R! Y$ I4 \7 o
Lucida适合UNIX用户 2 ^. [" L* F( n8 q# |* `& T6 G% t
"宋体"适合中文简体用户;
0 ]$ L ]( ?8 x$ H如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
! I& ^/ E) u! T- Y: }9 Z& O( [# v" v+ C8 k+ n, D% [. k
4.群选择器
+ X6 y5 u: x9 f* [* E I2 u
, i* b/ K' s/ y( x9 v+ e, Q ]0 z当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:. G* \# I: t4 c3 z; H: w
% ~2 o8 x% f7 u- I% i5 C+ A8 C p, td, li { font-size : 12px ; }
$ i& T+ ?+ L! D3 o4 P: ]! F7 b1 \就是给li下面的子元素strong定义一个斜体不加粗的样式! Q" M6 t' _5 _5 G' L
5 o/ A" h9 a1 _" P, P4 O5 b M6.id选择器; ~2 F+ F* m6 G$ _" C+ N
. k% @: }8 u K- @' t用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
' q; n2 }' r% N" y' r0 t6 p! t4 l$ v) {( ]! ]3 M
7 P! D' y9 S& j, O+ K2 k5 M然后在样式表里这样定义:" |. [& E7 b7 z% i+ H/ |
9 m) @, A i! \: R' T" l) m7 e8 j7 u6 b7 ?/ ?" `! E0 d9 W! }% H
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
/ B2 y! ]: d9 j& `: d$ B- b其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
1 N; k) D: m. c% T# C; B. [6 _# Y2 x% o' v9 `$ `& E1 e
id选择器也同样支持派生,例如:
( Z, k* W$ a) U, K) [" ]#menubar p { text-align : right; margin-top : 10px; } % s: U" X; l2 U/ E; p+ v9 D. k
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。1 f8 j% v) }/ @3 g p# c! y. u) t
+ l6 Y6 d% R. m3 L
6.类别选择器/ I2 b# h: r& f3 @+ z" {/ t4 W
% d3 c( c6 x4 {
在CSS里用一个点开头表示类别选择器定义,例如:
3 i. j, f& Z, z1 h9 n3 K.14px {color : #f60 ;font-size:14px ;} 3 T3 P# B {) Q1 P% U% p. P
; T: o1 Y' w. o' X! F+ s2 O% r在页面中,用class="类别名"的方法调用:
* ^6 \* a. p( s2 W9 I3 t$ n<span class="14px">14px大小的字体</span> 3 U5 K6 d3 i* |( }( h
7 K2 W# U' X: I% z) x6 ~5 U2 G7 {
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
0 F3 @$ c7 G$ p6 R0 D3 v
& O/ W5 l' I$ Y( t$ S! N7.定义链接的样式' r3 L+ I+ R0 k3 B3 O8 f- G
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:: T" f8 S/ u# W6 Z( @* T
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* \/ @- ^6 P) |! G' A2 @" d9 ]
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}: {, O1 N) i0 s3 G
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}6 y! @" y0 F( v0 i8 l
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} + c: Y3 K) y9 ^
: ^4 B& T2 j7 t3 J7 y+ B) h1 w以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|