|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1 y9 p( \7 L$ v! X$ s' t/ h, a) ?9 H b! l7 D. f
1.基本语法规范' ?! `' e3 c+ U% v) f
分析一个典型CSS的语句:
0 n) v+ g5 S( \6 e4 T9 Rp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& b! ^# F. ?# N; J; V其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 3 K. E) S2 X+ g. z6 P0 U
样式声明写在一对大括号"{}"中;
d- P5 L# C) L& WCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 3 z, b/ M; f: \! p
"#FF0000"和"#FFFFFF"是属性的值(value)。
* m! A, m, e) L7 T( `+ n) g+ W
( g0 R' f2 K/ h4 c4 F' k* O" L2.颜色值
. U! T# t0 p8 X# l* o2 w0 ?# T! M, `( B& C
颜色值可以用RGB值写,例如:
) g! B& e8 |0 G6 l. y( l y7 z
8 v- X# \6 G5 ~& x* d
% P( @% Y( p4 E8 s6 v2 V5 y,也可以用十六进制写,就象上面例子
: ^# I1 L6 u6 ^! Q$ E
& E+ ^: Q- [( |4 y& E
1 H& A3 d Z) `1 W& ^- q如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
( H3 Y, M& h" `& @ A& r" l9 t6 B$ ?( F; H
3.定义字体
' J2 {* q% a( cweb标准推荐如下字体定义方法
3 h% e. u ?3 `/ f( J' V2 N
1 W: e' d3 \9 X( R1 ~1 Qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
& E0 Q1 q$ H# F( l) E: }字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
3 _, C( S8 {* J" A4 {Lucida Grande字体适合Mac OS X;
( e; j2 \+ Q; m' p$ O5 zVerdana字体适合所有的Windows系统;
9 _$ B" ^' J3 _5 s# |Lucida适合UNIX用户 ; F" J2 D3 d6 o) c. }7 N
"宋体"适合中文简体用户;
( Q! p: A6 {+ r; J/ w, }如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
, B& L4 u) B2 k& o% p
% C3 z; F! b: d, \! |% i1 @4.群选择器
- X( G0 F1 o& K, G7 f+ J4 F3 ^9 C& m. m5 ? }! W
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
0 j9 g, V) o4 n8 F0 e0 q2 C8 p
5 C+ t6 s1 }0 D& x. C p, td, li { font-size : 12px ; } - ~2 G$ V3 j6 V6 c6 S) Q
就是给li下面的子元素strong定义一个斜体不加粗的样式0 P$ e6 |) E* Y) k8 `
$ A) I# [# K+ R% x' u& h5 T
6.id选择器
! n1 S7 X4 i- o) [) |* P9 O1 q( I$ y' Q+ `
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层6 j* J9 `1 y0 }. ^8 p
. E& s9 f4 E" W6 ~; }6 f8 D4 M3 g6 O1 N* O: C% ~$ E# d
然后在样式表里这样定义:: |. y1 f* g/ F9 _, h) d
0 _3 x, I+ m. Q% X+ Z9 N9 ^6 {4 n' Y9 g: r9 a; X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 9 n# h' u9 J# F Y
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
" p; u0 F) T: j$ v
+ M8 Z9 _9 m; \5 Y p* m- uid选择器也同样支持派生,例如:! V9 i# \* [$ ?& U. B1 _) l
#menubar p { text-align : right; margin-top : 10px; } & W2 \" N: ?8 z7 g# N. b$ X& d |
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
7 u& _3 C) S( S8 j8 l8 w+ Y; o2 t" L1 Z
6.类别选择器
9 m3 k/ j- e; `9 E) D8 q% F$ J0 \4 T
在CSS里用一个点开头表示类别选择器定义,例如:* Y. [& S2 l5 `
.14px {color : #f60 ;font-size:14px ;} - T) y- a+ l' n9 w1 X) R
3 I: g/ a8 M8 p! _在页面中,用class="类别名"的方法调用:. \' A' O0 [) D2 b
<span class="14px">14px大小的字体</span>
$ k {7 G3 q* [9 h# m% ?- t- y/ T3 m7 s' k0 s) e
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
3 l& ?9 n/ A, q* G$ d0 M9 B; F+ w
7.定义链接的样式
3 W; q3 d0 T. ^% r; B6 S$ GCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
`) z9 F1 y4 k. c% k) [2 H+ @a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}1 r5 t6 W w: ], M& L
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
( u; X( X$ e' ?4 qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# H$ z$ k9 ~/ e; L8 k/ s
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} # @& O+ Q2 u7 j8 q, ]* n
* S5 f- A: n! V9 i5 i g2 D
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|