|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。3 l# d# ]. c# P
6 s& f2 s8 J0 \! F e m4 ]$ j
1.基本语法规范
4 J% k0 o% a4 S0 o分析一个典型CSS的语句:* Q; l& A: ]- G4 B- C! @% p; p8 C
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} & A& U; o' B% I
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! C0 `$ \7 C, W1 I' ?
样式声明写在一对大括号"{}"中; 8 X! F/ t7 E0 v! X5 u5 T4 l
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
$ Q# n. ?: k2 J5 s"#FF0000"和"#FFFFFF"是属性的值(value)。
8 W+ U) k( _2 O! A3 ]0 D( L. B! K' h5 g0 j( ^8 S7 ?
2.颜色值 P" E* j$ U5 N' I
( H% q2 k; y9 B1 P; ]! z颜色值可以用RGB值写,例如:" V4 z) x/ Q" Y
9 x8 G& ?! E- e2 N3 s& G3 l) J" C! Y
,也可以用十六进制写,就象上面例子$ m9 [0 j8 C. l
; Z5 L O M2 @8 [4 ?3 c' ? X" H/ T/ u0 [* @ I
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
# M5 G2 H1 }! H( R5 e* r0 f) N$ J, W) p' K- }5 m S
3.定义字体2 ~8 x6 s# k; P
web标准推荐如下字体定义方法& R+ j6 K% c5 R" H) [
4 A! H! U" H. R' e2 K
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
' W, x7 U3 k# W字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
1 e- T0 D8 q- z! p1 `- pLucida Grande字体适合Mac OS X; - j# G3 Q3 v! G4 {1 F
Verdana字体适合所有的Windows系统; * ]4 i; O6 [2 u5 J, ^3 ?8 c
Lucida适合UNIX用户 " K) ?$ S7 W. _, y9 z8 K& ^ t
"宋体"适合中文简体用户; - w( d: _; U6 I: d1 _9 n
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;+ Z, K6 j' b1 B8 w) R
! l% M4 w2 I* O8 c$ \6 j8 q4.群选择器. e; |- B+ `2 J/ R# I
+ g/ Z- w/ a! V; f; S. q6 P
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
x1 k4 ~- z4 ]
* l& I, S$ B/ w5 U# N9 E p, td, li { font-size : 12px ; }
% x4 k* ~' S9 x4 m就是给li下面的子元素strong定义一个斜体不加粗的样式
3 {. H- W8 i# h. z9 D, i% H# x% e! x
6.id选择器
6 t3 K3 P* N6 \. p$ B. U. I. t8 E! Y" R/ U7 g7 S/ B4 ~1 p( P
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层/ z! n$ z J# I+ U( l* h
# u3 @, E1 C+ V( m3 }2 ~6 v, C
, k# Q- ]2 ]( c& h
然后在样式表里这样定义:
/ |' N3 d2 p5 R, U
- N* ]8 L. G) Z8 Q& R: P2 Z
# j# j8 y0 I+ |: n9 U. v6 a#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
" w& w. U1 J" W其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' e' H9 k1 w5 d* o0 X
: X$ ~, d% t% X1 u6 m# Vid选择器也同样支持派生,例如:
7 D' z* l& E& J#menubar p { text-align : right; margin-top : 10px; } 4 D9 I: J! T9 y3 b6 W _* D
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。# k7 x5 b. d& }! o
8 [$ W; k1 W9 Z1 N% a0 {. [
6.类别选择器
% M2 Q- d+ z1 ~% [& C: V. s% r4 w2 w
在CSS里用一个点开头表示类别选择器定义,例如:
/ V- o- x' z! _3 `# B7 j.14px {color : #f60 ;font-size:14px ;}
- ~6 Q* ?2 @# S4 ]. A
6 ]& R: ^) {. `在页面中,用class="类别名"的方法调用:
7 N$ d8 v4 ?9 L1 k$ P# x<span class="14px">14px大小的字体</span>
/ ~- n: e& j4 I8 @: x- p; k6 b- e0 H6 P6 F+ N8 I6 i
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
3 R! |3 C" i6 }" A
Z' S: |. k( i& V7.定义链接的样式1 Q# Q2 J \5 z2 b9 L1 [
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
; H+ A* Z0 V6 j9 H, Ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
7 y/ H+ R. C. A; \3 wa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! D/ Q9 I1 x% Ua:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# g- y, l ^: z9 X
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 5 A X5 {' v. a( m& H5 ^
1 P2 W8 {% Z+ O# T以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|