|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
3 m: V& s4 `0 q8 K4 }; Y1 i
. X# S8 v7 \9 ^6 J: h& d3 f1.基本语法规范5 `2 c1 r) e: i7 G8 r5 w
分析一个典型CSS的语句:" R, Z. Y' M- w0 M! @9 ?
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} ; n' R& m) ^3 W# B1 r
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: z* o) |% h; g样式声明写在一对大括号"{}"中; 0 \3 m2 {5 f" P8 m. z; b9 {+ O
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
" s P# N6 B3 M$ \8 J"#FF0000"和"#FFFFFF"是属性的值(value)。
7 h: s" n5 ^, F, u$ o) [' v1 Z. g4 k" l. V
2.颜色值' p# M* \! {. C( Y( d1 c
J- q2 F% [! g5 t: J* h
颜色值可以用RGB值写,例如:9 F0 S) ~6 E* C1 w. q: i
2 z1 I' ^4 ?6 \) b# z1 \ Y; X: b# V6 I: q. F' d
,也可以用十六进制写,就象上面例子0 p g6 o& E. O: G: g
+ z) o8 |) F8 o; j' ^# I6 ?% a4 c# m
5 l5 y. x$ ?: p
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
$ p7 r; i* |! I% [
6 s# E) x# O. \# B" A3.定义字体
2 B, P+ P3 w& E. t* L: Aweb标准推荐如下字体定义方法& j. X' r/ V% d) [7 L; m
, x% f9 f) V! y, o
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } , E/ G$ _# m" M$ Q& W$ r0 f
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
9 r! c) V( E, N% P& o( wLucida Grande字体适合Mac OS X;
, @1 P9 @1 _( n# c h0 u* h% `Verdana字体适合所有的Windows系统;
) B6 _- v7 |- V7 N4 |. ]Lucida适合UNIX用户 & n9 C9 U) t6 e
"宋体"适合中文简体用户;
+ X& L9 q/ n/ k) _& l% l( d, X% j如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;" U2 w" U5 W6 ~( N# }6 [
H( E) ]+ y! s' l9 b: Z: p8 J; \
4.群选择器
; d- \+ Q0 W4 s% X1 a
. A5 @- |* i' l7 P1 b当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:) y- m5 Q; ]* d/ j$ O+ [
) x$ @# u, F" |/ |; K p, td, li { font-size : 12px ; }
. \* x, r7 |3 U1 S0 v5 j5 S就是给li下面的子元素strong定义一个斜体不加粗的样式5 f# L, }: i- ^) f3 ?) ^
$ d# T8 K, @) s6.id选择器% Y" s p1 B# c% T
# U4 x$ x$ _( n4 L O* ~$ f3 b, i用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
0 d7 f1 A, n' N' d/ `/ j. F. d! }3 O' v! n: {
7 o3 }+ }( k" [* \! H
然后在样式表里这样定义:' ^" K$ u) E5 ]5 @
$ Q3 v! N* x5 ~" R7 s5 |! v
- r% }- X; S$ B4 F" H
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} % y9 P% ^( p$ x
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. T! v# L' M& \* o
7 C% R' B2 c7 `% ~, q5 S7 Xid选择器也同样支持派生,例如:, r( ^$ B" N6 {/ d2 `: O$ X# z
#menubar p { text-align : right; margin-top : 10px; }
" j4 T; ^9 t5 J4 s F' l6 G$ @0 @) ^这个方法主要用来定义层和那些比较复杂,有多个派生的元素。- j: j# }, n9 i$ |# o# R! ?
& L$ V/ B) g1 N/ i: {6.类别选择器
Z8 ^& y' F- `" S& p% J, R- j, X2 q1 w0 c' t8 P' `
在CSS里用一个点开头表示类别选择器定义,例如:. `3 I1 A/ ^% F0 v# \. e! r* g
.14px {color : #f60 ;font-size:14px ;} / W! ?- S: l! C2 }* r
5 i# e: o4 H' ^% ^; @在页面中,用class="类别名"的方法调用:1 E+ ?+ @2 Y: X$ H$ d P
<span class="14px">14px大小的字体</span>
* J. D5 g' J: @* k% _ v. M7 W. T* }# G- i
这个方法比较简单灵活,可以随时根据页面需要新建和删除。4 J* E' U, {, ]& l6 q8 g
2 }, B1 ~1 w4 O% e: q; Z' u/ b7.定义链接的样式
9 S! }& e: ^# W5 ~* ~CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:0 s3 V! `/ q8 X R. d3 n$ Q; v+ V
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}2 @6 a8 h, Y/ P2 w, ^; S2 b2 Z
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
0 b. b" s6 C; ?a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
+ q' N! g: _5 P+ ?4 ma:active {font-weight : bold ;text-decoration : none ;color : #90 ;} , J% j5 s3 p! }0 p8 N8 y; r( V3 Q
7 U, o$ g6 W, Q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|