|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
* l& d! Y! l7 a7 I2 y* g1 }% m! U: E1 u+ C; X& d9 z
1.基本语法规范
/ Y( b6 ?0 S: Q, w* U" n9 `分析一个典型CSS的语句:2 A5 q: t) c/ o
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} - u, s, z# N) d& o: k
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
9 {- j2 h# b5 W样式声明写在一对大括号"{}"中; * T+ E3 j, F8 A O
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
- d6 U. p* N" ^' N* k( k"#FF0000"和"#FFFFFF"是属性的值(value)。; o" j9 C: \ i9 l
. B1 Y2 [; A0 Z i* z
2.颜色值
# x* ^# M+ z6 Y* ?! V
9 N3 O- [8 L w }颜色值可以用RGB值写,例如:
4 n' L& D: R* G. H5 i" Q( J' u0 ?8 P. j' w, {3 M( r4 {
; p" o% [2 M Y3 ~9 u9 K2 P! X
,也可以用十六进制写,就象上面例子* M( y; H H$ d
% q. r4 k y% i/ b8 W: f D
! ~+ A! w! O# ?3 u如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。 k+ e3 T3 g0 p+ H5 u/ ~3 O
3 }5 V. Y4 ^6 Y, `: B' ? U
3.定义字体
& n' y0 @) _2 c& R7 J4 X- b+ [ Rweb标准推荐如下字体定义方法
) l3 ~ \ a U: B0 o& W6 _
* S! }8 t4 ], k x2 n3 Rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } , V+ [1 f6 j9 z! J, s1 L" `# g
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; % J( e8 y) \ e# |
Lucida Grande字体适合Mac OS X; ( ^7 j: B! V2 q: ?8 V1 |. ?
Verdana字体适合所有的Windows系统;
, t" c9 I; C$ D+ I5 [Lucida适合UNIX用户 x8 C, r8 C% v, t% C& e0 A
"宋体"适合中文简体用户;
( \ B: @' s. v% O. y3 t+ ~如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
, S8 t* R* }7 m& r5 B/ |2 M5 e& E- S6 m/ n5 F: w2 q
4.群选择器( _: u) A3 P5 R9 v1 C
; \* Q' e; E l1 K( M% D1 P当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:9 D2 Y4 _' g; F- t/ Z4 s0 J
: `0 k& Y, v* P1 e$ g
p, td, li { font-size : 12px ; } 4 C1 |; N+ k! Z. F3 @3 \4 q
就是给li下面的子元素strong定义一个斜体不加粗的样式
7 [+ E3 v8 ?2 R1 N, D3 y& T
/ p7 u' V; X4 G9 K s6.id选择器
3 j; h( ~' d8 t5 z8 h$ e+ b: d0 z: e( M! c1 S" g Z
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. M% U, B$ L, M# Q4 ^+ W1 Z. a* p
" o' S& z7 U3 ^* S; C
7 j, A; |( M+ R0 l然后在样式表里这样定义:
+ C# I' l+ n8 u+ u
, }, J0 \; p4 G) l2 o
& X2 B4 s. Y B3 E; x) \2 K#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} % g \2 ]0 m; m
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
& E. M' v) ?! U) G0 B0 H9 G% y* H; l: ] C; U" N
id选择器也同样支持派生,例如:
8 t1 D1 y" A6 _# ~: S#menubar p { text-align : right; margin-top : 10px; }
6 Q8 p: U$ ~, I6 ^* d这个方法主要用来定义层和那些比较复杂,有多个派生的元素。0 c; u; G8 [' q$ {* G J3 T0 v. N7 k6 [
/ j9 c: ^+ D t# F; c2 l6.类别选择器+ x! D* V: C6 s; g9 b% d
5 L* a& \( Y/ F8 y# }
在CSS里用一个点开头表示类别选择器定义,例如:8 }2 @4 G5 N. B! Q
.14px {color : #f60 ;font-size:14px ;}
3 p) I$ @* V+ Q
& E' H! r3 |, s$ C' C% [7 ?. `在页面中,用class="类别名"的方法调用:
7 q7 K8 s1 O' R+ @+ m9 _, C& J/ {<span class="14px">14px大小的字体</span>
+ x# R8 _0 \# g9 [
8 f- @0 \, t" G8 v这个方法比较简单灵活,可以随时根据页面需要新建和删除。( G6 N/ h$ ^; w Y/ ~
+ U9 J" c. o! t7 F6 q" ~
7.定义链接的样式
9 y% B A3 L- z% KCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
" {7 z& M) [. O$ M' Va:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
. W6 m$ N1 ]3 D, P- ^a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 {& w" H5 g7 }3 ?$ i9 l
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}! a5 f; S8 F" K' u0 l! z
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} % t' E$ s6 r; `( P( Z7 X
4 P8 r* \4 v; }$ j$ C" G以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|