|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
- L9 c; l. O+ S/ v; W7 w0 `0 l2 m4 H! ?8 }5 H
1.基本语法规范( J! I# D( R, M4 `7 W" S" j
分析一个典型CSS的语句:
, E0 U$ a& G$ z3 Y! |p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& l# d. Y( g; b( M/ y, v其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
' v" M; {( j1 y" s# j! u2 i$ o样式声明写在一对大括号"{}"中;
. N' Y1 l, m1 P0 rCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
5 {. H/ ?5 N4 x8 {"#FF0000"和"#FFFFFF"是属性的值(value)。8 W0 S! k7 A% J9 h8 a
5 |+ @2 h( p0 W) e. a( Z2.颜色值+ ~6 S! }) y6 C7 s
4 i* `& f2 `+ ]$ I$ c颜色值可以用RGB值写,例如:
6 [1 s) B0 _* v9 l6 P/ I0 H" Q
- u; ], K$ X& B5 y' V0 K
' W" n8 w5 `" v1 b$ ?,也可以用十六进制写,就象上面例子
0 f" s, C8 I! H* {$ k
. {) X& h- M3 O! E+ M9 F% W8 d3 M8 J. T$ h! J4 _5 ~1 a7 O3 b
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
; r4 ?: z5 k) S" s" Z8 ?9 H& Q, D" W9 {3 E6 o7 e
3.定义字体
8 e6 p8 I0 ~ S# H2 ]8 nweb标准推荐如下字体定义方法+ U: {; L* }$ i9 a
/ M3 P# U4 i: ?body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ! {( y. r: m7 ~. _+ q9 D
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ( [* {3 X4 Q# x! _
Lucida Grande字体适合Mac OS X;
2 x* q7 |9 t' k4 P# fVerdana字体适合所有的Windows系统; & z& z1 k R9 u6 j$ T
Lucida适合UNIX用户 4 @* |$ X% n( o$ N1 _8 k
"宋体"适合中文简体用户;
( S: }- L7 _$ B! W如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
9 ?0 M/ J; o6 X0 A
5 s* L6 J7 U) D/ N y1 w% O4.群选择器2 O2 X' k' F/ a( T) i
0 _. I* K+ h" X4 m( C! n: k' @
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
6 H1 \+ g L& Y, Y$ L( Z0 t/ t& @* ~6 w+ K6 L E7 b" s" l
p, td, li { font-size : 12px ; }
: P# d' x0 n. U8 U# F* h就是给li下面的子元素strong定义一个斜体不加粗的样式
7 r' n2 `" T- z8 c4 {; M, S; c( N" ~5 P( [. F
6.id选择器6 j* ]9 z6 D7 b" }
1 p7 J, U" Z8 `( @2 G9 O用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ p8 C1 o( Q0 F/ c
0 M! N( z6 c; w8 ~. l1 X! x9 x
; M2 i$ s, [$ W* s# y. n然后在样式表里这样定义:; [7 C! I; `$ m) z
/ A$ U8 A3 J! J3 C+ ?* u& M$ J+ b A7 c8 y: I* R; {
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( n1 t# Y N/ H3 M. h其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 z0 O. y$ b, ~$ D8 G8 o6 f& J
& o' T6 C+ r$ h6 g
id选择器也同样支持派生,例如:/ w: }, B( m& k4 N4 F! B. h& v
#menubar p { text-align : right; margin-top : 10px; }
% P& N& }& {1 {: t; }+ e这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
?& |* }! l4 { [
% _7 G5 U8 M5 f I- s# `6.类别选择器7 I1 v0 b4 u, Y* H! z
1 P* f& I1 V! C) O在CSS里用一个点开头表示类别选择器定义,例如:, e7 R# s+ t V2 K8 w$ m
.14px {color : #f60 ;font-size:14px ;}
9 V$ J, D5 G( F: v, k' X7 b5 ?: k5 d$ d
在页面中,用class="类别名"的方法调用:
% r/ O( f2 p$ u6 u2 u7 v5 V<span class="14px">14px大小的字体</span>
0 U1 b& O' Y) w! A# M3 _: X$ b# z( Z% V1 E- ^% d0 U! Z
这个方法比较简单灵活,可以随时根据页面需要新建和删除。* Y! ^; p4 H% a" D" c: l
% {- h8 Q* ~! |* p. ^% o4 U
7.定义链接的样式
+ J$ y& k" y- { D9 JCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
3 u, U4 p. Z4 [& x: G. L. Ua:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
/ D; X6 ?) M+ l$ Xa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
5 p% R: F9 g& {6 e( Ma:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
- M) A, l# Z0 a2 a; @% W5 ~2 ~! ?a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 9 H- [9 l5 {: `4 t' c" W' R4 l1 ?2 T
/ _! m$ {& O: E+ G' y( t/ Q
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|