|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
% g0 _3 p G; P( d0 _( i5 @( s$ V2 n; n3 E ~8 ~
1.基本语法规范5 b" b7 z3 g% C* A8 G1 ?) o; e: N
分析一个典型CSS的语句:
0 }. L. y; ]! d! D( p, N G" mp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
4 B2 m# y9 l/ `0 H, p5 q$ z. j其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
1 ]5 Q# j1 c! H5 X" M- |样式声明写在一对大括号"{}"中;
+ J O% n) S5 i8 j3 b: M9 m& JCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
6 M: q, g! |* p"#FF0000"和"#FFFFFF"是属性的值(value)。
! k. T$ {6 x* f G3 \' L2 {3 P# n6 ~( y0 C: i. I
2.颜色值
; V4 {. J( X% x9 ]9 x" v: V8 Y* [. p! J- \3 E U
颜色值可以用RGB值写,例如:* y) u- ]: L6 [* h7 d
2 ]4 E$ S' ]- O/ b+ M
& D3 u, T/ Q! M4 O' J
,也可以用十六进制写,就象上面例子
7 h% V) c# E7 _$ W# n% H; B6 ^ _) }7 J* [
5 z% A0 q. I4 c6 d2 Z% |# ^& Y! b如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。( S: D7 ]1 u6 G8 C( Q2 `' l
5 Y4 ~, w* u! T; {. F/ R7 {3.定义字体
0 i' _* H* @8 o% N& fweb标准推荐如下字体定义方法 k7 X+ T/ U* l6 N
0 L/ T- R) G% C7 R T6 N9 s0 J$ q
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ; U; \5 ^% r2 q9 d1 ~1 c
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ; n% @* M- e( n3 ?, y& I3 O
Lucida Grande字体适合Mac OS X;
0 i6 y6 w) X1 L8 S- HVerdana字体适合所有的Windows系统; 0 L, X* |" G. O% s, V7 ~9 t \ T
Lucida适合UNIX用户 0 W2 v- \, Y) o8 I+ t3 `% N
"宋体"适合中文简体用户; ! c6 C; S9 ]% y7 [- e) H- o9 A6 a3 q
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
& L1 L( v/ E9 q y7 f- Z3 Q0 }5 m4 ?: C \5 v- k
4.群选择器1 c# w: [2 X( O. L, |2 L s
K/ c1 ^: {5 D) Y; H6 q7 n* Y/ X
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
0 ~5 e* N- G, \+ v+ \" |& n
4 i& T5 D% e5 }# ? Q3 c p, td, li { font-size : 12px ; } 7 t( T `3 L; a
就是给li下面的子元素strong定义一个斜体不加粗的样式
! O3 w2 E! W9 ?
8 E1 G& O2 h) N* q( R- v. t4 C+ S% c6.id选择器
' r, }1 X: R9 G4 e$ y. o, {- g+ ~2 t9 D" h4 [$ u6 _
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层) P4 f1 x8 ~/ E( \6 T& f
& z( B& p& g, ?2 H/ d+ t5 s# _& ^: g: M
然后在样式表里这样定义:
! k: a8 V, S8 b7 O% b' N
# F/ _7 s8 [2 N% \" ]5 w
; S) [- z# F) j, [* ~9 x. G#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
8 P: f0 o1 r0 ^+ U2 ?* w其中"menubar"是你自己定义的id名称。注意在前面加"#"号。" {$ v2 d8 O' X! V3 G
6 ^+ M# p( V* ?
id选择器也同样支持派生,例如:7 v. R* G- p5 J" G8 f* i
#menubar p { text-align : right; margin-top : 10px; }
# Y& E" G- F, z- W2 w这个方法主要用来定义层和那些比较复杂,有多个派生的元素。* U4 b. B5 X" `1 i5 G( O
) w8 V7 Y# k. ~% j
6.类别选择器8 D1 G: T8 |. r
, E( t* L6 `/ a5 D0 }& q在CSS里用一个点开头表示类别选择器定义,例如:( x. m0 J. a# i3 ^! {
.14px {color : #f60 ;font-size:14px ;} 1 Z& U. ^, P4 b, W0 S( ]
. M8 _2 ]! r! @! y在页面中,用class="类别名"的方法调用:
|, {" Y8 o- |7 D<span class="14px">14px大小的字体</span> , i. }+ \, x1 t; M; ]
$ Q1 G h+ K- w. I7 G. s" B这个方法比较简单灵活,可以随时根据页面需要新建和删除。
+ P, k a1 C& E
: f- T# T# K! x. m' Z) N3 K2 {1 t& q, @7.定义链接的样式
* E. J; q! T/ |- `2 q [: \1 cCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
' B$ W* e S1 e7 B oa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
- x) o( o2 J/ J( u. [( ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* a9 i# ~% F& w1 F$ Y3 R1 q6 p6 @
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
. {* `% X% ^. Ea:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ) l x0 g& L3 h \ n/ A. M8 q) f, S
$ \* K6 X3 F4 N8 \4 d8 e, n- t
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|