|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。0 D" n- R8 |9 p
; Q4 b# o% T7 Y. c1.基本语法规范
5 M( B* B3 Q9 }9 a: ^7 T2 Q分析一个典型CSS的语句:
! n' P% w* Q: F+ \, G- t4 wp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 J. @1 {& Y X( _8 j/ ?1 ^- u# @$ k其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; % w9 s# ^( D! s
样式声明写在一对大括号"{}"中;
: b( e# ]' F' UCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; : }3 B, C. N' L7 U) G
"#FF0000"和"#FFFFFF"是属性的值(value)。: m; ?, [7 K# Y7 J7 r2 k8 P8 h0 D
* y9 U& u [$ {2.颜色值
" ^ h/ L2 K' @: s3 m4 I9 i% r5 a, n3 x4 x- @
颜色值可以用RGB值写,例如:
C+ C' d, {# r" \) A) g& E& u7 W0 P
4 T' o& V! J+ J' |. v O# X,也可以用十六进制写,就象上面例子
1 y+ N! B* c% g6 ]1 `9 S* E* d/ u* w8 Z0 }) B: t# L: N
5 `- h% E: W; N& t+ T如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
! c* g( z" h( f. i1 y5 q6 ?: J; ]9 v2 ]; u
3.定义字体7 {' {+ A3 c. s ]4 r8 S
web标准推荐如下字体定义方法
9 `3 b! c( R, N, o i# B/ n. U! F3 @$ k V# a
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 2 z+ E) Q* L* V2 x
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
) y% _3 c: ^7 sLucida Grande字体适合Mac OS X; 9 F' H6 h: M! w8 ?4 a
Verdana字体适合所有的Windows系统;
' r. V+ _& N" aLucida适合UNIX用户 4 O) Y# N: |) N. S" N5 ~" I; w1 @+ ~
"宋体"适合中文简体用户; 8 ?0 s q$ b% U
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;, l$ \+ m: m; k
/ u- w; }: o7 @
4.群选择器
* x. Q1 @ u4 H: N8 c0 g7 W' T
I& s6 Y6 W6 @1 f4 }' D当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:- b+ Q& c, t/ }$ m$ W. `3 [9 Z
4 h' K8 \# W. N
p, td, li { font-size : 12px ; } 7 d4 v5 J' ?: b( v4 A1 @
就是给li下面的子元素strong定义一个斜体不加粗的样式( `6 r& U# _& W; m3 P( u( g
1 E6 a% s( _; s
6.id选择器) b: ?2 f. s @8 @/ e+ e- S% C
8 E/ u1 T( B3 K, s R
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层2 a% u' Q( e$ P- m! H
1 c8 ^0 ~' Q7 N: W, t
# R/ r8 Y; B% c" l2 _4 Y4 t6 E然后在样式表里这样定义:4 B4 q4 D% g9 f
" m! ~( v" ]$ ], ~
% O3 y- s: o- O4 a#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! e) x4 B9 T5 ^" ` H其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
% |1 _/ X8 P) `5 X+ Y; T. D+ ^: ]& v7 Z9 }
id选择器也同样支持派生,例如:/ w4 U1 I! ~$ V4 d
#menubar p { text-align : right; margin-top : 10px; } 3 J: K5 Q2 g9 V ~) s
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6 V- y. W( F/ g! I) ?* j3 W1 e! {( d/ P' U& ~
6.类别选择器/ H# H2 E' o$ u
- s! |- ?" [3 `3 m: F- N
在CSS里用一个点开头表示类别选择器定义,例如:
, R/ Z8 l6 {& b2 q.14px {color : #f60 ;font-size:14px ;} ) Z& T" j# T, H, p( T' v
6 i8 `) G" C3 V2 H在页面中,用class="类别名"的方法调用:
; L1 Z8 H( }+ @# m4 d0 l<span class="14px">14px大小的字体</span> ' D R) b! n& @9 `; a. K' \- U$ z! W
% @) Z4 g* L! n# `, A6 N e3 R
这个方法比较简单灵活,可以随时根据页面需要新建和删除。: x/ b6 X5 k5 Q' f4 d ]
^+ ~, F9 _/ Y, q# o w7.定义链接的样式# e2 m2 T1 Z6 q" Q- o0 q
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:9 S8 e# Z$ i; L+ |) W
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 l4 T* n0 U, Z# ?7 w+ j9 U, Ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}; c- Z* v. s; L+ n/ t0 q
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}& r& E4 v7 i+ |/ }5 x
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 7 J) O& p/ D O. V5 e0 p
0 ~+ D0 `" a8 M, n. n
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|