|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。8 e3 G; H. M' ?( q/ I- L
4 \, ^7 L7 P% m* W5 w6 L* F! c1.基本语法规范5 F2 G5 I% ~! r
分析一个典型CSS的语句:9 S7 \5 _; Y8 G9 d$ Y( c* ~$ R
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
8 `- p8 h$ o% H4 y其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
( q/ s4 f* X0 J) Q) m+ C样式声明写在一对大括号"{}"中; . Y/ V# r7 {& L) Q& i h7 J
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 1 S) Q- k; ~( t7 `1 u" R
"#FF0000"和"#FFFFFF"是属性的值(value)。
* V6 ?9 @% j$ H7 |9 `$ Z( w2 z8 H b
: f5 Z5 |& q" t# T2.颜色值
7 r t# `" a" j0 G; z \4 e
, b* b. c, Y/ }0 E/ Y颜色值可以用RGB值写,例如:" z2 ?- X g9 d w3 F! G
0 m8 S& W- R6 `+ R1 x* m" D
r) e8 f9 x8 M; a2 }% b# V,也可以用十六进制写,就象上面例子
+ ]' x5 T$ R+ V; A3 {/ U3 M/ E4 g* p8 r! X/ N3 E0 M- B9 p! q! ~
( ~# K8 @$ I# T" B, x
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。5 y5 {+ l4 ?+ p# g* O
" K! B" q+ s3 R6 }" w4 M3 E3.定义字体% p1 G; @* _% o1 _* d; d. Q# ?
web标准推荐如下字体定义方法+ o4 a4 \+ P( F( k. O0 T" R
* B- ~0 ]/ t- Rbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ! C( Q7 h7 k, i0 D5 c
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 5 l9 ~. X" X, z( \7 Q
Lucida Grande字体适合Mac OS X;
: w# d# U) I1 U' ^Verdana字体适合所有的Windows系统; ! Y7 Z5 z8 w2 `( ^
Lucida适合UNIX用户
: z: h v+ L5 o) K& @ i"宋体"适合中文简体用户;
Q: p" c2 m: g7 [5 V, T如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;# o) m( Y* |. V0 k% r4 o
2 v# `1 w, a) K; ]7 s5 E4.群选择器# p0 g5 ?( c( p4 P! L- |
+ I l/ K: ]/ ~4 [' m4 S0 Q当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
# c6 n8 P ^; h4 n3 O0 ^
+ X) H1 Y. p+ v8 Z p, td, li { font-size : 12px ; }
0 P- g0 e" [0 F5 `; r! U- ?* g就是给li下面的子元素strong定义一个斜体不加粗的样式
9 _5 T" j4 G- ?8 a. c+ m6 a6 V# q4 \. X6 i
6.id选择器
# p7 X* S' a5 J8 ?( {( U1 o# D& Z; Y, ?9 g) I+ h( p2 I
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层5 G" j: ~9 \! u- E/ Z# a4 A; Y
2 f; t1 j- ]. x E
$ K* v, h8 k! ]) B" C1 E# L
然后在样式表里这样定义:
4 K7 Y2 Z/ R7 g7 P2 Z5 B$ C8 \0 J1 d% w* ]
( v& q. k8 m; p2 H7 s0 I
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 h8 |5 t4 Y: ?- s* a n其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
% K% {2 @: n2 M* Y) F5 ~1 A( I& C% B) D2 [3 l
id选择器也同样支持派生,例如:
: U" K+ @. n s" d#menubar p { text-align : right; margin-top : 10px; } ; \; N2 Q& A2 q/ h
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
' c8 V( V) K' F/ U7 v5 i
# `& M5 l. J6 e1 Y/ P+ q, g/ P6.类别选择器
" H- N% f2 g# I% h+ Y- e8 S1 s
在CSS里用一个点开头表示类别选择器定义,例如:" e& `% ?# i/ R9 x6 N
.14px {color : #f60 ;font-size:14px ;}
7 ?& p5 Q9 A: z7 v8 l
- x- R5 u& X: g# {& ^) |. ^) w$ ]" P在页面中,用class="类别名"的方法调用:
8 I* Y1 p3 {2 j+ U+ k$ g1 O' Y<span class="14px">14px大小的字体</span> / V8 j9 o5 U7 v5 j& K4 R/ G
8 E* L& y2 p+ m! s# H. X! V6 w
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
3 k- _* u4 o, ?8 v& G5 q& k# Q8 J# { s- a, C
7.定义链接的样式
0 Y2 z; t$ {* b( o7 ECSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:$ U* S4 f! ~% v# \
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
% O9 [" B, V6 q" i* x8 Ea:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 o/ _+ F( q% n3 Z! Q, R8 X
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}6 w, k( [' k) R8 n) y8 s, N* Z
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} , i4 M) M# v+ u
8 m) _8 N! t3 k
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|