|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
. k, `: }6 h1 \# k0 X0 |' \6 H& V4 f" X- Y" f/ L
1.基本语法规范9 o n6 W8 n6 a: g& z0 t/ P
分析一个典型CSS的语句:
, [" x6 a! T* Tp {COLOR:#FF0000;BACKGROUND:#FFFFFF} ( _6 g! q1 h8 T3 }4 k+ b1 t
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! J" J& J T1 L$ M; @! c' f" U! l, C
样式声明写在一对大括号"{}"中;
5 ]+ p* p2 n0 j2 X& a1 jCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
$ x7 ~' S" l$ }3 j5 _% ?/ d"#FF0000"和"#FFFFFF"是属性的值(value)。& R. O( o6 Q& @- k
9 ~( [; k$ |6 @6 m/ {2.颜色值
5 y: @7 T4 ^! h5 G9 E& Z1 K
T0 |. Q/ b; L颜色值可以用RGB值写,例如:& Q" l7 y* Z5 C7 a+ N) X3 m! _
. J+ r5 T5 P* P4 [& g: }
" e4 Y$ H* l3 a,也可以用十六进制写,就象上面例子1 T' w# _. g' c) L+ ]/ P
9 T' D" Z! s& v. V8 ?- P
3 B4 x$ M* Z4 ^0 L如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。) u1 H/ u- q0 k8 R' i# W
( h8 w' b# q3 n3.定义字体: c- x( M! F) ^. C/ {
web标准推荐如下字体定义方法
3 p, O$ e! h9 g- k! W% K- f
C4 L* L# G8 f- x& m% hbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
5 L/ N) |+ p7 L" S$ i S字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 3 h$ W* `0 a9 _9 @. ^2 S4 F
Lucida Grande字体适合Mac OS X;
% n9 L- t- O% @- E8 ]Verdana字体适合所有的Windows系统; ; S! S* P3 h1 }. x- i
Lucida适合UNIX用户 9 a( r# t2 @& W z- L1 q1 R
"宋体"适合中文简体用户;
5 h/ \# ?- T: N! T% r如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
/ w) s' U/ ^6 a
, P* V5 ^+ U* a4.群选择器
( q& C+ P8 I w5 t" E5 i$ F5 ]! n5 j- R
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:8 G* l- D" U8 A) o7 Y
/ T$ e+ z! a; h: e/ L z9 q
p, td, li { font-size : 12px ; }
7 J' j/ \2 o2 t% {就是给li下面的子元素strong定义一个斜体不加粗的样式* o9 x; X8 B$ W: K }2 K1 ?2 j
) Z6 p2 E( ]" t' S6.id选择器
! h9 R8 n1 [ n
, r% e$ @, f# B' G8 x, F. N用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
2 D1 l: T: M Z$ t% y
0 E0 u9 _% r5 T" g
8 \, f; J, m' H( R- _然后在样式表里这样定义:1 S; i1 f8 T, c) [
# w$ I- z! j5 ]4 n/ C% q5 h) D; I4 s8 ]
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} # Y7 F. z: |, M
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。& N! M4 m; B% k0 t
. M1 T9 r3 g8 V$ r/ O9 Y
id选择器也同样支持派生,例如:
* H* S3 F$ @4 l; h#menubar p { text-align : right; margin-top : 10px; } 9 a/ g+ @" l6 t: b4 i
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
! C: W' J$ r1 q6 p. ^" H6 K8 {; |1 }
& f! S9 T, e/ Q. ^- c6.类别选择器: O! m* V) }0 R$ Z0 g. ?
& ^! ?* |7 H: M% M( ]. t3 Q3 D% u在CSS里用一个点开头表示类别选择器定义,例如:
6 D; O$ x1 q$ \+ O# {3 b: O.14px {color : #f60 ;font-size:14px ;} 3 O& G4 f5 F o6 S) j; ^: f
, B1 i& s+ T$ X5 z; h0 f3 m8 B在页面中,用class="类别名"的方法调用:
5 g% m8 u0 |) _2 F4 H7 }<span class="14px">14px大小的字体</span>
0 [, Q) A' z0 l; [0 D! f
. u' |# e% X: I4 e5 n这个方法比较简单灵活,可以随时根据页面需要新建和删除。% z) `4 l/ S# o6 g6 D! u
) t: O0 j+ A0 f0 A; F/ _6 n8 l
7.定义链接的样式2 P3 S0 v2 l: I }2 z4 x* h
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:* D& w/ R* I; I+ b* j% y; s
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}7 y1 `: R0 ~ {# A6 o' y
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}& x" s6 ]" o: i0 T$ D* F
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
, h v3 r1 L# c* I% u. D' La:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
4 b, Z+ _: K$ H! z6 e# n# O
* M+ S: F3 E K以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|