|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。* t: g0 c' s: m u$ J2 C
+ z# j- w; Z x6 i$ n. l) L4 q6 y% f! U
1.基本语法规范
+ v8 m, e: y9 A分析一个典型CSS的语句:
/ n' r* I( G" m1 i! E4 ]( r( {p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
0 g0 M' N7 W: z. P其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; " U2 `) v1 i! n/ o& \8 y* B8 N
样式声明写在一对大括号"{}"中;
- q1 z3 W' v" w" ICOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
8 R4 p4 W2 t" j3 O9 Y/ A"#FF0000"和"#FFFFFF"是属性的值(value)。
8 P% |0 X! e3 b1 k3 j9 i+ k' U& S3 H
8 `0 P9 Y8 r& }2.颜色值; q! b! m' L. p
- v E" K# D) K颜色值可以用RGB值写,例如: U0 V* ^: T7 @3 @* h
9 {( P O. U- r: [5 I
. |; t! j2 L- q7 K# w) _8 `1 l ^,也可以用十六进制写,就象上面例子7 p- r& k6 }$ B1 g% b
+ P2 m! r% ~: O! U& k8 T
: P+ i: w! u6 K" `9 `如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。9 F. G+ Z8 N7 u S
; o( S" B( q* `/ `& ~' N9 p4 e
3.定义字体
! N m1 I1 V. G# n# z/ [web标准推荐如下字体定义方法
' g+ g+ J6 z+ Y$ @7 Q
" S5 r" \5 L- ~ h) s/ Q: M1 l/ T& sbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) y" X) W1 m P. M' a( P字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
' e8 w; \2 [1 jLucida Grande字体适合Mac OS X;
/ |) y8 [1 E( y! Z/ E) v) M( f. U WVerdana字体适合所有的Windows系统; , ~: K7 r( _3 H, m, ^
Lucida适合UNIX用户 7 R/ ^ i1 t ~% }
"宋体"适合中文简体用户; 4 b) o# `3 F) E2 N3 }: G
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
3 H4 k+ [7 w' A! v, _. x6 p' h* V& v% c) u, Y
4.群选择器2 ~ `; A5 @+ y& K+ O0 E
% F% Z( v0 k5 T& Z' Q% B! S, C. C! }当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:) \9 r8 a. M5 U- h; w- `( V
( z9 ?5 Q' J6 ]( S' Y8 W
p, td, li { font-size : 12px ; }
, ]- [6 G9 ?' X5 L1 ~. a* M$ W/ F就是给li下面的子元素strong定义一个斜体不加粗的样式
# I0 P4 h: B; N. o. p
! U2 M$ n" N, X$ N6 Q* ]+ }6.id选择器6 F6 C4 H& S& I0 o r
5 d N" g8 g9 k N( Y2 \- M
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
2 d, Y2 J2 U3 V* T8 U+ d
* \: P4 x! n# J5 R7 W$ L8 f+ ^" t/ _. \" t
然后在样式表里这样定义:! `' C; {, z9 v* |- K1 |, J; G
3 l3 f/ o) i) X+ E: j
D& n+ b8 |: j9 L$ H# m& Q1 c
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ' j5 ?1 d# G$ f
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
$ O% N5 R: g/ G( k0 ?$ {) Z) X5 c: _0 R0 ]7 H
id选择器也同样支持派生,例如:5 o$ U9 Z1 N" ]
#menubar p { text-align : right; margin-top : 10px; }
, N( C; j$ m- H3 t9 r$ q2 w& p/ C这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
+ [0 |, E& S' z1 M
/ @% n" u* t$ l* |; {8 O* [6.类别选择器/ s: N8 C# m; P( }9 U
' J$ C/ i) A1 l2 p* |在CSS里用一个点开头表示类别选择器定义,例如:' i- c* u/ l- z7 N( E
.14px {color : #f60 ;font-size:14px ;}
* x: m4 J) ^* Z# D5 B& x
7 v7 U3 B9 j9 t. [在页面中,用class="类别名"的方法调用:3 E7 {- X) x' C0 R
<span class="14px">14px大小的字体</span>
/ \9 A3 y: y2 a9 E: D0 `5 h0 S- M* D7 [& n: N
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
+ X' G) X) j7 ?8 L/ D8 J, v+ G M* Y" [
7.定义链接的样式8 ~" U) u3 ?% R( B) U
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
# Q2 x" H" p. X4 m. q2 ~/ [a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 _1 k1 E S4 p3 Y9 R( l+ w' a
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
' V& j! S/ b& l: Ma:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( j& J8 X3 K9 w: I
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ) H+ ?2 s8 ]$ q1 I5 a- w) F, G
6 |( \! p! Q; T& m4 W
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|