|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
- n6 u Q. I3 v2 }+ a/ z4 m' T. ?
1.基本语法规范
; |3 j9 F4 A- t' K! J分析一个典型CSS的语句:/ P4 o7 d9 S8 @' H' H1 e. x4 [
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* Z' g4 l( g6 N# R- S其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
# I* N1 _1 d1 U+ D3 [) y A样式声明写在一对大括号"{}"中; / t7 x3 o. B: Z9 F" X; b
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; : C4 q5 a$ I4 f3 Z! V! M& |
"#FF0000"和"#FFFFFF"是属性的值(value)。
: N2 H+ S3 z; \6 v" E ~, h6 b
$ K- L6 G" X4 S6 V- Z& t/ c2.颜色值
2 E8 P& A, n* F4 M3 N/ F( L9 S" e8 G
7 D, q( q8 M- i" o颜色值可以用RGB值写,例如:
0 \, J( [* s l \6 S+ g+ \( z" V- u5 l w6 G9 q. V
! b' l- a$ r0 A1 ^
,也可以用十六进制写,就象上面例子2 P, J u. [ d9 I
- X( C! N- o4 @1 J- Z
8 f9 @; Q, Z* U# ^! C o
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
6 A( M% T9 e9 i4 Z( ~3 Q
3 p: b5 F5 l& Q' x& F3.定义字体
* n0 b+ G3 A9 _4 M" P7 wweb标准推荐如下字体定义方法
* Y' f) C4 [ C! n: Q/ x4 S
, q( M( r. o. P+ O/ Tbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
! G; ]* j1 H& ^* Y# |2 c n3 m0 M字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
( b+ |, p+ s+ j v) W4 d5 fLucida Grande字体适合Mac OS X; / c$ d m* K4 m G; f: Z. a8 p
Verdana字体适合所有的Windows系统;
# a8 H+ [. n. U' k4 z. E" dLucida适合UNIX用户 - g7 f B3 K6 R( T( C: X
"宋体"适合中文简体用户; , d/ `* G2 X: u8 b1 D$ O, N
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
5 m) F( [1 P0 T8 l& p* Y3 p
4 u6 M; _! O3 y9 o& C# U4.群选择器/ \* \9 A$ e m- V' U
& R8 v4 w3 ?- i: ?
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
2 z3 U' l D* v6 f- @
6 I, l8 _( i& L, z3 U* V p, td, li { font-size : 12px ; }
7 S3 y- o0 U# C- o/ Q) [$ f) P) m; ]就是给li下面的子元素strong定义一个斜体不加粗的样式3 [& k8 S f7 ^$ R
' q& I+ L. ^3 {( d% w6.id选择器
6 J& A3 {! z$ Q6 O- S7 g% |% ~) Z* V
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
: C6 b! t0 N- k2 j* h
n0 b/ ]! h; u7 K1 u9 Z1 `: M0 i& y! }' ^8 _
然后在样式表里这样定义:
! E0 S* }3 r! |% K9 x' e
7 X( |" Q& z* d2 ]/ j# B( M K- |7 O) P& g+ B) l
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 3 |/ _; c7 r) n B: r
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# \9 {. A% n# s& Q; D; t
- x% q& ~" N! P/ U8 x
id选择器也同样支持派生,例如:* G3 C% }' c0 [( h2 h
#menubar p { text-align : right; margin-top : 10px; } 5 h6 }& w3 |9 K& {5 f$ {- y
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。9 r: I6 ]7 Y. |0 o. p4 V# g
: d% j/ l9 f& H/ O5 o6.类别选择器
7 z# C6 i& u3 K* y5 }. C
r2 w- f/ a+ ]7 {. P/ l在CSS里用一个点开头表示类别选择器定义,例如:
- y/ q: K9 H0 F$ C! Z- e% c# z4 X8 r.14px {color : #f60 ;font-size:14px ;}
% ?8 M3 |. k5 h' S' O* W0 J; Z
+ V+ k, o$ }) G, U; ~) J在页面中,用class="类别名"的方法调用:7 P0 B; K( n. z l
<span class="14px">14px大小的字体</span>
, `( N6 Q3 M( Z7 _' g2 A! }4 {9 L5 e* o! ?1 y
这个方法比较简单灵活,可以随时根据页面需要新建和删除。, O; ~7 _ v7 i- g, X
) k6 [+ {) u$ @2 D! o% L! ?2 q( H; {
7.定义链接的样式% S( R; S& _/ N5 K
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% ~ |1 y; q9 H$ f5 q! T/ c4 N
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
! O5 t$ Q$ H, H, Ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
3 v+ n( |) \9 Y qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
+ H6 |0 Q& W) B: o$ A; ~a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 5 J3 k/ f+ ^; x/ l ~( w0 A
+ ~ \! _7 o( N) J9 w; q$ D以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|