|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。" }' @3 B I; [# g" x
+ W }; |7 i2 G/ f, p$ |. U1.基本语法规范 }* {; Q: v0 ?- `9 ]+ k
分析一个典型CSS的语句:3 t/ U& F* \! \/ l1 t( `$ P) l( D* H
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} / G" F. g; l* U, f+ C
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
$ i' \) O4 W5 G l8 B$ F# R样式声明写在一对大括号"{}"中; % s5 H) b6 J: y2 b
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 H' w( T+ \+ X
"#FF0000"和"#FFFFFF"是属性的值(value)。; e6 C, |3 x% h) L2 N% _- u
' ?# B% l0 [# B2 C/ {$ Q. y2.颜色值' N4 t6 S/ R) Y. _7 K/ f
! ` G, g& D+ }" T' c
颜色值可以用RGB值写,例如:; x! w$ ~4 ?. |0 X+ N
$ y" \; l$ Z8 _: F) ]
, U. `7 y; m6 W v,也可以用十六进制写,就象上面例子
. t% F5 L6 p5 d' A
! ]& ^7 Q% M0 c" @9 @- q
# I# [, I7 b* W Q如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。5 W, G1 r. l2 M! y+ O
$ p4 D% I; W8 |* `3 J" S* X3.定义字体
/ P7 W% M6 t% X6 T. cweb标准推荐如下字体定义方法
6 y: D+ t* e. M) v# R) N- R. L+ h- _* c3 F
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 0 K; b7 W; ?! r% [
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; & B5 d6 L# X) j9 Z% x" l; O. `
Lucida Grande字体适合Mac OS X; ! X. P' \+ O" o0 x
Verdana字体适合所有的Windows系统; ; t; K3 d4 n+ A% D- d# P, ~
Lucida适合UNIX用户
# M0 g* l% e3 ^3 D o"宋体"适合中文简体用户; 4 Z* Z) D' j, i- y" A5 c
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
% E" q( P/ K. s. [+ T1 O, ]4 o/ e4 w9 s
4.群选择器
& W5 X+ P2 K* J! u+ V2 d( N+ q4 I) J8 O3 T# y$ y+ f$ x- F" z
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:2 f# E" e: ^* C% T, ^: f
" |, H6 {& n2 E$ j3 i
p, td, li { font-size : 12px ; } + p( i+ N, G% ]8 S
就是给li下面的子元素strong定义一个斜体不加粗的样式
/ [9 E, H2 Z6 [' T" Z' Y I+ k9 m8 j* Q7 d
6.id选择器' n4 R- N- ]8 c6 A3 G4 @2 m3 x
3 n$ `: O0 z# {用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层- i! u/ E2 k) M4 I- c5 {! |8 E+ k0 }; S
6 ]- ^1 r" s: N: C+ c b& z8 f/ p6 u
然后在样式表里这样定义:
$ m: v& x r5 u; ^" d5 B1 E
& F: O/ D" T+ N; E7 M( \
1 {3 f2 } h9 M9 D$ f4 H#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
1 g3 A1 _* }2 e* ~$ k, T6 E' b+ h其中"menubar"是你自己定义的id名称。注意在前面加"#"号。6 s8 L; O0 t' b1 I4 L2 \
* V/ l' K, ]; p: D& a) q0 wid选择器也同样支持派生,例如:$ b, e) A/ f7 {( x: ?9 E
#menubar p { text-align : right; margin-top : 10px; } - u0 W" Y: X8 l' A0 |+ t% W
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。+ M; a+ h& U3 X. j" Z
0 G7 V/ U! K4 i$ v8 u6.类别选择器- w% ~" j# |9 k* y/ q
+ ]% y3 L8 y3 B+ _3 v在CSS里用一个点开头表示类别选择器定义,例如:4 A9 J( l0 j3 y( T2 ~- f
.14px {color : #f60 ;font-size:14px ;} 2 d: z! v: V. C2 e7 l4 s' O
# Q; V; i! ~2 A. a; @
在页面中,用class="类别名"的方法调用:
' @; V2 \6 M6 [( `4 [<span class="14px">14px大小的字体</span> + }9 j( U# \& Z8 G e+ Q
, k% d/ p3 e7 `& r这个方法比较简单灵活,可以随时根据页面需要新建和删除。
, _8 ~+ m: @) J5 t% v" ]1 w6 ]+ R. ?8 v, `# a# A8 W
7.定义链接的样式
8 j+ T; c$ t+ {! ?CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
- P) H) K) u |, h5 _a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}0 b& ~/ {7 o. J# A [! F7 ~
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
3 u6 Q5 |& t. _: x; i4 s( G$ m/ aa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}6 P0 ?- o; N2 h c) k
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 2 R* B% z) Y+ d2 u/ M4 y: ?
/ [. X( B2 g) a3 r
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|