|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
6 T& e) v5 W/ s0 _( N& Y! @0 q$ e, i3 V b1 D6 O! L/ M- E7 ^ h& r
1.基本语法规范5 E3 N5 B$ _% }) ^
分析一个典型CSS的语句:
( j5 g0 K. ~ j( N; vp {COLOR:#FF0000;BACKGROUND:#FFFFFF} * b! P) |3 r. A: r5 R$ ?
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 7 g7 _# |8 Q B% {
样式声明写在一对大括号"{}"中; ! e! j( l$ D7 ] x$ G( J; w
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
2 g! i8 _8 z3 l; \1 y: U"#FF0000"和"#FFFFFF"是属性的值(value)。& u" q' V$ X: m+ O, V/ O3 ^: T" V
6 g2 `5 x0 M* |0 P8 z1 v7 p
2.颜色值
: s. L$ y. [6 f4 [! z8 l C: b0 f4 S; p
颜色值可以用RGB值写,例如:
, X( x' ^! X4 T7 V3 _8 C, q3 k
7 R0 d7 u4 D! q7 f
; x6 y. [+ ~7 M/ w,也可以用十六进制写,就象上面例子; n- S7 ^ _8 H
! z# f7 k, L3 P8 D' U4 L& o
" |( F6 L, K" Q: j5 W0 z如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
9 {' N( K& ?( j# j. X% w9 h9 Z3 n
( X+ @6 C, \. {3.定义字体8 w" a, x. C( U& g$ d
web标准推荐如下字体定义方法
2 G1 b9 M2 S9 p# a# _& ^
2 X ?9 l9 V+ H8 [6 }body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; f% G# a0 _% U7 |' f字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 L1 {) V) a, Z/ L' p+ _
Lucida Grande字体适合Mac OS X;
; M, `# n- U. j: P1 eVerdana字体适合所有的Windows系统; 9 J" c# M% Z- W- |1 W
Lucida适合UNIX用户 5 T4 u, r" b% Z& f5 |
"宋体"适合中文简体用户;
: ?6 X( [; F1 y! h- M如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
9 ~7 U# e4 c) b$ d8 X9 \2 R. E; e0 X' E) r5 c+ p" G i
4.群选择器
" C; Z5 @0 O1 g# r# }' e3 z$ J& ]3 {0 B+ V
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 P" B- E6 W. }
: D) |! ^% G, s& C1 V" V p, td, li { font-size : 12px ; } : S$ _3 E: e9 E+ V. i8 Y
就是给li下面的子元素strong定义一个斜体不加粗的样式
. J' C+ d3 j) c, j
; }' Z- f' m* W7 h- H6 M6.id选择器
; h! m# Q: s; C& ?0 ?0 B5 Q
1 H0 I: a( e. o: D: G y- W用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层1 ~; D6 K0 W2 e5 {, O0 X9 a% I F
$ T4 L2 w) U8 v8 a) u+ S4 h
& p; D( ]5 x/ F$ h) h然后在样式表里这样定义:
5 u3 ?% g; e: P+ r$ B* g
' ~7 a1 @# l: q, k7 V; [; ~1 Z8 k4 B' c. @
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} - I" ?( f. { Q0 h6 n; C! |
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
/ _9 Z/ M6 j( h% s
2 j8 |' h2 I4 k) zid选择器也同样支持派生,例如:0 y& a; h3 L/ I1 d' m8 K' }
#menubar p { text-align : right; margin-top : 10px; }
% E- U* o4 s: ]/ M& @$ E* W这个方法主要用来定义层和那些比较复杂,有多个派生的元素。" n- @" p# I3 z# E7 e6 O" A
% M! X6 G6 t8 j9 w) u3 x6.类别选择器, o# l1 C( G8 e K8 U
" c# j1 V- ^ s9 H2 P
在CSS里用一个点开头表示类别选择器定义,例如:
7 ?. T: ]0 X& `0 x# _.14px {color : #f60 ;font-size:14px ;} 4 D& X$ s }1 x% e
7 u# _2 {* S( \$ O' ^4 F; a在页面中,用class="类别名"的方法调用:
; ] F( n# O6 v4 V) E8 L) o<span class="14px">14px大小的字体</span>
3 X! w8 ?5 f/ X" {4 m. K3 s3 w3 p( I+ a- Q9 p# p
这个方法比较简单灵活,可以随时根据页面需要新建和删除。* ^5 N: S; K! Z8 t' ]
3 L8 s2 `5 I: C$ ?) h
7.定义链接的样式, z% Y6 }9 m, F" [# a
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:( W0 n3 i: c8 c' I |4 M$ y {
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
/ p% b& ]2 C' O- x$ U ?; N: ?a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 ?7 A2 c7 T7 _9 s, W
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
5 P% ]6 @6 Q5 N: N# C$ {: s7 @a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ( R0 N( R D- f. w/ K5 ?+ R
0 J: p' A8 R ~1 f; W6 f
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|