|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1 {1 d4 |6 k' x; K2 M1 a1 L2 V0 y
* s/ L4 I( }' V( A3 j1.基本语法规范
9 L/ e. A/ w( i ?$ C分析一个典型CSS的语句:
" F9 j8 e. |. g6 [6 P! Op {COLOR:#FF0000;BACKGROUND:#FFFFFF}
+ F3 g9 |5 U" }( X3 M其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
1 _, ]9 _0 }( y( d6 @+ h" @样式声明写在一对大括号"{}"中; $ f$ c" w5 V7 n k/ w1 R( C
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
1 n, G4 |+ P/ u- { q: s"#FF0000"和"#FFFFFF"是属性的值(value)。
8 q, R1 j/ C, n8 ^: o8 e+ t! X
$ V. W- i2 P- q7 ]2.颜色值4 \2 y7 e( q1 [ I4 p8 Q, R
& L1 p7 @1 b' \ ?颜色值可以用RGB值写,例如:
! k. \" P2 [: w& P& _! D8 {: o2 I9 [
0 _, B$ [2 p6 P2 r1 m+ z,也可以用十六进制写,就象上面例子& M' {; j) \0 k1 |
; n3 ?1 O: N" Y) W+ j& o. ~
" x! p" ^, Y& U4 l如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。, p" f& U$ Q: ^+ W7 `6 h- {/ C) Z
* B, ?6 m% k4 e& U% \5 T, ~- F
3.定义字体. z' {6 @* i3 e
web标准推荐如下字体定义方法
- j1 U+ P9 u" A6 D; v+ n' D: Z* u- X+ ?& H6 H1 v$ ^4 c5 k
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
% H2 U1 z6 h6 v9 i' s4 o5 C; O字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
) T2 C$ l' N. y8 QLucida Grande字体适合Mac OS X;
; ~* w' z% }6 O, JVerdana字体适合所有的Windows系统; ! {* K( B2 ^7 W$ K/ Z+ k* {6 N
Lucida适合UNIX用户 4 g& p+ \, {/ [+ b
"宋体"适合中文简体用户; 0 b9 [/ Z; Z% c
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;" ~8 Z+ j# C- e# L* O+ @! q
+ J, Q R+ j, ^1 L1 s6 s, R( @
4.群选择器
9 t* D6 g; `: |- @, f$ f7 @8 h8 Y1 u. B8 y. q3 y
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
' O4 X' w/ _$ @/ U8 p- ^* k
6 o* y3 h! ~/ o2 i3 d- D$ F p, td, li { font-size : 12px ; }
5 H% c+ ~. C+ q+ w) T. z就是给li下面的子元素strong定义一个斜体不加粗的样式3 X% V' g( ?% \( N9 a' b0 A; e
% Y/ \1 } L2 S( B5 a( N6.id选择器8 X4 P: z4 R2 {; F7 R
- F2 b" w5 |, x' v2 ~& b6 @' [用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
# s4 b, A( u* u: D6 C5 D# J2 W0 D; N8 R- X$ ~: k
6 x1 D5 U, b( F( n0 w- c然后在样式表里这样定义:
6 Z/ e) w- I" F) m; |6 T
B+ b0 t5 w9 E7 E0 u8 ~% x. i& Q$ E/ b* P- {% m: b. V3 L5 N. t
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} + O5 C- g Q4 R3 l3 |
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
) y9 k6 w& i! A Z) U+ \% S9 O) x2 ?- m% F% O
id选择器也同样支持派生,例如:% o0 @$ ~; p3 e7 [9 i# T* i
#menubar p { text-align : right; margin-top : 10px; } * f) P8 K: @9 }8 W8 v: ]
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。9 k: f; F2 ?- ?4 `6 K' X
& K9 V$ F, D# n7 T: o' m6.类别选择器
" H' P% P r6 l5 o+ B- e
9 p$ s! X) U. j$ z. I' J在CSS里用一个点开头表示类别选择器定义,例如:% n4 A4 R( o- N2 Q) r
.14px {color : #f60 ;font-size:14px ;} 3 G' X& W6 K, r: \
' e8 y) I% v' }0 }4 W4 k
在页面中,用class="类别名"的方法调用:
" N" N. J- O4 C& g3 S. O" @. H0 i( l! j<span class="14px">14px大小的字体</span> 4 U" t) x9 a" i. G5 E' e0 M
6 I" n% A) G; S* `8 v; R4 x
这个方法比较简单灵活,可以随时根据页面需要新建和删除。# `6 r8 ~* s# C& k/ V7 u3 K, q q: ~
) U! t- D( I8 r' o: I* H7.定义链接的样式
; V7 D, h D7 n3 H2 Q8 @/ UCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
# n! b) ^- i! I7 z1 u1 aa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 R! ] x) k9 u2 k( z- o/ ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}9 h/ u" r- I8 E _6 g) N
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 }6 t j% R, u) C/ L
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ( g" J+ e$ G; U. b8 j3 B. c
$ N$ P* e8 i0 H' N( g/ m2 r7 V$ p# N
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|