|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。( ~7 N. { F. z, @
: w& s* n$ C3 j: Z v: _* ~1.基本语法规范
# K3 E, Q8 a* Q5 I分析一个典型CSS的语句:
@. {0 s5 Q: Jp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- S# u5 `% W4 D其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
# Q* L- ]' w4 E2 J样式声明写在一对大括号"{}"中; - x) O, Q; B# \/ y
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 g" r0 R( R" x# ^
"#FF0000"和"#FFFFFF"是属性的值(value)。
2 o8 E& i/ i1 _
2 S1 S9 B" W3 F: N1 q/ M0 b8 k2.颜色值
i5 m+ h; o2 U4 Y: j' @' F
( D) j1 H: V1 n% @颜色值可以用RGB值写,例如:
: t. W! ] Y- H$ P& W- l" _ o: F. G- _+ M: u& {% a+ f6 w/ h
1 U* O! v+ u2 @ x0 g9 {
,也可以用十六进制写,就象上面例子
1 A3 `7 c+ T3 l9 K* z- P' W4 {, a# [) o8 I. n
7 P) S/ f0 _/ ^2 A0 K* p如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
9 z( ~5 V/ L- m+ Z3 l8 v
2 q2 b% {+ S; K" a* ^% M, f3.定义字体0 c* b1 B* W9 H/ _, o2 t2 B
web标准推荐如下字体定义方法
9 m _! x2 M( p$ B/ Y4 o. G* A# [( A9 r% D4 B: ?
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
. M; i( B, [- j W E) A字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
+ k8 \6 f( j h6 g( N. h5 GLucida Grande字体适合Mac OS X;
- G% Q# S3 D# [8 U/ M6 W# }1 \Verdana字体适合所有的Windows系统;
8 X7 f& D+ v# ?8 kLucida适合UNIX用户
+ q |" r. Y m' H) u7 q"宋体"适合中文简体用户; 8 a4 U, ?2 y6 I5 V' A
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;6 {9 [2 _+ a+ o. H7 e) e
. `7 @# ~3 _) `0 _, H& l" T+ g4.群选择器* C' I) c# d! r# m z. i' c
8 i( u7 N; N7 t8 m, v P. t, G
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:# K, I4 B* r9 ?, P+ Y+ z! H" u
" X- R$ V- z9 K6 z/ Y: p7 B% s
p, td, li { font-size : 12px ; }
) \- A# G3 s. b4 z; O6 ^就是给li下面的子元素strong定义一个斜体不加粗的样式
! b& Q' l/ m h0 ~4 U+ R7 ]9 C8 f7 A
6.id选择器
- m8 G) H0 c* O$ w# z7 o
9 u$ I7 Y# M, z3 V用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
+ J2 }* x5 d6 x2 S4 K) t9 L0 S' r2 ~ U& t+ C
6 N* L: B9 y% ^
然后在样式表里这样定义:1 S8 g7 q* h) I6 C: L- p
0 o; Q( F3 ] H% F
! [; v- }0 Q6 S1 u* n#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
; U8 C0 G- K' Q# i" H' h. S! [其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
; |/ F$ L# c6 ~; B$ R0 U+ {8 Q t$ a$ V6 P E
id选择器也同样支持派生,例如:. _$ X2 d1 q& I4 K
#menubar p { text-align : right; margin-top : 10px; }
. `9 H5 Q" n- M2 W: E, h这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
$ u% c# X0 _8 F3 }! ^2 I0 E U8 }% \! s/ ^4 y
6.类别选择器
' f+ e( U \( O0 m; k V
! V. m( E# ?2 D$ \在CSS里用一个点开头表示类别选择器定义,例如:
! N1 z6 w4 |/ W( E3 g.14px {color : #f60 ;font-size:14px ;}
9 ~* g. v6 v5 N2 F. H( ?; U) T1 ~/ a+ z4 U2 D% C/ a
在页面中,用class="类别名"的方法调用:
) _! o* f! K# u+ y7 Y" w<span class="14px">14px大小的字体</span>
+ D6 F+ b; n' A7 e$ i
! o* O! p; R$ t4 H5 w. V这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: G! S( v( ^; f5 R/ Y# H8 e" J4 a6 l8 c6 y% J4 u b
7.定义链接的样式% l" j I# z3 i! F
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:# {, z0 a& i4 i$ A: W- U2 A7 X
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
( D7 y0 M3 I2 U) P0 U( La:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}, j8 W* I5 f+ K Y5 _
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& P6 e7 l0 T! ?# Z2 `8 ta:active {font-weight : bold ;text-decoration : none ;color : #90 ;} $ @. ~/ j% ]; }' @
! ~$ [6 C0 a [5 k! A! o+ ]; W以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|