|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; t. F. x" l6 H, L- v
* u0 P# z1 D7 M# m, [5 h
1.基本语法规范
; O( J8 o# n) ?8 y, o分析一个典型CSS的语句:
5 g B$ @ x9 y( bp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' r2 l( _ I7 G" S其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
: q; i0 I1 e: B! \& m% H K2 l样式声明写在一对大括号"{}"中; ; \$ G7 r1 B* T
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; # b( s6 F! _: G, ?( g
"#FF0000"和"#FFFFFF"是属性的值(value)。
$ @! f- ?7 M3 g+ x+ n+ Y% p. ?' k( I" P- e; q" v4 _
2.颜色值* V) i/ P( I* ]1 Y
0 N K; P/ T% i
颜色值可以用RGB值写,例如:: d, L- _& s E5 T9 C* L
+ _% R# v1 y' @" Y1 F
$ S8 ?& ~) L u. O7 K,也可以用十六进制写,就象上面例子' q7 j: r: \: h) c
, a9 k" F& J R6 ^. ]
( h' J8 C9 y- e. E
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。1 I( N N2 E5 u+ h6 k {) w
& U7 a# y" x2 z0 w1 g+ n
3.定义字体# K: N: N# t) B {0 h# F
web标准推荐如下字体定义方法
. Q7 m: C2 w, t3 f. b: v' {3 X% |: r1 M, z4 \4 `( O
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
2 z& S' C7 _ w& f' d' x. c字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
9 Z& Y6 P2 I2 CLucida Grande字体适合Mac OS X; & y+ u( A$ Q6 U; n/ S
Verdana字体适合所有的Windows系统; [; }' s. [0 Y2 ]; N" E( r" s3 y5 R
Lucida适合UNIX用户
" ~( J8 f' C4 o7 b% t# @! @"宋体"适合中文简体用户;
1 P. I- [; H" ? r- e3 p如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;/ l* Z3 y2 i. q9 ]
1 ~3 e0 L h+ S- i/ z2 _9 A4.群选择器
: Y) v; J" e2 k2 z, {1 \
, p; \: Q T6 q8 P, N0 C5 I& X当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
1 {- |0 c8 s2 g" ?( c- q- {# e; H6 h( D* M
5 j, i8 w; {8 u; p0 p: m, P$ v7 G p, td, li { font-size : 12px ; }
1 g4 e. Z! O. D' u4 d3 W9 _就是给li下面的子元素strong定义一个斜体不加粗的样式( r( g3 `- S: s& C; q
J; B/ m: l! ~9 x: b$ p
6.id选择器, N e7 o M0 O
- a6 J' [- w0 l用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
! \7 l4 i% J1 Y; j! B: X: L2 `- ^5 A
/ S5 Y3 t- L) O, Q( Z! R; Y/ x然后在样式表里这样定义:8 u4 @" r1 k- e% ]7 l2 h1 c
7 c$ y1 E8 J' A! e# w p4 i8 ]- w% R
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 d, a% ~6 q+ k$ c+ H其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
! P# z$ s5 s% k, u) A2 |9 G5 Z/ p5 A9 m* a! n% O+ J4 G
id选择器也同样支持派生,例如:" a; v% G7 H* {# j) I
#menubar p { text-align : right; margin-top : 10px; } : B' A# J! w4 S, E4 S/ q
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。 o: h U s* e2 m% ^. Z/ ~- ^
( y1 R" L) E9 E v7 r% j& l" e1 D4 }6.类别选择器 B1 X2 g( g9 h% Y
, n, H% @5 A/ @( x9 P& S在CSS里用一个点开头表示类别选择器定义,例如:
" C+ X; l/ L4 C2 j8 i- W.14px {color : #f60 ;font-size:14px ;}
8 `2 b1 Y4 E6 z8 l( h: \1 b5 ]5 l- m2 b7 I0 G0 p" }2 Y
在页面中,用class="类别名"的方法调用:
, X+ r4 U1 k* t" A<span class="14px">14px大小的字体</span>
# e, f( \" M; G7 q1 [
b6 Y4 U! r1 U这个方法比较简单灵活,可以随时根据页面需要新建和删除。
0 B+ t4 m- B# V8 s" \# Z# P) X5 b2 ?' |' }$ x
7.定义链接的样式9 E# x. P$ f* Y' t6 H9 m1 [( ?% e# x2 m
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
0 z: O3 b6 p" {; C! o6 y- u+ b* xa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
+ h( P" g5 ?, P" L! a/ Za:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! ]- _: t o8 L: Ia:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 D6 Y) q( ?: `3 d! H% e b: A2 @' _
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. r% E1 x2 T1 f1 V0 ?- g8 \. v/ H9 R) o7 `7 c
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|