|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
1 j# Y, P5 A; c) v8 D' s) Z
/ w8 i: B' n, K9 x0 ] P1.基本语法规范
3 K9 I+ a" L" V) l7 w2 O7 A `分析一个典型CSS的语句:
' U! M6 d- r- O4 _0 }& Ep {COLOR:#FF0000;BACKGROUND:#FFFFFF} ( ^! d& k) D, W# F# u7 X
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 2 H% C( g6 p# [2 s
样式声明写在一对大括号"{}"中; 9 |! G: Z& ~( x5 C! p& K' h
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 O4 C3 C2 L2 U& ]7 m9 c7 H
"#FF0000"和"#FFFFFF"是属性的值(value)。" _6 @/ \2 @& }. }$ e8 w5 [' p7 u
6 {8 z) r; i! @: ]" K( t/ z7 Y
2.颜色值
; [3 H, ^% f4 D! v8 p7 l( ]
u f3 g5 z+ H1 |$ m% r: ]* h3 B颜色值可以用RGB值写,例如:
" H* S( H" k c9 G4 f5 ^2 T/ p
5 ?# f6 Q, D- U7 c' X$ h) `+ X,也可以用十六进制写,就象上面例子
3 \3 U( o O8 Y! N4 E
2 @7 \, V' `4 I( O, }
- M" q" j, ~ t如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。$ }7 @# Y7 ?" q7 w! W3 ?' D5 k$ J
& L& V$ e5 |! L
3.定义字体7 x0 K2 j( L7 l$ ~( s6 m
web标准推荐如下字体定义方法2 j c- b) Q. K+ M, y) O8 p. X
# W; J) I& K5 e! }. w. dbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
2 r' e' z4 M- l字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
9 i7 I/ b1 V; CLucida Grande字体适合Mac OS X; ) r6 g/ N3 M% I0 J
Verdana字体适合所有的Windows系统; 4 E6 y7 u# Z) j% k
Lucida适合UNIX用户 & f' {2 d3 w6 N
"宋体"适合中文简体用户; ) ?- w" R) ~) z: A5 u+ l4 J& a' v- V/ c
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
5 D3 B. y4 d4 l1 r @. @4 e6 C W
' p) i# h. R- j' I4.群选择器3 o* Q6 k' O5 u( R
. a. n8 p+ y9 r( H/ G( g/ c
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:, i# ?6 ]" `( ]& q
% N' A3 M7 r0 d+ U" q, A7 u: H p, td, li { font-size : 12px ; } # [* C1 A' {4 H/ C
就是给li下面的子元素strong定义一个斜体不加粗的样式
( m; c6 D; U5 g' o- ]4 N- C3 P7 k1 B) T, V5 g
6.id选择器' y; ^/ @/ c2 e5 D' ?" K
! D* {- G- N4 {! }
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层" j: P! ^3 S7 B% n+ |( F
8 m- r* u+ [% B i4 \2 i" i% P) q
3 ~; S& x' H4 I# b$ V/ q- ~/ i" C然后在样式表里这样定义:2 n% h, y8 {. W( v. c: `" z
0 a+ o& s+ r a- `2 e6 b' s7 c2 ~6 r6 Y( ]
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ( I$ B& y7 r: G6 W
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。2 g- y, A+ A8 b
8 F' q4 u& ^& T6 ~2 n$ |9 X, E
id选择器也同样支持派生,例如:- K+ [* ^' v4 \
#menubar p { text-align : right; margin-top : 10px; } & k: f# o+ O2 E) r/ B) u# a2 {
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
* Z1 L6 b# _! [* m6 Z* E% r2 x& @! X3 R
( D1 v3 M# b4 w' O6.类别选择器
# K8 q* f( b4 X, h5 P9 x9 y# V
7 D- w# m& K6 c在CSS里用一个点开头表示类别选择器定义,例如:
, K' S! t9 d/ w2 l& a/ B.14px {color : #f60 ;font-size:14px ;}
9 W2 N% T G0 Q( Y& S. t$ U9 d) E; { e$ V/ f9 G
在页面中,用class="类别名"的方法调用:
2 W% _1 u( y; _3 u9 Q+ A<span class="14px">14px大小的字体</span>
2 u$ E2 }3 U8 I X' ~
# U/ `+ Y* P* c5 Y! E这个方法比较简单灵活,可以随时根据页面需要新建和删除。
" ?. I3 C* o2 B4 _
$ ]! `. [* M$ p6 v/ y9 G: z i! i7.定义链接的样式( {) P1 A2 i L' E
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:- V6 z0 i& ^/ A2 k4 ?& v+ b
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}; _5 O! I E* P" h) r- D% X
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}! |" ]7 y6 ~$ B! \! O
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
3 u' |; N7 ^: t9 Y& D( ba:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
4 k' m. B8 D3 i+ g* s8 ?$ C( M" O1 {+ O9 \
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|