|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1 B# h+ I# Q! o& Z# _
, z+ H2 W( Y+ ^1.基本语法规范
. C' b- |# t; ~2 j/ v- p分析一个典型CSS的语句:5 x" d- ]5 k$ j N1 T7 t5 b( b# ]
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} : V" i" |( v1 S8 Z, o7 z2 G
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 {+ Z2 V/ @" }样式声明写在一对大括号"{}"中; : Y$ }3 I8 k2 d9 e3 Q
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 j# n3 Q: s7 i& n7 T9 Y
"#FF0000"和"#FFFFFF"是属性的值(value)。% o/ K* P# g1 U8 k' s' f
2 y6 e; y8 z0 I9 D4 W# k
2.颜色值6 P/ O! R0 E; m
3 S% O( a7 W* S3 p. j, E4 Q颜色值可以用RGB值写,例如:
5 f% Q6 n3 M1 |/ T: {2 l) D& ^" W) }) d
2 i, |8 P' v0 k
,也可以用十六进制写,就象上面例子' n/ K. s2 _+ D
* b1 W g8 b) f+ H
/ a& @. `/ L& |6 B) V1 h, Q如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
% W& ^* C9 U4 C6 [: e) [% A
5 P6 F( X8 `. t3.定义字体7 I2 D0 `- x+ V" x0 w/ t5 {
web标准推荐如下字体定义方法6 |* |8 y( Q" P u. j, V6 z
- ?+ Z) v8 \4 x+ a" c' ~# q5 o
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } # M8 w5 ^8 n3 L8 `6 J
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; : X0 T2 x8 Z! b9 Y% |- A
Lucida Grande字体适合Mac OS X; . u3 e0 i1 ~+ _
Verdana字体适合所有的Windows系统;
. R j) ~' V! j, i: `( pLucida适合UNIX用户 7 V2 ~- w$ G! n! u
"宋体"适合中文简体用户;
% h! Q: x- ~2 I N如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
7 `9 c2 e' I* G' R$ I& Y6 F+ ]2 I& D- {
4.群选择器) J; v! o4 `( U R% _
! N/ U7 T" \$ \2 d+ g# P6 l, ~当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
! v$ K' |) f+ ^: s0 h% _ H/ q9 G, F3 K1 K+ u
p, td, li { font-size : 12px ; }
9 z* h" @& W; v2 C* X就是给li下面的子元素strong定义一个斜体不加粗的样式
; E8 T8 A7 ~, j8 V' |* ^: g( Z6 k- P' `$ m
6.id选择器
$ F9 Z8 `- n9 z- P# o+ ?8 y% u' s) S$ v- O
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
0 Y* G8 E# {" t6 k# B! j! n
7 F1 S4 @* U4 ]2 v6 X t5 [2 J
0 A* y/ J1 m) l2 e& M- ~/ R然后在样式表里这样定义:9 g( @5 ^- q; o# l. q) P
# C* _& d7 q5 j) Y
6 g% z1 h5 M" s" q1 {6 ^
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ) _: J( q$ P8 C1 t A
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
! d5 C, T$ C% J. J- z, h# _9 P. u1 o; b. v/ I3 }
id选择器也同样支持派生,例如:4 v& I, X. P; v7 Y( {/ S; T. ]4 p
#menubar p { text-align : right; margin-top : 10px; } * i; R B- s& D! M
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。5 a. Y8 V2 o9 o4 c
3 c: v7 S' |1 f3 Z" s6 @* x6.类别选择器
) N7 u/ k$ `' B3 G( M' k) }$ E5 n
- d( f" \1 C9 C在CSS里用一个点开头表示类别选择器定义,例如:
2 ?3 k4 {1 q% N6 s.14px {color : #f60 ;font-size:14px ;}
3 D& a) F {1 |: y9 L' C8 W
: K3 q( F- B0 C8 v+ ]" W( n在页面中,用class="类别名"的方法调用:
! |, G1 l, J. l3 u& n5 @ ^<span class="14px">14px大小的字体</span>
9 F" y: p) G y+ L8 k, ~
, G9 F1 I8 X4 q这个方法比较简单灵活,可以随时根据页面需要新建和删除。2 k& [( M% V0 c+ ~
. D# T& h+ i5 `/ V# c# ?7.定义链接的样式
3 L7 ^1 ^8 ~) K; z7 b4 F3 @CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如: x! x5 T, O4 v3 [5 I9 F
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
, y* I9 n6 n( q m3 ^a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}# Y- S& m$ a/ ~& D# Q8 b. C
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( \* q& h9 P k+ L9 x y
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 5 w c! Z. f( E# I: Z
3 G# _( j# l" l- x
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|