|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
) |: }1 D" N9 y
* B" I5 g+ F# I8 c1.基本语法规范
. W8 p4 P2 }) g& z分析一个典型CSS的语句:2 ?5 b9 r* ^! p
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} : k. U4 g1 n' s; d4 B3 h
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 6 C, x" v0 b0 s S: {4 @' E
样式声明写在一对大括号"{}"中;
% W, P; w1 y5 w; j/ {/ rCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 o6 r4 c0 {& w- k
"#FF0000"和"#FFFFFF"是属性的值(value)。2 u2 s5 V3 X7 X+ |
5 t2 B4 |8 ~# t0 O. x- s, w8 x, _2.颜色值, E1 Q) m, e5 R3 e
+ j7 k. m7 Y, L颜色值可以用RGB值写,例如:
# E& @8 b+ H9 F! B# B( Q
9 r i$ H& i& k6 f. @# u) n- `. G5 a! u9 ^
,也可以用十六进制写,就象上面例子
2 h$ e' ]/ N# f5 m0 K
3 R2 b/ n- D1 Y$ ?$ T
1 S8 S1 @8 p& l' U0 v* a5 [如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。7 w: ^% F5 r! d/ J2 `. Z% f4 W, X
7 s) W9 S* Z7 W9 b# b4 \7 C
3.定义字体1 O" {6 v3 R# W; \4 R
web标准推荐如下字体定义方法
{' v v/ I0 k2 @! v& _* W9 f: U6 q# {/ n" I
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* P/ V4 g# b# a# m字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
$ G* E# }* z+ W0 KLucida Grande字体适合Mac OS X; ! k. z+ b0 s$ ?: i7 T g( t
Verdana字体适合所有的Windows系统;
6 ?! J/ v6 y" R3 Q* y) u( B0 p" B* uLucida适合UNIX用户
; M& l* V1 K- X"宋体"适合中文简体用户;
, |3 \) d5 z* e1 J* |% a& ^如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;- x( U" ?/ P5 q
5 G8 v2 Q! M2 w, X- A
4.群选择器
2 [( [; S3 d4 e+ w5 `5 T
- V+ j, P6 ?5 B4 S9 T当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
- |3 {6 F9 X* V. r+ h
) L( u/ u" s0 B" ?8 c p, td, li { font-size : 12px ; }
; e; g! q5 r& o7 s/ [; c$ t# N就是给li下面的子元素strong定义一个斜体不加粗的样式$ s6 B1 o) k' I4 w( j+ n" d7 l
* L$ N/ W, w% K: x6.id选择器2 L0 a+ Q8 R- }6 j" ?5 X k
( `7 i; }8 f9 Z$ w: u
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 O, A: s& v4 T, d9 V& W% q) o4 m4 S5 F2 x8 a# \( ?1 m7 w7 e
8 |0 R! T7 c- @1 g4 M" z2 [
然后在样式表里这样定义:" P& H: v8 s* d I( X) G! \3 e7 E' t
% N: R Z( E# N* S
7 \& T8 L' s. _! j; m4 |9 q& J#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ^- I) C6 l0 r2 B3 `
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
4 ~- Z0 p! Z+ s& l% }/ O' z1 A; j: F: Y! G) o6 H& q" t# J9 k* ^1 U
id选择器也同样支持派生,例如:! a0 ^$ k, X( L4 |( ?0 J: E
#menubar p { text-align : right; margin-top : 10px; } 5 ~" g$ l4 j0 Y: E# z# f
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
, t; z6 y! @5 z; ?2 Q% m8 m- X3 m; u. l# V X2 @
6.类别选择器
0 q; _: \3 o p3 v9 v& b Q5 @5 {) }+ }7 l- ^* p. Z, l5 z' T7 k
在CSS里用一个点开头表示类别选择器定义,例如:, S# p9 h! G) L# O* }/ v
.14px {color : #f60 ;font-size:14px ;}
6 S- |; n/ A6 W
+ v' l; K! _+ I在页面中,用class="类别名"的方法调用:' c/ g8 X+ B: j
<span class="14px">14px大小的字体</span> 6 T+ t; B+ t8 O+ l( l+ U
: |! w) d" [, ?# C) T这个方法比较简单灵活,可以随时根据页面需要新建和删除。8 X5 r. E; [ Q/ ?. G0 f- |' J
v' R9 F/ Q7 R4 |& r% K# \7.定义链接的样式
$ p+ S" _# J# k2 B( z8 f3 |CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
6 T/ C* `$ W4 R+ `! u# na:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}- X- ]) p) p6 m- R0 ~
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
`: k8 {+ `! N0 B8 la:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
- \/ }! Q( m# d# i/ ^. Pa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 p9 ~, x" Q) i4 S" L" p; u2 K' W Y8 Z, U, A" ^6 p; A
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|