|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。* q) K* z) N2 I( n2 \* I1 |/ \
3 p# B* Y' C6 g! a2 W1.基本语法规范* @6 l; ^+ K: u9 ?
分析一个典型CSS的语句:
- P( i! N' @# f9 f& G w4 V2 h9 Sp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
, F+ F) p1 k1 Z# J. S其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 4 m6 b4 D$ J2 N Q M0 F
样式声明写在一对大括号"{}"中; : Y E% { z2 e" s0 F; f7 y7 V: ~
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
/ @+ H" P3 }& ]3 ~"#FF0000"和"#FFFFFF"是属性的值(value)。( Z I, c5 P7 ]. j9 n; r& d
4 T, {: S/ w" H# G) L2.颜色值
( G u& s4 k; v$ q
& ~$ ~+ u! M$ ~" F0 s3 b1 Y' [1 ]颜色值可以用RGB值写,例如:
9 C5 a& d! @7 H; P3 g, R; j6 O, C) t) ~- z# m* ]8 f; {2 n- Z9 V, L8 I
7 l- [$ v1 N! _4 f% ~0 Y# d
,也可以用十六进制写,就象上面例子
# W# A( m7 m; T9 l$ y x6 N) |: I! H7 v! } J. W! I ^& k7 W
) Y1 T' l4 S9 U: X如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。+ m2 o; d+ n, S" t" y( T
% v2 r* W# s' ^3.定义字体" f8 U; _- I5 m# Y, b
web标准推荐如下字体定义方法% f* t% b$ N( A2 G& v1 y) d* j
" x4 O6 F* X7 t* `; fbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* P3 l5 r$ ]( s& {$ v: j字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - Q# O3 z! x$ u/ z
Lucida Grande字体适合Mac OS X;
; f. M4 |+ I( v/ ^Verdana字体适合所有的Windows系统; 0 y9 p/ t) h3 `8 ?; m5 N0 _" K
Lucida适合UNIX用户 - R) Z' r' g: d) b2 k& [6 A( ~! h
"宋体"适合中文简体用户;
- }; I9 K( h X7 _如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
2 E9 _0 v0 }. L1 f
% g4 l i! A& O- a% o; P4.群选择器4 b3 E* O1 R5 L) Y: m4 f7 \. N
* @6 b2 @* v% q6 V. d) C9 Z当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
U# a+ I2 Y& s1 i5 E" a& Y2 c% Q
: n1 Q7 [7 R2 p% R4 q! G! D H p, td, li { font-size : 12px ; } + c+ c7 }! w# u' Z% [6 @" |
就是给li下面的子元素strong定义一个斜体不加粗的样式6 J3 L. j+ j4 W; Z8 Y, B; x4 G
2 Q; E$ _1 X# T. O& w
6.id选择器
3 O' M7 D# e. |" p* T
/ W/ I) g+ }, E$ \用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 z8 V1 ?$ L Q/ s
9 f t! c0 O X' i0 Q* ~
9 E2 r, x- ]9 F7 F然后在样式表里这样定义:
" K0 G, g4 U8 n" I* O9 [: r
8 z' Z# `) n' |0 b3 }+ D1 H" u+ ]4 N! o$ t
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : F/ d- [$ c3 k
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。9 l R- N' E2 v: t
+ H2 y% L- |9 B. t* R4 lid选择器也同样支持派生,例如:4 \$ R5 o; Q9 V5 ?4 ?
#menubar p { text-align : right; margin-top : 10px; }
6 p& V- {) o- i1 I* i2 D2 c这个方法主要用来定义层和那些比较复杂,有多个派生的元素。* T4 S7 S9 O- z
6 u% o3 G$ [. f
6.类别选择器
* F; I" h/ T; Z( Q
& O# G0 S2 J* |/ G6 _% g在CSS里用一个点开头表示类别选择器定义,例如:6 I2 i W$ i# ^9 R+ m9 l! f& }2 m( Q8 f; o
.14px {color : #f60 ;font-size:14px ;} ( _5 t. k4 }3 p
& n" d+ h5 D5 u
在页面中,用class="类别名"的方法调用:
# o p' Q" M* ]4 [/ q; [<span class="14px">14px大小的字体</span> 7 @' i( K" x# _: x; x$ j# D
2 h# x4 F$ W. W4 ?5 A这个方法比较简单灵活,可以随时根据页面需要新建和删除。
4 ~9 U, G6 S$ h6 J' l3 j+ K4 W9 ^: M- Q
7.定义链接的样式' ~8 U' Y" W+ K x9 F2 q- U
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% f- |+ ^" B1 }
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}, \- t) U( j: L4 x& P
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
1 J1 R7 [8 q$ n/ Z( C: Ja:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
( l: I. S. C7 Da:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 8 s2 }2 P1 R1 u0 N& G0 E/ q
7 D7 N( Q( I* C6 f2 c# M- E) k8 J$ I以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|