|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。/ J, T8 W6 V& @& b- y1 X
" O/ s. u! y0 a+ V' b; q1.基本语法规范
8 X f( F) J0 ], S3 t分析一个典型CSS的语句:2 J. }: R. z0 s' N
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 7 M9 j" T+ `8 u0 R
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ' }# V3 p! d! r1 N- J! p8 c. u
样式声明写在一对大括号"{}"中;
( n0 u' t0 P vCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; " B3 d$ N5 x9 x! A6 l
"#FF0000"和"#FFFFFF"是属性的值(value)。% a* E/ p' q) N+ o
1 E$ f! o' m' B1 l6 }
2.颜色值
" ~1 z7 v* N" w8 `( L
) C4 {) i/ W6 {( u; W u颜色值可以用RGB值写,例如:" ?3 X9 w" H# S$ Y4 L& m. v
+ p7 m+ x. ?# d( b8 O4 V2 P% f. j
: c) \4 M3 p$ g' z, r
,也可以用十六进制写,就象上面例子
G2 J/ a" N- r8 }$ j0 z, T+ L& x# ]. |
$ H+ _/ U8 T; f$ h- i4 U如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
6 f) C( U& Y* n7 K6 ~
, F, Z+ h" h" d+ v3.定义字体
& ~# O6 w3 q9 I& \- H6 I$ b7 qweb标准推荐如下字体定义方法* H& B0 U8 m6 [4 h1 @. E: `
8 U; y" [) o6 A2 t3 \" k6 ^body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" v: }0 B e4 v, j# c; Q字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 6 k g `0 g+ Z4 V
Lucida Grande字体适合Mac OS X;
% D$ N: a. Q4 B; c/ F. ?' kVerdana字体适合所有的Windows系统;
$ ^+ _9 S9 P! a! MLucida适合UNIX用户
% |; i2 s2 A( G, l! E' a"宋体"适合中文简体用户; 9 `9 D) h" O$ x' a7 R- y! [
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
/ ^- u7 h" a' w" G3 N5 ]
+ D, |: f. G; l8 x7 K; l4.群选择器! y& v$ Q/ v! R$ y
# i8 L8 ~% B% Y' F! v' m+ u当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
0 Z* ~- X( m6 ?, h v/ ^7 R
! n6 ]. M5 Z# ~* W# f( ?% Z p, td, li { font-size : 12px ; }
J/ @& c% J) x- x就是给li下面的子元素strong定义一个斜体不加粗的样式
! c9 ~$ K5 ~3 ^" i' I' }
6 r. o7 a% Z) ]: j' c5 d2 p- I( z6.id选择器
9 s$ U2 y% z* z- _: J G. @0 G, f: h' d* F" l) I
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ z2 C# c2 B K0 N" P
& p) d1 J2 H# Q5 g
6 J8 Z* f1 a" M7 ]" p; h+ x
然后在样式表里这样定义: D$ r6 r& I" F7 w( R: }3 @
, ?9 t9 j; ~% v# ], p/ B! l
# j2 i: Q8 }1 V#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : T% }8 y. n& s+ b" b" J6 k& p# q Z( C
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。0 b+ }0 L# H6 {
8 {/ H' j' t+ \+ d# n5 i
id选择器也同样支持派生,例如:
: t6 M7 ?, i- ?& e' X' k c8 A& l#menubar p { text-align : right; margin-top : 10px; }
$ n7 X J0 D* E$ S, ?* Y这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
2 C2 {4 R S/ D! N# O' [9 m8 c2 Q: F5 T7 E
6.类别选择器/ N5 j' `; z. H" c( Q: c; X' b
; L% F" p4 z' W
在CSS里用一个点开头表示类别选择器定义,例如:
& `# Z6 P1 S& N.14px {color : #f60 ;font-size:14px ;}
2 v. I/ F# B: i) C- O7 C/ P+ e6 C( ]- l
在页面中,用class="类别名"的方法调用:
, N6 p+ w2 o, i+ X( Z<span class="14px">14px大小的字体</span> ! Y: f+ U9 B4 ]" w8 d
H4 I3 }& V9 g- X4 R1 V" k6 ^这个方法比较简单灵活,可以随时根据页面需要新建和删除。# F/ D3 c3 |+ ]6 @- R. B; I3 K
# x d/ N0 {$ ?4 J9 p* Q7.定义链接的样式
4 c4 ]" F5 r4 U; \# Z, D5 vCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:) i) @5 e( q; s! f1 v1 E5 n! y
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
4 G6 t5 x6 M' D9 @# Qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;} v0 c1 B: p, G& P; R/ ]
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
$ ]! n1 }9 r1 {( M/ u* }5 ?a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ ~( d/ m/ A- ~+ y- v3 J k1 t
! b; ]" f6 d& o6 D" C! H以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|