|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
; x' |2 A4 o Y8 b
% E. m" o& U% w4 |- w2 [1 {1.基本语法规范
1 P9 y- z/ d: e0 n/ E分析一个典型CSS的语句:4 q& y7 b/ p3 q) X1 N' z& C
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
9 y$ f! w7 N% n, Q$ p其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
( n; i) f0 _ a: S样式声明写在一对大括号"{}"中; ]' z7 n- V. E3 _
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 2 X" \" \9 a- | T4 d% J4 ?
"#FF0000"和"#FFFFFF"是属性的值(value)。
x* @- T3 r w0 ~8 `" X, n) {
4 V9 s! ?1 X) o2 e2.颜色值
; g$ I2 J; J. Z7 M5 v( U
6 D2 p& W$ B- [( o: X9 e$ N @$ c! z颜色值可以用RGB值写,例如:0 [+ Q8 B/ x( s: V
0 _, O/ C7 t/ F# ?8 |
( X3 Q1 e. S% K: p0 ]# l" K& }) C,也可以用十六进制写,就象上面例子* u6 `% V; Q- R9 u2 k
u- S0 `/ m3 j. \) t+ S) k8 W# m
6 i; i4 `0 @# L. T如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。. Y4 l% F" S7 ~( e q% }
" w& y, E( _8 z' e8 ^1 O5 S3.定义字体
- a0 {6 |9 Y0 ^ {/ I$ F0 Oweb标准推荐如下字体定义方法* d8 f1 f1 }3 D& P; r) X
' ]& F6 Y$ r5 Y3 X1 F/ n% mbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ; d0 E4 R o% I8 r- H+ l" x
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 5 |$ O/ O( w0 Q6 W! O: G' W( p
Lucida Grande字体适合Mac OS X;
* i0 ?" H$ D- DVerdana字体适合所有的Windows系统;
9 _, A/ Y+ `7 p- ~2 M2 x1 fLucida适合UNIX用户 & `6 ^+ l7 k0 {% Y2 Q
"宋体"适合中文简体用户;
. [3 n! Y; e7 I! i) D. D7 L如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;( ]1 g! G# k; C" [, m) c- m
- N# A b ]2 f! O, S1 G1 ?
4.群选择器
$ L) m( s4 z) t1 h6 E( Y. G' g
' |8 Y9 |0 d$ R, [* c当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ M' u3 f: s$ z) ?' q
; `: k( V% ]- J Y$ T7 ?# h! {) i p, td, li { font-size : 12px ; } : X+ e- Q3 l# |
就是给li下面的子元素strong定义一个斜体不加粗的样式- q, B( |3 X; ~3 h
$ H8 Z3 ~; _* U0 B2 X
6.id选择器
( w0 u. j: O: Q, D: i1 J6 `& `+ r3 }# a1 m- Q0 Q/ h O1 U G8 J9 l3 m
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层3 n2 o5 S W4 Q* I. ?) I
& b' ?+ b$ H' b9 U
2 k7 P5 U% I: j7 D" Z然后在样式表里这样定义:- i! H, I b" X3 p C
4 Y7 D" j; J) p% A4 |3 Z |( ]% |" r$ h
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 1 I) ^2 v* O6 e# w! a. \% K
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. `/ {4 w) B4 V$ Z' `
* R6 r+ S1 R! g, nid选择器也同样支持派生,例如:
5 g, D% u4 [' e- G, S0 {) J; I#menubar p { text-align : right; margin-top : 10px; }
9 C9 b# t9 ~3 g4 s+ M# P这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
7 G6 k! k4 g: a- R5 m) U5 H q# E+ e& \
6.类别选择器* H& d! i3 G1 _
2 \7 F% W' V# n) h( ^9 Z6 @& [
在CSS里用一个点开头表示类别选择器定义,例如:
0 k7 _; O1 @. v' C" y/ }5 j w.14px {color : #f60 ;font-size:14px ;}
/ G% N, e: x6 n$ U. u |
8 ?# o* {' f1 _& q! k) h, W在页面中,用class="类别名"的方法调用:% |( [, b7 X v, e" ?$ z, t
<span class="14px">14px大小的字体</span> + X1 p( y8 E! x: U; }
' p4 Y8 d. w/ N7 e" j- I这个方法比较简单灵活,可以随时根据页面需要新建和删除。0 z" S1 S: Q o3 r) a& }
# a0 x0 r3 g, g
7.定义链接的样式1 E; }" s, R' Q2 o9 d4 ?
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
; F" g) e% e" b0 s2 [" Ha:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}# U ]6 Q& d# C1 N
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}( u2 g1 d9 i& U/ ]1 \
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 F" q4 R O; }5 e
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 p* f8 v4 T+ ]) g
. y, i$ x: s+ H; y, R以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|