|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
8 Q+ @5 F& P& y
5 U7 o' z) b' P. [0 ^1.基本语法规范1 B8 ?$ X! I7 A' y) n( z
分析一个典型CSS的语句:" v7 a6 T$ U" J; V
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} 7 Y t2 z+ D0 H
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
4 w3 T1 u. W. C$ A! Q; I" U9 H样式声明写在一对大括号"{}"中; ) L/ B0 I1 Z: S. f {; m1 J
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; - Z, Y/ _3 }# j$ [
"#FF0000"和"#FFFFFF"是属性的值(value)。
/ q. n% Z0 V- f% l1 Y' u6 `# W7 u
2.颜色值
; \% y4 ?/ L6 o
2 c' P8 ~3 T; _# ?: D颜色值可以用RGB值写,例如:
9 j; o( K- o& m, K8 m5 A4 E" M' X j! j c9 T
& p1 p: s# b, e$ J& S3 l
,也可以用十六进制写,就象上面例子
6 m7 R7 V) T3 B4 q v/ H5 e
2 a+ a. x# [3 _( ~5 r: K- F' k K4 w. |6 T
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
0 E! j3 N3 \: B6 @9 E
7 l$ h# ^' u1 L0 T% c7 g+ w3.定义字体( W$ m% y% ?! d: j
web标准推荐如下字体定义方法
N# B% [; s1 F. y& c
) t- g3 n9 a* ^6 \9 k: [body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" g6 j9 x5 R* P( C% M. \9 r) m/ z字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
- {1 O* e! `: H6 \Lucida Grande字体适合Mac OS X;
) C" I! m7 Z) ], z- R1 XVerdana字体适合所有的Windows系统;
% {% Y3 d3 C7 Y& U9 b- YLucida适合UNIX用户 : L X0 `( n$ \' y# u
"宋体"适合中文简体用户;
) G# a4 N7 p/ R( z0 E8 X& R如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
1 b8 n. H0 _2 W# o4 ~6 } }5 [5 U. K* k; X$ z" @7 P* ?/ ] z! J9 ^
4.群选择器 C' P4 @' D2 K' P$ ~
6 p1 Z$ r- C* a e, m当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 {( @9 j$ U# x6 D3 m; I
+ Z L; N( N. g* `3 G( I( O p, td, li { font-size : 12px ; } ! v, z+ F( S, m% p+ O
就是给li下面的子元素strong定义一个斜体不加粗的样式
# S( Z! J; V6 \
! e( x' X- p$ B0 e+ Q/ J6.id选择器
6 g e v$ H: Q. K( g4 X/ i
) e( w* ~' y( j. ^& s: I用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
4 E. F: }. A6 J9 N& h5 h$ C; f3 s: e6 ?
D q" V8 t7 e" W然后在样式表里这样定义:
) D- F- q" i2 X
" ~! y8 R8 k" O: q
$ P3 k& c7 B# m#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} * D% C: O; S$ s7 s o
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 m" T! \% z/ W. b8 b
5 X/ w% q) M/ yid选择器也同样支持派生,例如:2 [5 G7 }9 F+ ?6 d( |
#menubar p { text-align : right; margin-top : 10px; }
# [ o5 G8 h+ f. ?8 @% }# |这个方法主要用来定义层和那些比较复杂,有多个派生的元素。# ]9 x* n; {- @9 {" }
6 C) E# q, ~! }/ |6.类别选择器. ~4 U t- Y: {$ }5 n( W0 ~5 s
( |# e2 }2 x' {# q在CSS里用一个点开头表示类别选择器定义,例如:7 c$ B* q1 ^2 x- ?5 D
.14px {color : #f60 ;font-size:14px ;}
/ H6 h8 T/ ]; c0 M6 I* Y
7 r4 e0 |3 m( h7 |( w在页面中,用class="类别名"的方法调用:
/ v6 { |$ F5 W7 ?6 s2 X+ z<span class="14px">14px大小的字体</span>
4 M3 r- v( X6 s, g9 k( S* e, ]' d, x# q
这个方法比较简单灵活,可以随时根据页面需要新建和删除。$ V+ u, Q% q2 D' U* @* z
( Z9 G! p6 X7 \- ^- \
7.定义链接的样式
& H6 m! \7 X+ v! `$ ~4 mCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
0 d, `; p4 a4 x3 M1 a# Ia:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
8 L; Y0 V7 l% |( i) F/ F' Qa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
* A3 m5 v6 n: _a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}3 |2 A6 c( g: [
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 7 O* R' L2 j X. V& U. D7 P
% W8 z5 A$ z6 s. c以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|