|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。( ?0 l7 r3 `2 D( d( j. S+ x% @
+ }' x2 O s# x3 ?5 ?
1.基本语法规范
; q }1 A8 k X$ r$ V5 ^分析一个典型CSS的语句:
( r$ ?- S6 p% tp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 4 O2 {7 P: m' {2 f9 B. w7 | d
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
3 O# T( K# w$ c0 X4 m样式声明写在一对大括号"{}"中;
3 I9 f5 `1 U& J7 HCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; . y/ Y8 H( f3 l, R. ^
"#FF0000"和"#FFFFFF"是属性的值(value)。
J: ?+ u7 M! X" s; }6 C) }
; f1 o1 w# S/ ?' K: O" }/ u ]3 ^7 R2.颜色值5 i" S& r, y( P& r/ k
, c/ `' s3 @/ Q% ?# k9 I) t
颜色值可以用RGB值写,例如:
# s: E/ j5 w$ N' u4 K. k) J
9 I8 }( a: U0 U1 [: j/ j. Y; M. v% n) z5 u+ g' W( g) m
,也可以用十六进制写,就象上面例子% z+ n" g3 A! `; L
; s/ U' j! O9 W, a, s. A$ L
' b( A0 K. z* k S如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
0 V: ^# M4 r/ P$ ]
z( |* I/ p0 @0 ~( {/ ~, U$ U3.定义字体
$ c% \. N. H4 O$ Pweb标准推荐如下字体定义方法1 D1 C- t, b% B
- `+ e, h: d; \body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } + c- }2 M5 k9 ` K! H# }; x, ?
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
( W/ u* e3 Y& b# bLucida Grande字体适合Mac OS X;
" g! F# K. Z/ T, N/ D; R3 fVerdana字体适合所有的Windows系统; _' I/ X; K9 }" F3 i K
Lucida适合UNIX用户 9 y9 N% S; k) b/ w
"宋体"适合中文简体用户;
9 a% }( v" n4 f( [2 F6 T, L0 p! A如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: E- o; u& `5 ?* Q$ R
: [) g" {) G& t7 a, t5 R# ]1 w! z* s1 l4.群选择器
5 ]3 h# @, c! [0 \. H; ~
8 E, z3 a( k* j1 s* Q5 o3 `# K9 T4 W当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 P0 o6 W1 @, E, `! C* o9 s5 b* @7 R# D7 f2 }
p, td, li { font-size : 12px ; }
- a1 I' A" F3 {1 B) K9 g就是给li下面的子元素strong定义一个斜体不加粗的样式
?# ?3 u' R! f/ Z! a- G4 v
6 y& Z+ o8 l+ Q- I5 ~6.id选择器
_. ?% h4 q9 ~# U D6 b5 s6 f; i# i& ~* O% E6 _
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
/ I9 M3 R g9 A) Q2 y5 M8 e! R% X$ e. d0 S
# s B! P' I4 P1 H2 z9 f然后在样式表里这样定义:! ~; l3 A; Y, I" L& F
! @9 M; x$ W" V: t5 F! z" c
! c9 t6 c7 H/ Y% {
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} # L2 M2 q" {/ N4 m" B+ J" u
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。( n3 Y4 y$ o" [& l
; S H/ k7 U% i
id选择器也同样支持派生,例如:. s N. H- C% B+ v$ L0 S( h
#menubar p { text-align : right; margin-top : 10px; } / P K8 @ P) O2 g
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
( z5 A0 N/ \/ r" Y- B) O! E& T: c4 l6 z& O6 V& x
6.类别选择器# n( x* i1 ^5 U, ] o) K) O
. I* ^! Z9 j9 r( s# X
在CSS里用一个点开头表示类别选择器定义,例如:4 F" a6 d t8 n0 q4 I
.14px {color : #f60 ;font-size:14px ;} 0 w, ?9 g5 W& u+ A
- W- ], a7 ~+ L2 ?- ]3 C在页面中,用class="类别名"的方法调用:& [) w4 K9 K( Z. M2 w _. B
<span class="14px">14px大小的字体</span> ; ]& [: D) v+ p. F2 K; g, Y
+ Q8 ~; X; V0 e! b f a/ A! q v* v这个方法比较简单灵活,可以随时根据页面需要新建和删除。% Q; z7 w9 O1 [' J0 j1 Z9 E
+ h% r& U! C4 l1 s+ s
7.定义链接的样式. v% G( o/ Q& f
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
2 J1 J6 c1 e0 S- i% O* b# S C1 |a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} c( K* o. Q2 v4 y2 W
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
5 ~/ j0 A2 e! u- M, Y! q. Na:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}9 m; |" }& F8 Y9 b; z- |. w1 v
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
0 r7 F; r4 {" l' C( J
r" ^! g$ m* {6 v1 s以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|