|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。$ R0 f e; j% H) M# ?4 U! v
3 H0 \6 ~4 _3 z5 y6 ^1.基本语法规范
: f& d1 J$ ]3 l分析一个典型CSS的语句:7 C7 h! q: m5 ~2 t0 h
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- b# r7 | k- j5 d5 z, `其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
9 Y/ _/ G2 s6 W/ n3 o样式声明写在一对大括号"{}"中;
/ C% o% S' o' O8 |) yCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
5 P" _, ?' u! r% c2 [. @3 W3 O"#FF0000"和"#FFFFFF"是属性的值(value)。
: g* A3 V- K8 {
' n. r" u) g$ o1 k6 J2.颜色值
9 ?' A2 ]1 c6 C m" P* `) c, H5 S, e$ {6 }4 U, v* N8 \
颜色值可以用RGB值写,例如:% v# i. e: i, r% f0 M1 E
- t2 `7 N0 R4 s2 @) t
4 [1 v: F% r5 p,也可以用十六进制写,就象上面例子1 n2 _" o5 i$ K2 v
. A! I2 [% D: K/ u D! D7 ]3 ^
$ F- X5 j, t% ?+ v如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。# j5 [3 Q: ^8 q. F) d7 B3 [1 P
1 { h* I( }: g3 t
3.定义字体
; t, _; }1 ^$ m0 J7 zweb标准推荐如下字体定义方法
- Q6 d$ A# n4 J4 v. s2 A/ a4 v/ H. E% x
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
! P. S6 K$ R2 Y& B1 K字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
9 V0 N0 K! W" a, U* f" _% \Lucida Grande字体适合Mac OS X;
% P K) j6 ^# \6 HVerdana字体适合所有的Windows系统;
8 N' ~6 |- r2 v: z6 ^, ?( A# jLucida适合UNIX用户 8 `8 z- ~7 S- y
"宋体"适合中文简体用户;
# M- w3 y4 G- z) B- J如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
; g( J- s5 k! C1 L! w
/ f6 n# b* B/ I* {) O+ C/ `! b4.群选择器
. e9 S$ D O2 K5 _
2 J$ R q7 ^+ G$ D当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
- H6 Y) g# _) ` `5 F1 L( V) c: q
9 L1 h9 Y) `, }$ p% l4 M& F( n p, td, li { font-size : 12px ; } . P5 `: ~6 s+ q# ~" M) l
就是给li下面的子元素strong定义一个斜体不加粗的样式
0 ]: `# U8 F5 S! ?" T) k* ~
% u7 y8 W: r5 Z6 s8 j6.id选择器' ]! ^% W( D, b4 \9 V
+ b% C% k7 r4 @用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
2 U/ X- W+ r1 }3 o5 v3 y, l5 N* T: d5 ]0 E; O: r6 y* r1 X, ?5 R }7 v' x
9 l2 \1 L+ ~ x- u; ^0 V: C& f- v
然后在样式表里这样定义:
/ Y, T) u- p/ }/ F+ j- s
5 f9 m$ L7 x: A6 E
% g: r+ v6 r( f#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 5 l% I7 R% ?7 o# X P# @
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。8 D4 I/ O* { ~6 D9 j1 h! m
* E. X5 N ~& ?" R) K( ^
id选择器也同样支持派生,例如:1 i# Z% s8 S! Z: L' X5 s
#menubar p { text-align : right; margin-top : 10px; } 2 n. b' n; Q" I9 v
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6 X! G0 q' L9 T2 X
: h, R: U; C2 j9 d6.类别选择器
0 \. a' z+ i% I& v0 k# v' ]3 w; N1 Q: U0 f2 y' P
在CSS里用一个点开头表示类别选择器定义,例如:
4 B* N- f# {' u- L) I.14px {color : #f60 ;font-size:14px ;}
m- P1 M! O5 b& R; ]1 w
5 ?+ U5 G! d. v; D在页面中,用class="类别名"的方法调用:
" W' M8 O/ z0 m# `<span class="14px">14px大小的字体</span> + C+ I+ e! J/ k7 b# z# i1 @
! c3 F* P: t8 b# v这个方法比较简单灵活,可以随时根据页面需要新建和删除。
) R- @# g3 ] |& ^1 o/ ^+ D5 n. O( \+ W; u4 W' @" y% S! a2 @
7.定义链接的样式
2 n3 t% U% _4 G3 A6 N: d8 q7 nCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 m/ |0 I- {3 N$ k
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
8 B! h( \% r2 N6 V0 ka:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}) r7 t' o6 Z2 N" D2 d, f0 P
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}2 w' T7 W( }: r' G* r
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 r2 a# j! o7 i8 |8 ?- g0 b; E2 Q* o6 G" _- ~+ ^1 d
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|