|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
7 b5 Z2 {' M( L0 T
! _$ e; {- m% q2 R: H6 h0 ?1.基本语法规范5 Y. X7 s7 k1 Y& z
分析一个典型CSS的语句:
" I! j/ G& x6 N) ~1 Z2 U+ Bp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 0 @0 A2 x9 h4 [3 [/ u7 n( A. X
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
. s( ~5 N4 V% T/ ]/ f' a样式声明写在一对大括号"{}"中; % C6 N% U- O9 L& N9 B
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
. ~, U1 ~% V9 C9 E, v8 I. e"#FF0000"和"#FFFFFF"是属性的值(value)。
) K, W( B- m6 H5 s. \4 V
5 r k j9 \' f) Z2.颜色值2 s* z+ G0 \1 ?: u& j; {/ p
5 U- p' U8 L) L颜色值可以用RGB值写,例如:
1 N6 ^7 \& i! A2 d2 E, p
! [3 i* W! u2 o
: ]2 M/ u2 H5 s" O: @8 q,也可以用十六进制写,就象上面例子; Z# W4 T' p2 l, N! y
) a2 v/ s1 E' z e+ Q
+ P8 i/ w& r* `4 h/ [+ \
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。7 @8 ^1 C" o, S/ g. z. _
# g! R( }& z5 B2 ~1 e) r
3.定义字体
1 q$ C1 `+ @ _web标准推荐如下字体定义方法; _1 h/ u) T2 S- t- P8 R: r$ n( {6 ?
1 \- P+ }+ P/ ~% rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 7 O R) \/ G: \$ K, j
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
) ^/ `3 Y* N7 j" f0 |% |/ M; H3 yLucida Grande字体适合Mac OS X;
# m x( p- u, d4 h P, aVerdana字体适合所有的Windows系统;
+ K* x# e9 o3 P! s2 YLucida适合UNIX用户 + l! p; @0 x. p$ _9 R
"宋体"适合中文简体用户; / Z' s6 j8 E7 c8 d% M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
) a- t7 l* l* _, Q3 k: f8 z/ R$ z+ X; i* q& a4 c
4.群选择器
) z- G- D. l4 C7 Y+ A5 r7 _' i- o! T- R$ `, Z
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:4 u* @- T& H: k
! s* \( r7 }4 ?6 S
p, td, li { font-size : 12px ; } 7 C7 g3 B1 n- _4 `5 A
就是给li下面的子元素strong定义一个斜体不加粗的样式7 G) T4 a B* u) M. R
' m* i" R y3 r$ t6.id选择器
9 C9 f$ o; L9 y% S* W- d* D* g4 x
3 y) r! v2 d# R T' Z& N8 [用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
8 E! C) Q# E; n/ G- ?* ]; s- L+ c
h) A1 ?4 s; ~9 w
( ]: ?: k: ~) B! h- w然后在样式表里这样定义:5 r- W, p+ X* }& r
/ \$ U3 \- ^6 t" J
. Y7 Q& ^" v5 w! S# `( X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
: M+ }# j1 B y其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& ] Z7 Z1 ^( r( \/ y# [
& @* P3 ]0 ?5 Z; K0 i# t: ^ Rid选择器也同样支持派生,例如:1 T; ^) b: b$ O) y+ y9 }
#menubar p { text-align : right; margin-top : 10px; } 3 }& u$ S% T' M7 C1 z
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
' Z. G2 Z6 r* I' W! p
" ~* B" e1 ^' A6 R" D6.类别选择器
2 c8 f7 }. X2 F9 H. ~% B8 R% C% Q9 T, K. K! K. {0 F! t: r
在CSS里用一个点开头表示类别选择器定义,例如:
3 K# D x& @) W( L9 d.14px {color : #f60 ;font-size:14px ;} " [$ m b0 _2 p- ^
6 I6 |& i$ D+ T
在页面中,用class="类别名"的方法调用:$ w6 j) ]# w: \- D
<span class="14px">14px大小的字体</span>
& q7 @) {; |" h! j% p7 G; X6 O2 _5 Y% D
/ S: U% A) ?. ^* t% |7 [% L这个方法比较简单灵活,可以随时根据页面需要新建和删除。
! Q5 C' X& D# M. @* W4 e+ O, i: o; W+ u& h
7.定义链接的样式! x( }, W, q/ s1 O5 ^
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:! a) V: q+ y8 _* I$ c
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}& ^0 c) J, i+ U; ?
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
+ _- r9 h, Z* d8 e8 ?, oa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}; e: K& t! V8 g% _4 f
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 1 @9 E" }/ ~8 h8 V' V1 x
9 C+ E' [, \ B7 f1 L
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|