|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。4 t$ H1 o- ?" r2 f @& |* G
0 t/ c: i) q% N I7 L1.基本语法规范
& i* p: }1 H \1 p4 O8 h分析一个典型CSS的语句:2 j* B' y7 w) d1 g$ @* v
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
* h$ a; z- T: U+ k( m+ C2 C其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 1 |* Q6 m4 }1 @9 Z
样式声明写在一对大括号"{}"中; 3 I/ u; L- b0 j0 a; Y
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; * q w. Q; A9 A4 ?) S& Q
"#FF0000"和"#FFFFFF"是属性的值(value)。$ Z- o' e( `7 x& S7 {. [
) u! t# y& o8 g" D2.颜色值& Q8 L# o U: M+ m2 t* L: ~5 G% i
# A$ w ?# ]7 U& ~* |; A1 M6 F u+ J颜色值可以用RGB值写,例如:
, I5 e( C7 k6 e; u1 _. i# c: C+ Q& m* Z6 _. I% |+ \
- {- C. E" M' _. f
,也可以用十六进制写,就象上面例子
7 A1 l! M0 x% v
. S/ z# a9 O+ w( i$ P8 T
. o: \2 M& V$ B: K如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
( R+ T# o4 a% U% n! _# N, l4 R! I& s" D
3.定义字体! N: i. c1 g; `- \6 P+ ~
web标准推荐如下字体定义方法$ {* _ t% {% b1 t U( M3 K: f! p
: b* b" ?) [: K6 D/ F1 Bbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 r& H9 l) c" X- ~字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
0 T7 R8 W7 i& I( ]9 k; @Lucida Grande字体适合Mac OS X; : g/ z9 m5 B. s$ a* E3 _; i
Verdana字体适合所有的Windows系统;
% B4 f, W( [: ]' J+ `' w2 qLucida适合UNIX用户
& b" U9 S3 G+ @- q"宋体"适合中文简体用户; + E; B1 ~! _" r ]3 M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;9 U1 N2 x- | |
/ k. @- X6 I3 A+ I* n% U2 ?- f4.群选择器
: P* o4 z, ?8 \+ y* a) c) O( l
) C& _9 T8 n7 B5 L0 M$ O当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
) B- w* F' z* w9 {, f: L5 h8 y6 p |- g+ p" \% Q$ D/ N* x% ]
p, td, li { font-size : 12px ; }
: |% H. w! h$ j: T) g就是给li下面的子元素strong定义一个斜体不加粗的样式( N% L7 V. c1 ` h m
' d, o" k5 u8 x5 ]: R6.id选择器
0 B+ H: \- ]( \. T
# X( H" r' l7 g+ x9 i+ g用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层0 e. `8 l3 d+ A; J4 D6 D6 B9 T: E" Y
# F1 X) S9 [& P9 s' J
6 T, M7 ` \* r- ~; s/ X' |- ^然后在样式表里这样定义:6 F5 a5 Q& j0 M" Y
) k7 H& h- I$ D9 l
" o, f* t7 `( @ X# ~7 L
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : Q( F2 | f: B4 l6 o
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' {! `6 k- Q0 J# b" `
3 B+ Q- t+ i! @# L ?& Q# @. d/ kid选择器也同样支持派生,例如:. {1 @7 x- Z5 q& [+ q" Y
#menubar p { text-align : right; margin-top : 10px; }
2 y! B1 F: I) _( O这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
: B8 f% S& u7 V; w9 b9 v' s. M6 Q* }/ W5 y2 a1 a% Y' t" A+ l
6.类别选择器; B8 i! `& O. H- \5 r- `9 k1 ~
$ r- ~1 t2 ^8 W1 Y. j& @6 O+ q
在CSS里用一个点开头表示类别选择器定义,例如:
9 E# S! x, Z! F.14px {color : #f60 ;font-size:14px ;} 8 E* h& }7 c; g1 b! G& p: U; h
b1 |4 B$ M, F5 s3 L9 t1 z6 S
在页面中,用class="类别名"的方法调用:' K: g. d1 m6 \
<span class="14px">14px大小的字体</span> * Y# i. v5 }8 i2 {5 I: l' B
2 i; c- J+ ]" R这个方法比较简单灵活,可以随时根据页面需要新建和删除。
( O& M+ L/ ^3 m% C- j( r b
* Y7 [& g2 |/ M' ?& G7.定义链接的样式
7 y7 H7 x, r5 a3 s1 A. o* f! KCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
( L/ V( [1 ~5 E1 s( f8 D Za:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
$ I. [1 e7 b# a% E( Ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}* Z) l3 x* S5 j0 o
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}) q) [7 _4 t. E) z4 B
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. e+ o2 A9 V: T; y- k9 l
4 t1 ~) M* C+ W, i6 z以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|