|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
2 E$ d4 B0 {3 D9 e9 A4 a7 [& P$ ?* j
/ j; t+ K+ x4 N1.基本语法规范5 [8 D( u6 ^! Q5 ?3 e
分析一个典型CSS的语句:
D6 W3 d, e3 B! T; c+ ]p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1 P e) S e5 r% R: C' y: C! {其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 B( w8 \9 ^. a S/ H$ d样式声明写在一对大括号"{}"中; / o/ I X' l: b
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
3 \9 r6 N; Q+ h- l% E"#FF0000"和"#FFFFFF"是属性的值(value)。
" i/ j& | a1 W- i% ^, K' m h/ P4 f8 l/ D
2.颜色值7 A9 h' p0 m+ s9 ]
7 s4 S6 k* ?" r/ d颜色值可以用RGB值写,例如:( v" C: Z* k/ `: v" F) J! Z% A, I5 w% j
+ \$ T/ {( W8 V! N. q( N0 |: t$ a8 Y$ T1 p' ~; O
,也可以用十六进制写,就象上面例子
& Y4 ~9 H1 ~! x4 L0 [& c: K
! R7 Z- H( i. X a* S+ X+ H3 _8 q# N7 f6 k/ u% }& \ m
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
1 \, m4 C" r# L+ S8 ]% g( m" f7 N; X- U& d! y
3.定义字体3 K( r4 [* P1 V4 ^0 E
web标准推荐如下字体定义方法
- Y# G. M. b) l
5 N( l2 n; t" lbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
- Q$ x9 h9 g( s+ K% Q& y字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
* W. \" f+ a8 h/ \ U1 mLucida Grande字体适合Mac OS X; ( J+ u( L ]3 [7 z3 i! q8 p
Verdana字体适合所有的Windows系统;
% l' p& M/ ~ z2 r% N. E$ zLucida适合UNIX用户 7 } u; a: O; b2 C
"宋体"适合中文简体用户;
8 a$ J# m5 ?5 p3 v) Y如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
+ U2 L* _) E" A: \! a5 K B
6 z- f4 [7 B6 x9 [2 ], }. F4.群选择器1 k! u+ r0 m- f9 o/ R8 j* G! F
$ X8 q+ g- g m8 w) A! I2 o' @当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:1 h4 d9 Z. }. ?3 U; @6 v
; F6 u1 r, F( t! z/ ?- B
p, td, li { font-size : 12px ; } % {: _; ]1 ?1 Q, E: \
就是给li下面的子元素strong定义一个斜体不加粗的样式
, _0 I' `1 u) j+ U t2 J. |0 j1 y
- @: r9 T9 b' O, M0 X4 D6.id选择器" X$ b( V" [/ @; \1 y: S
7 u$ g; L( Z/ D4 c/ q
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
- p0 X$ ], R8 R3 N$ g' J; T3 l
]0 y4 A9 D% D+ J4 Z# ]! V, a7 G4 V7 v& F
然后在样式表里这样定义:
, L2 p0 M4 E$ l B! P
2 o$ K/ k4 D3 I8 E" v/ l8 N7 @/ j6 Z7 d% \/ h2 ?4 m- R; m
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- D( R% |% e, h" u7 u1 m: E其中"menubar"是你自己定义的id名称。注意在前面加"#"号。' h- s3 f! Q/ W' `6 ?5 _. H, E7 C1 d
2 f, ~% |( p; J/ zid选择器也同样支持派生,例如:
* T+ O, }& ]7 C* n: n' F#menubar p { text-align : right; margin-top : 10px; } 2 [4 ~+ Z, {) M( j# N7 B" m
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。1 L4 n+ A7 f9 {
1 `; I$ E: W3 E
6.类别选择器
. f6 X% h) r6 C4 h: a
/ @! E0 r; t' Y6 N在CSS里用一个点开头表示类别选择器定义,例如:! E, ~. h; t+ [& u7 K* D/ U$ e
.14px {color : #f60 ;font-size:14px ;} , K0 `) m, P0 j5 {
$ O7 n( y) s" Y% r! x/ R. E; Q5 b
在页面中,用class="类别名"的方法调用:% k6 o7 t1 R0 @; Y' f k
<span class="14px">14px大小的字体</span>
# e! t7 }" a' n( ]! U, u( s
' S& C! ]" z+ @# L9 `这个方法比较简单灵活,可以随时根据页面需要新建和删除。% u) \# ~1 V) w9 `8 i8 W+ h
& o/ f; o* I* |2 O$ e
7.定义链接的样式
. u$ |( @# G- ]! _& jCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
2 S& m. N% U3 c- L* b6 da:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
& c2 T' C7 l6 y9 [% j8 za:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}9 z4 o$ Q) y$ N
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
, z3 [; ?6 T: ga:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
' Y& f) I+ D$ z0 d1 }: g6 ?9 A1 }
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|