|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。# q- I4 p) [3 w. N; i% \ d
5 @" q) k; ?5 x# r6 ?9 b
1.基本语法规范
- p9 ~' q' I6 {) e& a. p$ m `; y分析一个典型CSS的语句:' }9 `; X3 l0 X$ s
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
7 K6 K9 @4 Q6 d, S# G其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
8 \+ v/ i0 ~9 F3 R r2 I, n1 {样式声明写在一对大括号"{}"中;
+ [3 n, @$ r1 R6 L% ^! M: M. DCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ' R! J1 F, g k8 m3 _) W! ?
"#FF0000"和"#FFFFFF"是属性的值(value)。
4 X8 l. w m# p% `. L/ F: W& z" W% s- a5 U" K
2.颜色值, b7 ~) d |( [9 }( p& L* ~6 z
! I* U+ e& P; ?$ n颜色值可以用RGB值写,例如:0 Q' t1 ~8 G2 @& f/ ]
. i: \, Z9 J$ n+ Q; i6 J+ K! x2 s4 p4 c
,也可以用十六进制写,就象上面例子
7 T( j. c- U/ P8 D+ G& R
9 W7 D! g$ m6 D- o& j$ y/ h. r
+ f) \1 m/ P* ]0 h, u! g! [如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
G2 W2 A" R3 E! ]$ g' ]
! m! W+ [+ M! o3.定义字体
4 E2 |% N, r D; ]+ ~7 l7 Zweb标准推荐如下字体定义方法. e+ f" E1 I" v4 D' d' E# F2 G
5 ^! \! ^* q# S" J* G# x1 ^
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* y _% u/ y" L: f% E3 [# N- [. l/ X* d字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
* O8 w3 i! G" ~$ K) d: U, b: }9 dLucida Grande字体适合Mac OS X; # L5 ^) y0 Z/ i& |8 ^
Verdana字体适合所有的Windows系统;
, @7 @( S% b5 ]" U6 N: t+ [Lucida适合UNIX用户 ) B& T) C3 B7 T
"宋体"适合中文简体用户;
1 G& h4 Q8 s4 L$ a如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;4 O. ^# O' k) Y K. U+ X* M0 R
9 v8 c; r& _$ d8 ]4.群选择器
; M2 Y9 k7 r% X3 N4 p; e- E9 ^5 ^* K( T6 E3 W2 E% Z" d: F5 |
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ L+ [0 a; z5 G& }/ z) Y" Q" j9 P, E3 e$ C! O7 H
p, td, li { font-size : 12px ; }
! A1 K/ z* f3 C- {7 l5 f就是给li下面的子元素strong定义一个斜体不加粗的样式, H( @+ f# U+ _
3 s' W$ j3 p) M7 ?
6.id选择器' |- X: b& Y' u4 O
1 p, o$ m( X8 Z( g/ x
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层8 `& U# B( Z" M/ O
5 [1 @( ~2 p3 i) K# G+ m
- [: N9 o0 z8 W) k6 ] t( l然后在样式表里这样定义:. `5 \7 c9 x# m. _/ B
1 W2 j5 ?. D( ]# t1 T: ?
1 j8 f# {! F" K# x0 F. J#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
7 u5 h% w5 H [; q' O, j其中"menubar"是你自己定义的id名称。注意在前面加"#"号。: f1 _5 U6 M" z, q7 a
$ \& \! U/ i( J
id选择器也同样支持派生,例如: p8 f* S* G- R H& l
#menubar p { text-align : right; margin-top : 10px; }
; E9 n$ J: y7 a- ^这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
1 @- C7 E. F8 O/ U- A: L+ }) u) n6 u& g, j
6.类别选择器, | t( H5 e; x% {
$ M' T. P# \' {! G2 `: a在CSS里用一个点开头表示类别选择器定义,例如:# ?' _1 y0 m( ~$ ^
.14px {color : #f60 ;font-size:14px ;}
9 i3 R8 g4 ]& p+ @- L1 @2 ~- w' M/ K( _, E/ H( h2 t! m/ G8 `
在页面中,用class="类别名"的方法调用:, w( N) t9 h f
<span class="14px">14px大小的字体</span> * [3 }- N4 A/ U* O8 U
3 j. i8 T5 L3 D+ g0 T这个方法比较简单灵活,可以随时根据页面需要新建和删除。
6 U/ j6 S: U8 {' I K
- {- |6 x6 J2 ?& _7.定义链接的样式
( T( z6 G* S8 g: q6 F8 b2 VCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
- e8 b% K# \/ P2 da:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}: U& S0 u" G9 j
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}0 J0 l/ k* w5 F# b
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
- D8 Y9 q8 B3 P+ B- qa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
4 A, }/ a! R/ q6 C& S2 d4 B1 ~- R
% i2 T9 f- k2 e. l' S; E+ l以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|