|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
$ f7 O+ M) m: ]7 x& z6 ~6 E( h/ h+ ?% \. v& d- [
1.基本语法规范4 M& ]- Z! Z$ W3 J- n/ |
分析一个典型CSS的语句:
5 Y- b. F+ ~# }, u$ {: \p {COLOR:#FF0000;BACKGROUND:#FFFFFF} + S: B7 i. I( m0 K% z# }
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
& ] t. z# _- v/ K3 ~样式声明写在一对大括号"{}"中; ) _% l5 ~! I3 }& z X" I- e- V1 d
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
% k1 K& N5 S6 V( u8 S/ g8 u"#FF0000"和"#FFFFFF"是属性的值(value)。8 `9 i [- x/ z3 c) a& h
( A& r4 b- u& T' v! z
2.颜色值: E$ s! |1 A0 U9 w) H0 f: ]
: l" a7 b9 X+ N+ ~) l$ ~颜色值可以用RGB值写,例如:- U0 y. m; P% A$ N
" W/ D) j; u5 k& ^8 {6 `4 B
8 v8 F2 i( Y% ?$ q0 H- U,也可以用十六进制写,就象上面例子
7 g2 X) d' ~0 D3 m" |5 u) W p( K: F/ N6 z7 `" B3 b0 B. t# a
3 {5 C9 x( z+ G& b. u5 C4 d o如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
# X: `. S# ]+ b7 y7 u9 Q: I: `
) c0 i4 f1 z5 c Q5 | D3.定义字体$ r) b7 x% {; {5 P
web标准推荐如下字体定义方法
( T9 v6 n$ a v2 W) d: X$ ?+ e
4 E6 W3 }8 E7 G3 ubody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
$ R" X7 y. T9 k* \4 \9 y5 G0 A字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 2 Q) X; u* q7 ?! c; j! i% L8 q
Lucida Grande字体适合Mac OS X; 3 V1 p W# ]- K: a9 G* m
Verdana字体适合所有的Windows系统; 8 d; c) I/ D9 N+ u
Lucida适合UNIX用户 % |5 u) ^5 T' n5 E# H w: D G
"宋体"适合中文简体用户;
2 Q# y7 b1 U: e) c2 H6 D+ c$ \如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- {* ~) T( F& r* s* [
# I4 Q% W" t& l0 N4.群选择器7 Y" b9 `! \* c
$ e' P0 G; B4 l$ [9 ~
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:. O( q& d; v8 C, M3 {
: {( ?8 Y2 U% u p, td, li { font-size : 12px ; }
1 g0 I ^) L/ u/ D5 w$ p就是给li下面的子元素strong定义一个斜体不加粗的样式+ k5 A B! R Y5 j" N2 @1 U
5 T! S4 `* T4 g: ~. W4 o( l/ h" G6.id选择器
# b E: @1 G; W s1 o2 L/ }& J
G, H3 W: g; _& `, W用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层% f! I2 J4 v% L+ {# I ^6 l9 e9 D
3 `; d4 ?8 {& o
$ r/ {0 {: A& n; I& p! O+ G" M然后在样式表里这样定义:
. z# U- Q4 O* m4 b* _& L+ P7 b/ a" K' z0 f6 n' W0 M. t* G0 ]7 y
; ~4 b; x% C6 w. c( D
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
9 l* H& L/ |* {, f9 v其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
% x0 R6 w8 E# u. L; A: r" Y7 n
, k, c) p7 S. `id选择器也同样支持派生,例如:
& W5 }0 d" U1 {3 K- w#menubar p { text-align : right; margin-top : 10px; } 1 j' m8 v- [: m: B2 y
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
: n4 U! d* k" f8 [: l4 H7 r6 g0 |! J* @0 o p
6.类别选择器
- H0 n2 r7 O% W- I- s; F5 j5 ?; g1 P; Z; r7 @
在CSS里用一个点开头表示类别选择器定义,例如:+ G: [! K9 a: R" P/ X, p2 p. e) b
.14px {color : #f60 ;font-size:14px ;}
3 W* {" F% _' w9 A8 _$ B2 S7 ~+ N" [% U% L
在页面中,用class="类别名"的方法调用:. ?) E9 X2 b4 m6 n* F; p
<span class="14px">14px大小的字体</span> . k" C3 K4 F4 J' i$ R
9 M6 C _& t. O- Y
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
$ v1 c) A& [9 y! u3 ]( H o
+ Z7 U( t( M/ q. N+ N: C U- i7.定义链接的样式
' n8 h0 u7 q7 A# sCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:. d/ m- j4 b x8 B
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
% I9 P' E. k' J; g* na:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}" ^5 F/ J! e+ W; S
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}; J4 \! x B, N& z, ]% n
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
" ^: B6 X6 U2 ~& Z: T% a
( S0 k' t. v( R+ o6 z以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|