|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
, y% q U" O- e0 D% Q$ B+ g- G" @1 |4 l* J- z% e/ o( E- s" I; e/ |: x) I s
1.基本语法规范
6 _5 _8 L4 s% z2 E$ X: h: l5 q0 G分析一个典型CSS的语句:
$ i+ O6 S6 @0 @! b4 Xp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 4 H- Y/ n8 y# t9 q/ {$ n0 D
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: J1 k. i! q/ z4 b+ b! n/ K( b样式声明写在一对大括号"{}"中;
. }' o- X2 H3 i% V0 cCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ( E$ u# T, |9 `7 L' S3 X: Z- _' }
"#FF0000"和"#FFFFFF"是属性的值(value)。
# a' v! p. l$ l9 ^' O! A) [' M
3 t) | I% j6 r9 r! O2.颜色值3 b3 |3 o6 m* L1 U# ^ `
4 ]$ B7 g" w0 p4 W& w, F6 v, ^颜色值可以用RGB值写,例如:4 y+ Q. O% N B1 r8 O+ m
+ d( {' G; h9 o2 T* [
0 g* Q; A+ h; X8 x: b: e8 z# S
,也可以用十六进制写,就象上面例子. Q& V' x2 n# D; p
: M4 f l; E# i$ `8 h& J9 G# |2 b+ g- o
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
# n; c5 ~$ a! [! h( {( _! v5 { Y4 Y# V
3.定义字体/ o& b' p/ s6 V7 A
web标准推荐如下字体定义方法 V; @" k* G$ Y; q# m y
8 Q" ^8 L$ h* s9 g* y) u+ Ebody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ! h5 Y! S/ r9 W: E& @
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 G' r% M( ^9 F2 U" M9 o
Lucida Grande字体适合Mac OS X;
0 e s2 b& N3 I% w W* ZVerdana字体适合所有的Windows系统;
+ o3 ?& J i. K9 c$ M, r: HLucida适合UNIX用户
" B: x- v: f! G2 ["宋体"适合中文简体用户;
+ V3 t/ N' s% j9 v( a# Y! ?如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;$ F; z2 r4 r7 r$ ?7 ~9 ?- p
( d7 R0 g+ y4 P' B4.群选择器
?4 v4 X3 L, X
4 j# n, J9 B: ~- h8 j当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
6 K) q: H3 D. @; U, T' m) A
3 _: S0 O, N B3 S. d4 I4 }& F0 M; |/ _6 D" N p, td, li { font-size : 12px ; }
; w0 t' o- F" Y7 Q0 V7 S就是给li下面的子元素strong定义一个斜体不加粗的样式
4 N5 ?2 n h" R! r9 x8 S, _
3 a; x/ n! L- q6.id选择器
. Y( p( s7 [. H6 K
: |/ y5 O" p `8 z- {用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
1 v/ A, u& W2 ]" F) e4 \# R% @# A* h0 P& K
+ u3 P" F# Y6 w* w然后在样式表里这样定义:2 z, E# C9 Q1 i# C' z) r
6 z0 \! H& ~' D2 W" _3 ]" ?- o. ?7 G! Q0 {: @ p
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
% e l/ M3 y' J" W6 F; W其中"menubar"是你自己定义的id名称。注意在前面加"#"号。4 W; y' @2 K, u1 f9 ^' g0 u/ r: p
N9 x1 f/ _- x" J3 g( l2 R$ A
id选择器也同样支持派生,例如:
; D& {) q" G* F' }7 ]; {9 R#menubar p { text-align : right; margin-top : 10px; } , p" E) j9 O: Y/ \+ F' R! w( e6 v
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
9 u; X! h2 g+ `# }# L, M2 g* O" S4 ?# H; U& m5 [( ]$ v* ^
6.类别选择器+ @! a2 c% c& F0 i
" h& v: d, P5 n4 r在CSS里用一个点开头表示类别选择器定义,例如:+ G% N% s- O9 ]+ S$ P9 G3 e7 D- ~: n
.14px {color : #f60 ;font-size:14px ;} ! d' \! y2 ?# l8 l/ ^% U
, \7 T6 F' E- s
在页面中,用class="类别名"的方法调用:
! R( q! H" K) z1 B& m' L6 J) d<span class="14px">14px大小的字体</span> / c) `" l( T- \& v* }
5 o$ S2 ?% o. L. F& M" K这个方法比较简单灵活,可以随时根据页面需要新建和删除。
$ \% H3 l% X0 _% Q/ z8 T, A" d+ o7 h5 ~4 W Q
7.定义链接的样式
4 K" ~# r. b3 w7 T' {4 ACSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 F- b9 H. K* \" v0 f( g* G* ga:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 k4 |5 j! w' S1 | \/ q, l
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
@, A9 @3 R$ {# A. g- Z; S; Sa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( u8 I0 R$ M/ }# F6 b
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} . E$ W' [4 _- d
+ L+ z3 Q+ k, Q2 N8 p3 ]5 J以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|