|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
8 b+ Q4 o0 a# E, ^
9 [5 s- W; u) t: E" q- X1 p, M2 E1.基本语法规范 Z: b( Z. L8 D
分析一个典型CSS的语句:
( `8 ^0 \( E" O$ Ip {COLOR:#FF0000;BACKGROUND:#FFFFFF} ! w3 |0 A$ c' q4 A+ X/ n
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ' P q- Z) {/ e/ ]
样式声明写在一对大括号"{}"中; ; R. c; u( \- H
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
4 Q& y6 ?, p6 c5 w"#FF0000"和"#FFFFFF"是属性的值(value)。
' F! L9 B. B7 V& e
f$ t9 O; Q8 q% I- @$ m1 N8 o6 G2.颜色值
' C6 i7 a0 T! a: ^+ O6 k8 j- v, Z8 h9 i/ L6 w. t
颜色值可以用RGB值写,例如:
5 N' d( w2 V0 I+ j- V$ r3 x- h; x4 P3 x
# \1 y+ ?* l( V4 n1 L7 q,也可以用十六进制写,就象上面例子6 _9 D: _2 O6 Y6 y8 M7 O: c
' F. r% j$ H. f/ J" N
& \8 @7 i& `6 R如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
& b+ {! ^3 o* U. }, g2 e5 R# G, {1 \% x
3.定义字体
' q: O, ?6 t# a; E! ^8 V( A1 aweb标准推荐如下字体定义方法
, d5 {2 y% Y$ F9 R# I+ i2 Z ]) u; O K% v, |
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 7 m% Y/ v. [% q. f
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; : u0 s) x; w% s! `/ {
Lucida Grande字体适合Mac OS X; 8 }6 _ }8 w' @( q6 d7 O ]: E
Verdana字体适合所有的Windows系统; + I+ g4 h u+ J: ]) i
Lucida适合UNIX用户
/ O& N$ `0 F8 U2 d. o"宋体"适合中文简体用户; 3 Z# S' \2 B! M" G
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: N6 ]1 M1 d. C! b8 m2 M: q7 s: x- Z, M3 T' v
4.群选择器
9 a, c$ L* K) e, N6 I1 G* W1 Y* @9 f- o
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:0 U0 K# \ r( z1 X
) [9 h `. j; w p, td, li { font-size : 12px ; } % t% W6 b% P8 b
就是给li下面的子元素strong定义一个斜体不加粗的样式$ i# j8 J6 v& ^& W0 h" e
# |( {) R) \! K9 U P/ d- w$ p+ k
6.id选择器
& D# X# q- [- n4 S, H7 F! A- S) A6 C' ^/ `2 b7 Y$ F
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层2 u! i' [& ?6 ^3 w& I+ V: Q; k
* X+ A# u0 \. h
1 i: u2 o5 C+ e然后在样式表里这样定义:
" A: w! r: U0 V1 X; ]% g& \1 i; ^+ H4 n. {3 V6 Q% E8 W
4 x6 H( } }3 W! W) ]6 \% e5 X#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 4 x% D; D3 B) B6 Q* E u( P6 u& i
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
- X0 Z5 x. q/ \; H$ J3 ` H4 r: I: _) m; E' X0 H
id选择器也同样支持派生,例如:
& M: A2 d) Q! \1 u# H#menubar p { text-align : right; margin-top : 10px; } - R/ p% s$ a% @' h. s
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
6 b; Q: p5 ^( C. K u$ f5 x/ O' s
6.类别选择器) q, @# j& I a" \. `4 `, T9 h- o
F3 [" A' T9 m8 |: k- @; O( y在CSS里用一个点开头表示类别选择器定义,例如:1 o# `& S: n, O, D3 r; N
.14px {color : #f60 ;font-size:14px ;}
$ c. a8 R6 z1 V; t" |8 Y) Q2 Z5 d* j+ K; p0 p j
在页面中,用class="类别名"的方法调用:
1 S- Z$ a) v Z* U3 {8 B' b* n' B<span class="14px">14px大小的字体</span> 6 F/ J( w7 G2 Q0 l
0 f0 c, B+ o4 }+ O6 @/ v! N这个方法比较简单灵活,可以随时根据页面需要新建和删除。
7 e* y" R6 q& t# C
5 M9 y6 y* }5 G: Q$ }- p: V- Z7.定义链接的样式
4 a* {6 E7 a) u" \ k# F8 MCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
" N- ^6 |8 v6 r- m! |3 W9 a% W* {a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
5 F5 w& ]) d1 S g* ca:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 H; Q4 C4 _: ~- d* ]0 O
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}7 i8 l) ]7 U" ^* ]4 z X2 j
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 5 K' }, f0 `- w! {
" J* E+ L0 {" Q6 L& l+ q3 U
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|