|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
. A+ D2 R& W. x! r8 ]
; c R( t$ Z! t' ^6 X7 }! \( n$ O1.基本语法规范
+ s8 z: T/ p5 w0 K分析一个典型CSS的语句:, y6 n/ K! d: Q# j; \
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 2 B3 |. P+ I# r" ^
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; " d* \0 v Z, ~: A
样式声明写在一对大括号"{}"中;
* i* N- V& K8 aCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 1 @3 l0 |, n# T
"#FF0000"和"#FFFFFF"是属性的值(value)。; A6 ?& n H( L7 {- o" Y! M
5 u3 R, R" Q3 _2.颜色值5 B4 k& ?/ B f8 ?) l
" s4 p& a& Y* F颜色值可以用RGB值写,例如:/ X/ O$ s- W' |) j
) _" A8 a3 V8 x, ~$ E7 r7 ?4 s7 o
3 I( {: E7 {- X0 w/ g,也可以用十六进制写,就象上面例子* M. H0 ~! S9 f7 x+ y0 o
* R, J( m( s, Q$ x
+ m7 m% C7 L B8 b3 O如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。, n0 f) A- B ^% m5 { I0 `4 \
) @- c6 e! {5 D
3.定义字体0 N0 I7 K* J. Y8 x4 o! D
web标准推荐如下字体定义方法$ s/ q% a3 x7 D8 Z% [
# _) M: a) s' v
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } + q1 K) C4 H0 E
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
! ^* C: o) F' T' I5 }* J( ULucida Grande字体适合Mac OS X; 3 q1 J0 }* z( @1 _% K) A3 p( l9 c
Verdana字体适合所有的Windows系统; ' \2 m, A/ m9 z8 Z2 e
Lucida适合UNIX用户 ( z7 B' b5 \8 \! J0 W4 R! A. _: m, O+ B1 L
"宋体"适合中文简体用户;
0 B% y9 @$ g( T! Q) s# e4 ~& R6 J. v% f如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;7 _3 S. W3 f, Z" }* l" w, V0 R; N
6 ]: c5 K J4 |# A* V& Q9 J4.群选择器+ p! \. V8 T2 E; G
1 Q' ]0 w, ^ I C* y. k& x# {3 q0 n, E当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:3 l r) C; h3 z! j/ J& v
3 J6 d5 u: N. o- y2 |& r p, td, li { font-size : 12px ; } 1 A. B0 l( u' `' c' t) w; Y( _
就是给li下面的子元素strong定义一个斜体不加粗的样式
7 |* n! A& g' s& I# ^+ X' I
7 f' Q9 s0 s5 r5 K( B* z, | s& K& T6.id选择器
, O4 u0 c5 ^+ g) o5 p% H, C
/ {* P3 O5 M) Y* K' g \4 E用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- ^7 @$ s& L. Y1 a. D
* V, R2 i X* S; U& X; f4 X8 N( M( Y% R! _* i
然后在样式表里这样定义: b4 p7 ]0 f! }
* y* i. V( ~4 B# q# b" P, u' f
4 N u7 c( J& Z2 o- l U#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 6 h/ V7 H' D+ {% X* I* ^
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
: H2 g/ L6 i4 i) ~
/ @* {! M, j1 T8 uid选择器也同样支持派生,例如:
0 J# n$ J" Q* g" c# P1 o1 V8 y#menubar p { text-align : right; margin-top : 10px; } 3 a/ v% r: i0 D/ U
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。8 q7 f: A( A1 d4 `
. \: p7 [5 V) D \4 q2 n
6.类别选择器% R$ P% L; e( [
; [' Q" s+ l9 r( Z6 A I& L
在CSS里用一个点开头表示类别选择器定义,例如:
" I x( m; E; M: t.14px {color : #f60 ;font-size:14px ;} 2 b+ P. q2 x% L" p; M0 _
. B7 p/ ~5 g9 B* N* u在页面中,用class="类别名"的方法调用:
" ?. P& I5 o |<span class="14px">14px大小的字体</span> 8 y9 K; P3 B X( J9 Z8 S i
7 j Y$ o8 h) V* A) y4 H* A
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
1 x' a' g" _& B; `" c' f# s G/ |6 }+ M! n
7.定义链接的样式3 }. u# t- X2 S
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:* A! q1 ]7 D3 U
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}) E8 d* N8 o+ y* ?8 I Y) }" Q
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
" U$ Z/ Y7 X) Ya:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
! t- ^8 E, A ?* B2 {4 e4 {a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ( V& A- O! H) w4 l' E
/ x5 y/ D, F/ i a1 d7 {' R% y以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|