|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
0 K: `$ g1 g* N! ?
. o5 _ {# L9 k! n2 H& {3 j' u1.基本语法规范
8 X* D) H$ q5 j' P& j分析一个典型CSS的语句:& y/ }! t* c6 H: ^# Y1 r3 A
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
4 q. ]1 q h4 o! P1 \) h/ ^其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 i# V! E$ e% a样式声明写在一对大括号"{}"中;
- e7 @ |) z3 K# M' m8 u+ B; lCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; ( v/ i. z6 t* ?; e1 b: u
"#FF0000"和"#FFFFFF"是属性的值(value)。
2 q8 J% I% k8 F1 L$ }% j O( }& f7 a- \0 m' N: z
2.颜色值; J v2 m# h+ I
& d' d# x* a8 w) ^1 o颜色值可以用RGB值写,例如:
5 q* e5 w* N7 x* Z9 v; v( {$ d0 n; k) [/ U9 P9 M- |
3 L+ Z9 L! n. T4 o7 U/ `
,也可以用十六进制写,就象上面例子" D9 P0 x* B7 ]- w: I
3 w. @4 Z( F" E9 t9 s/ ^
; C0 t6 m/ s/ P: q& \8 |3 O2 ~如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
4 B3 B1 J4 f5 m+ O* d/ D+ K* b7 I3 O3 W; [3 h! @
3.定义字体, ^- p4 [, b' x5 e8 p& I
web标准推荐如下字体定义方法& P7 N3 r- D4 X0 P
% M1 |( Y$ A) l# y( |& Z9 X( T
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 6 u, t3 m. d# e M: [8 ^( A
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 A9 l" F; D0 C( _6 B* T$ Q
Lucida Grande字体适合Mac OS X;
# ]( x& ^" g7 hVerdana字体适合所有的Windows系统;
9 ]' J& S- ?/ w# q8 L- pLucida适合UNIX用户
8 Q5 g( t0 c2 Y6 L7 J y"宋体"适合中文简体用户; ( D% F- @& L0 H2 `6 P
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;% m l, b9 C8 o
, m* d6 H4 e! X' v; E4.群选择器6 H" i7 R$ E- \& Z# E' U, C
7 x+ M( h" X2 b5 Y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
( S @' h8 i, D) }8 }
, O5 ~! u, C: t p, td, li { font-size : 12px ; } , ?5 a, K* N0 u, W6 r# G
就是给li下面的子元素strong定义一个斜体不加粗的样式
5 _& }0 Z5 d' b @% k4 q; Y7 e4 H4 U6 O6 c
6.id选择器1 @# x* \( Z! \/ n% o
6 W$ [6 j/ `/ q$ @
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层4 }: j; r3 F; b1 I, ~
! E4 ?1 T' q" j" `
1 _( J& `1 e+ z! G; r) K; F3 y然后在样式表里这样定义:2 Q/ t, n8 {/ k6 e, ?, X$ `
% H! R. X' r0 X6 H$ @
& Y* T. y+ s! @$ p" D
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
) V' E! n }! J: s其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. {5 m9 R/ Z/ W. T
) ?1 T9 x- @% `. g7 z' v2 g9 |) F
id选择器也同样支持派生,例如:
3 |$ E/ I$ C; K8 s' B6 c: A% `#menubar p { text-align : right; margin-top : 10px; }
) R: }9 w5 t* [ H. [% m; t这个方法主要用来定义层和那些比较复杂,有多个派生的元素。2 c: L d- L' N/ \, |' c. p
. [, I, G% {+ N9 e0 b6.类别选择器0 ?% a* k# t" l$ y
3 N( W! g( B/ W- `. d
在CSS里用一个点开头表示类别选择器定义,例如:
0 U5 h9 n \- s/ l) ~( ~& G& M8 L* A.14px {color : #f60 ;font-size:14px ;}
6 C$ @2 d" }& _- m% D# f" F9 U
4 u; L& P8 j) {1 ~( E. c在页面中,用class="类别名"的方法调用:
2 x" ?/ D5 _* O/ r<span class="14px">14px大小的字体</span>
& Z1 h/ L& }4 H& y1 C3 q3 ^
4 N# O) h T; {这个方法比较简单灵活,可以随时根据页面需要新建和删除。. c+ Q0 j* _. r+ n) t; L
( _* K+ H. S* \2 Y: k9 [+ Z
7.定义链接的样式; b$ T# a6 u* l7 v) L; {# X1 n% G2 d
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
% R3 k5 C( y' e+ v2 Q3 O% |a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}1 v ]) C3 L2 p) R5 g
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}8 |: S1 V C! g( K9 s
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
+ u5 s! X0 L) N* g( ? s% Na:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 _% V" b: K4 N7 P3 c m+ l
( r& M# Z# U4 H以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|