|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
/ j9 j4 B. t; E
% @" g" m P4 U4 @! N5 A) [2 Y1.基本语法规范/ g6 c/ X* v; L4 w4 m. X
分析一个典型CSS的语句:6 c1 L" [6 L4 R
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} % d' A* |+ Z( B+ v0 f
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
4 z8 z3 p5 @4 a/ a& C, r/ G [! O) ?2 w样式声明写在一对大括号"{}"中;
K% c; d, F" FCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; % L/ H+ q* |, ~2 \
"#FF0000"和"#FFFFFF"是属性的值(value)。
$ c/ `3 o. `3 L% X: N* |% c- Q$ c
/ x2 ?! D9 _3 B; e! _3 _% @" u2.颜色值- Q6 | W! w4 ?
* O/ ~; A7 W7 `0 h9 O
颜色值可以用RGB值写,例如:; c3 }: j/ B0 S( F9 L
+ }5 L; z* P8 r# W* _/ ^5 j0 D" e; H, d3 {5 ~% O( R) _
,也可以用十六进制写,就象上面例子( E% n" T, p) S
% B' d; r4 ?2 g# P% S+ b: `: x6 {! h. `/ `7 w/ t
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。) M$ @; Y, {* E$ a3 @2 r
% a. n, i9 F" Z% h/ R1 K8 V
3.定义字体& U6 q4 d2 T; a! ]% |2 M
web标准推荐如下字体定义方法) d) ?9 \, J- R' @$ c9 v
H8 y6 D% j. X7 W$ |. Ebody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 1 Q! o* z+ P6 O3 Z6 r
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 5 r( Y& l: T# M& D( S2 V" L1 j
Lucida Grande字体适合Mac OS X;
2 y; u& i0 E$ k' p6 L8 C1 B$ _Verdana字体适合所有的Windows系统;
/ g1 ~, K5 x& A f$ KLucida适合UNIX用户
. Q2 \- a C2 S/ Z6 Z"宋体"适合中文简体用户; - y- g1 |/ }( b# L1 C* M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
4 U( q. S4 f7 p8 e
$ V# w- L( h* o( F1 X9 r4.群选择器
( R. R. {& I1 |% x) [% t' O6 D8 r& B6 I$ q: U4 b! G' E( M H
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
7 Z) _3 o+ T& G, Z' o1 M7 D W& Y6 x
p, td, li { font-size : 12px ; } ) C! K8 x# ?. ?
就是给li下面的子元素strong定义一个斜体不加粗的样式- v- |! B9 o J# V
* {. t# u# p- }3 b
6.id选择器
- D2 y& ^6 G5 ^/ ^: ~
/ R3 Q; n. n0 D; I" J K用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层7 ?: K+ S# u3 m) M3 o* }; O5 a
3 N8 e1 F* M* j. {; S+ `4 T! K
- a5 r& ~: t- H- l6 d然后在样式表里这样定义:
; w% |& j( |+ E" i7 ?9 v% t& s9 N: E4 B" ~2 v V' Z" s4 _
% M) P- L, r1 m! Z7 J#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 4 ?: p7 U- k0 W: f3 g" e2 |
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# \7 v% y, \8 @ c" s' \1 a
1 O3 a7 }! ?9 i! Q9 ]) r
id选择器也同样支持派生,例如:
/ w' v- @* g' j# W! a#menubar p { text-align : right; margin-top : 10px; } A+ q( c+ Z2 W# z5 ~, I* e3 d
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
: b9 E" z& l7 G3 s: U0 A3 h( {2 K& V/ [; ^! I
6.类别选择器; ^) L# Y$ t) V* p& J8 r
# o3 s U! [( q5 s& a1 m
在CSS里用一个点开头表示类别选择器定义,例如:6 T* G; {' { E3 b; r7 P- ^5 j5 v! R
.14px {color : #f60 ;font-size:14px ;}
, [& c# k( n4 q. F& ]8 E* F2 r4 W# l( W% Y3 _6 D
在页面中,用class="类别名"的方法调用:
+ ]3 X( T( O9 g( j4 O<span class="14px">14px大小的字体</span>
8 N+ t4 [* J4 w$ O( g/ h* b1 k
- C" a7 ]2 ?+ z" q! t7 T这个方法比较简单灵活,可以随时根据页面需要新建和删除。
/ B. B- b: K4 Q2 I
. {, y, Q* s9 Q* i2 S+ i7.定义链接的样式
|8 }4 V( o7 N+ I. WCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
2 M* Z; L3 I6 D0 D9 A$ `. oa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 c) F; D0 I! }" T3 Ta:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
' m! _1 ]0 X" A1 K" Na:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
: W9 p8 g/ \' r0 v& y; \: ]- Ya:active {font-weight : bold ;text-decoration : none ;color : #90 ;} + z/ P6 R. m+ j( H
; H, H" t" K5 A" w- C' e
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|