|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
4 F3 |7 E% l- w
: h, f- t9 O3 a! L, p1.基本语法规范
6 C9 [7 I( S4 E% v( ?) K+ S* `分析一个典型CSS的语句:
$ E, e s% H/ i A1 ip {COLOR:#FF0000;BACKGROUND:#FFFFFF} + l% N9 r$ D2 x
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
4 I8 Q" L7 S! N" {1 r样式声明写在一对大括号"{}"中;
: t; }$ R2 x9 ~" r) P/ g9 {* yCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
- R* _6 ]" }3 x) Q"#FF0000"和"#FFFFFF"是属性的值(value)。: A+ i# Z1 K3 l9 c* U
9 n5 p4 o$ s+ m& i1 N0 h
2.颜色值1 T# w: [+ I+ x8 } h
' p( |4 [4 K, C" A
颜色值可以用RGB值写,例如:
: T- x6 y ~* t% \- g, G6 ` P
$ H( \* ~1 J: X% s4 A3 Z4 u, @0 }2 Z3 e
,也可以用十六进制写,就象上面例子) d+ \* A" o* p/ ^' l+ \- F; i% A
8 j @: @2 u3 q. v$ U G1 x) d, |( l, u6 q0 z8 E4 {& g
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。# [8 L, i, p( I7 J) Y5 I
7 v$ n n* h8 g% _3.定义字体5 H$ f" q5 d" v6 f: }( e
web标准推荐如下字体定义方法
# A4 P3 X: o7 X" k1 {9 k% u# R
! w9 I1 t t" V/ ^7 ]: Lbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 1 s; ]( Q5 a& O, a- z% Z8 X
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
! F1 K5 y) h' M3 Z1 B/ T5 K* `Lucida Grande字体适合Mac OS X; , u, u4 s8 b" K. K% o& x& C
Verdana字体适合所有的Windows系统; p# ]# J6 I M( w
Lucida适合UNIX用户 8 }& C0 h: G0 U1 [% c
"宋体"适合中文简体用户; ) ]/ l% t! K5 ]( F6 N( D2 {
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;/ g% ~" H5 |& \; x5 I+ u
3 U2 k( ]3 X5 {5 U, t( ] P
4.群选择器
, C( P7 {7 R; ]" t$ p- j5 E3 x- |% g
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:; F& \. l4 H& _9 n" Y, p3 }! T% w
1 A3 c, s7 p# M/ d& n
p, td, li { font-size : 12px ; } 8 `$ G; v0 S( [/ u
就是给li下面的子元素strong定义一个斜体不加粗的样式
* d* ?2 M$ H. b$ ^. n6 \: o6 O; h7 x+ {7 E+ [9 w+ u |$ \
6.id选择器: |. i9 f. d8 }8 U
2 g0 x9 U5 |3 c) C$ c) e用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) b7 q6 G( w' L0 y1 b8 E9 Q0 \0 `! C+ k0 H
0 V; @0 C+ L) Y7 m5 m! C' @
然后在样式表里这样定义:- `# x; w) q. N1 h& d, @, l
% j4 T7 m! D! g) K; L
3 O7 X- n% n1 l& |3 P3 M, y#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
L9 P o. t) J d o1 j# e F其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. K7 U1 u7 K* ~6 m
. w% |: G( z- P
id选择器也同样支持派生,例如:$ }! b U1 _6 s4 @3 ^7 X
#menubar p { text-align : right; margin-top : 10px; }
- }! Q! X8 _1 W1 R这个方法主要用来定义层和那些比较复杂,有多个派生的元素。* e! a, S9 e# Y7 ?, k
' f: h1 ?: F$ i0 ?$ n
6.类别选择器) Y1 q/ W. r$ B" r6 R
" ~: i2 {- N' p2 J
在CSS里用一个点开头表示类别选择器定义,例如:9 l2 C! i B/ Z6 ?% H
.14px {color : #f60 ;font-size:14px ;} 5 r% \6 k' X9 s* O
# a9 b4 n% n2 ^4 z+ W3 _7 t6 D
在页面中,用class="类别名"的方法调用:# ?& A3 _# p0 Y; P+ r& X6 T5 W4 x7 u
<span class="14px">14px大小的字体</span> 3 Q5 ^, y1 o& z; A8 z6 c/ Z6 u1 J
' [/ _' Y* M' Y9 X* q这个方法比较简单灵活,可以随时根据页面需要新建和删除。
" w" U. B, j2 Y0 e
' @% {( d- c1 L7.定义链接的样式! a' Q. l4 Y7 w$ ]; j) M& V
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
0 E7 O& }4 L0 E, K, S: R. f0 G) ua:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
; X5 V0 G1 U. z$ P# g1 G6 _a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}: K( t/ `2 x" a! ?; L( {5 l
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}8 q7 v2 x% \# o$ R/ P; `6 e& N
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
* S2 u3 v5 Y+ a- B: M2 D' a& ~
9 N8 @' c& ~ c! y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|