|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1 }1 \7 N+ x# O i: {' s3 ^
& {( q" m" b o) d
1.基本语法规范6 P B$ s$ ^: l/ ~8 }+ c
分析一个典型CSS的语句:& r- Q& m$ |1 f8 _/ F- }
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} , s+ c( T1 o& {0 q H( Q8 c
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; : h) t9 g8 K- S, F
样式声明写在一对大括号"{}"中; 1 |" q7 S& Z6 [( g# U4 L
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
+ l) d5 r1 l5 K1 y0 V! G+ j, o"#FF0000"和"#FFFFFF"是属性的值(value)。
4 M1 x3 N) ?( N7 f
9 `! F0 j2 g) f2.颜色值
& B( C+ Y) h+ M/ c7 `( y* M9 I; O- Q$ e2 F7 w& h" b
颜色值可以用RGB值写,例如:8 J/ A, ~+ p) L0 n7 j& W
( B8 |. W+ J: b7 j& S
/ m3 P# z _3 r# j# I! s,也可以用十六进制写,就象上面例子
0 n; t5 p5 H$ o; y- Q) O9 U+ G8 X8 B; h! i u# \' M% b
0 c. _; K G& \! H) Y5 Z6 U: o
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
* p R' T+ j) C3 I( O3 f7 {# X" a) W( F3 A8 [( o
3.定义字体9 e% s2 l0 Z8 z
web标准推荐如下字体定义方法3 T+ W! e# q; i. Z7 H2 D) H. u
. A; m$ ], x2 mbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 2 W% \1 I; O" a+ g5 K% Q
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
) ` t5 X+ e) |) C$ S0 H* }; wLucida Grande字体适合Mac OS X;
8 e( @/ j; R* P+ m3 s& F! b; |! c0 f; y- IVerdana字体适合所有的Windows系统; 0 H+ r) g F0 k3 n' p; r* N
Lucida适合UNIX用户
+ v2 e/ E. C$ l3 |9 m& A7 Y/ x"宋体"适合中文简体用户;
! C# }! |7 W$ F6 D3 i如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
1 O3 |2 A7 R$ l3 a a0 Y. I; H; z% u$ `% k
4.群选择器
. q/ E" d/ d4 J! Z) U% f+ @: h# Z0 R5 ] L
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:* E& _. x5 O! r* j, Z/ w
' I! u7 ?* N# k' z6 `1 Y3 ^
p, td, li { font-size : 12px ; }
0 y2 i' G+ ^9 B/ z7 A8 t ~, F就是给li下面的子元素strong定义一个斜体不加粗的样式
" B- Q- n8 X a/ M% u' w
# _! E% s3 w. F6.id选择器% J! W+ x* V4 p4 o. c/ T
5 [3 ]+ f" \1 m0 ~0 ]# N! k
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
/ j: m7 _( C% W! O
% x% l% l: n2 s: R
% t) m/ Z" R' ?$ k5 s2 [然后在样式表里这样定义:
/ D! N! O; X _) \% a- i7 U# }' e9 W. C1 \8 {& G
l% f: i' |* _& v+ b# I# T @( F6 Q#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} , d: V8 c. ~6 G) L g
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。1 f8 l. ~7 N/ ^* @# @/ `/ T
9 r9 t S7 W$ O* \+ x8 S5 O7 uid选择器也同样支持派生,例如:
& ?1 _$ V: u3 z0 K2 V- {#menubar p { text-align : right; margin-top : 10px; } 7 o/ N; x0 p; C7 s- W
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
2 Z; [2 J# \* `& A7 p: G" H+ S* y3 m1 x3 x2 J4 k3 O
6.类别选择器
6 x& g. q' ~2 i) T! h3 |
* }" Z4 r2 j# B6 O在CSS里用一个点开头表示类别选择器定义,例如:
4 _0 a" Y! ?1 b* m.14px {color : #f60 ;font-size:14px ;} ; x" i1 l9 }; r; Z( g/ w0 a
: L7 l. U, x: V) E: v9 L
在页面中,用class="类别名"的方法调用:
- w. U$ ^# l" p4 ]) F! _! A, P<span class="14px">14px大小的字体</span> # @2 u' A; K2 i6 Z/ _! g" d& b
; ^ C: V2 P" g: P
这个方法比较简单灵活,可以随时根据页面需要新建和删除。- V g- c" |. x" \
7 C+ u# J+ l- L/ Y: l7.定义链接的样式6 f) e5 y0 t2 h$ p
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 ?( n) R% M% W* C P$ d5 `' fa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
# T; O# C ? o9 Y8 e0 A8 g/ Wa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}$ o$ B" ^( P! z; b' I: X ^7 U
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}3 g! n1 v2 o8 K+ o
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} # x1 {/ G$ y* i2 |! G" |" \: h4 n
6 N( Y6 @2 k7 g0 F
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|