|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。: d" F- U) o u& U
( i. {0 {5 O4 d4 } T {6 A# g1.基本语法规范/ c* Y6 [9 e0 y& ]( X
分析一个典型CSS的语句:, r0 Q; v$ ]6 W$ U
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- A; c1 B* P" p4 H8 ]' q4 [其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
+ g( c! \$ ~, `4 Y0 h/ A1 X样式声明写在一对大括号"{}"中;
* R% P( _0 I% J- k. Q8 E9 uCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
- l( S; \# `6 ~. T! m1 ~"#FF0000"和"#FFFFFF"是属性的值(value)。, Q& \/ {" r* n$ Q/ S4 u* M
0 {5 Z/ i4 m7 @5 Z
2.颜色值
) a Z1 ?8 t! p! T! t% `
# _! O5 T/ K, s/ H$ r颜色值可以用RGB值写,例如: k1 L2 x" [$ ?" d3 F$ \
# j" W& \2 T+ P: ?3 {
, f/ Z, ^. u& ^5 {: g; d
,也可以用十六进制写,就象上面例子2 W- r/ Y# R* f" D& ]' ^
0 z4 C! A7 B" W: p5 j8 i
- @ b! t' m) C3 m( V5 T- l如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
7 Y0 k k5 U# j
' J6 I1 ]* W* L3 }9 o. b) w3.定义字体
3 T/ F0 ~# ]$ k3 k. { Tweb标准推荐如下字体定义方法1 P% a( ~' _/ p6 m7 C$ P9 I% w
* |. n) @; Q, X( U, Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) F- y1 X4 O I, g7 l- O r字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
* X% k2 s# a h6 g% _4 zLucida Grande字体适合Mac OS X;
- G1 `) T- u8 D6 |# o4 ~$ k2 ]Verdana字体适合所有的Windows系统;
; ^; m; F* s( T! a8 m4 BLucida适合UNIX用户 1 @( c/ \* l; k: A Z; r
"宋体"适合中文简体用户;
' p, f d/ ^ s+ ~+ j- R' ?如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;3 B# F( r# w" R/ a; u1 R+ Q
9 l4 c5 e' D0 G! |# W; [# e: k
4.群选择器* F3 y! ~. @3 ~1 q! q& f
$ W: Z/ Q9 a1 g6 j4 Q5 p6 b当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 N( @3 ]2 ^1 B& M7 T
, ?3 C8 C( X7 }' v0 L1 C- o: m& u! S p, td, li { font-size : 12px ; }
/ b. t' X1 y1 l& D就是给li下面的子元素strong定义一个斜体不加粗的样式0 ^5 p3 \" q6 M9 a
* O1 q( R4 p2 {+ U8 z" o; ~- v
6.id选择器
5 q' g8 Y% D8 o
) n+ [1 Y9 d" a1 T! V6 w3 q1 m$ K, x用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
& Y- j- ^. |3 ?/ Z% @8 L# g
) D9 a' F6 g+ b7 h7 a2 J1 ?- [) m( P+ z9 r# z& V* g
然后在样式表里这样定义:3 m* f9 a+ L( Q+ y
8 o, d0 b" B* o
6 A' H9 ^' U0 c. |" W#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( Q3 B4 E% j9 L! n" `% q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。' Z2 R) O: u- y
3 j# {4 `) d+ O1 p& n/ k% p. y
id选择器也同样支持派生,例如:% g: o, c; r* Y- N% R
#menubar p { text-align : right; margin-top : 10px; }
9 ~8 B7 j# N0 x这个方法主要用来定义层和那些比较复杂,有多个派生的元素。4 e( c% N+ _& v3 ~
: ?! H& t7 J' G) l/ X3 a8 h6.类别选择器
8 ?5 l1 h5 O5 z
' _, g5 L, y) E% h) _在CSS里用一个点开头表示类别选择器定义,例如:
0 C% _; {6 Q, G7 [.14px {color : #f60 ;font-size:14px ;}
2 P$ V ~; D- u( _% w3 \/ ]' f7 a6 n. e
在页面中,用class="类别名"的方法调用:: G; a, ?7 ]3 Z
<span class="14px">14px大小的字体</span> 2 ~3 w; V: u. N3 h* r r f
" I$ n+ H3 L, x5 [" t* W这个方法比较简单灵活,可以随时根据页面需要新建和删除。
+ c' q2 ^# e6 a2 u5 }2 p% Z3 G; c3 m; d& _- U" L8 B3 m" b8 O
7.定义链接的样式
; p. f( S0 n I& v9 zCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:* Z- {0 E: S/ a
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}+ P9 R$ {( Z5 ^( u O3 p
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
: D2 C" Y3 E1 n" O% ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( K7 s# d9 T5 V( L. h9 W
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
; ~' o4 O: r- b
# a ?' K3 J( ]. @9 i9 u& G5 e以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|