|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。/ }& A' W6 W" ?5 X, `% x
+ \/ ?3 F/ j) q
1.基本语法规范- Y1 E; L. a9 ~# O' ^/ p2 B+ w+ n5 e
分析一个典型CSS的语句:
/ Q. B+ n( m% q" P) l+ Np {COLOR:#FF0000;BACKGROUND:#FFFFFF} $ G5 Y. K3 {$ K/ Y( R
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
! p9 |' `) X' ^4 J0 r5 J. q8 N2 U2 C样式声明写在一对大括号"{}"中; , n. f0 D3 s2 x9 w
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
# h: g; ^# D" c# Y: Z"#FF0000"和"#FFFFFF"是属性的值(value)。4 o8 T, j X& X
. d$ B }* T/ {6 k5 l2.颜色值4 I( V0 ]- W; W) _2 F" T3 _
& M7 k: d, q6 J6 D6 L颜色值可以用RGB值写,例如:) j% r# k' o( G% P$ @6 u. G
0 k8 s- l+ o. n" V6 f4 j" {% R/ c4 b: [% T3 h! D/ e4 A2 m
,也可以用十六进制写,就象上面例子/ m( S, [, O/ u$ ~* T
" i* o6 _+ @3 K4 E* W
8 w2 D/ C6 R2 Z/ L9 H6 D2 r
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。# ]1 V2 I+ P9 W$ d# ~2 a3 a
) ]* E- y: r( Z1 v2 V) w, a- d
3.定义字体
7 H" y3 ~/ ]# T, p" Kweb标准推荐如下字体定义方法5 a% }# i6 F; Q, h9 u$ Y: ^% _
$ M3 W* C3 ^ ~3 ? \. N& l7 v
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ' Z, V0 Z# U1 l; r
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; / r! A j' O5 C4 K8 C5 I0 w( _
Lucida Grande字体适合Mac OS X; 0 m' i) {9 U' G
Verdana字体适合所有的Windows系统;
' Y8 H/ y. Y2 v& ~Lucida适合UNIX用户
& S; x) B. q- T"宋体"适合中文简体用户; 8 w5 {$ t' E, K1 e. `8 {" o
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
^% g$ z) I. Q& N! M) V' J$ Y9 `3 o+ h* \9 z4 b1 [( y% D
4.群选择器7 j. j8 x: q5 \0 }
. `& C2 }9 }$ y. m6 f& Q: H当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:8 T+ `& W- p- \8 k. I: \+ A
4 d5 u% V, `0 X# q
p, td, li { font-size : 12px ; } ( O- Y: a% j/ w( _
就是给li下面的子元素strong定义一个斜体不加粗的样式
l: s0 ]: w" O; y6 d5 e! p2 k% z1 W% e
6.id选择器# {4 [4 z% m, A! d7 F- F7 S4 i# R
* C H" X) E7 ^用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层; j) |1 x; _- B( t" M& G5 s
6 \0 C' b0 ~1 Y
8 c7 w; A) e0 k, F
然后在样式表里这样定义:
& u+ l9 v, s; B6 s+ z, A l; l8 R2 \2 X
( z( G6 ^+ j, J" t#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} $ J2 n; c# ?, D% d0 T6 o) L0 v
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 c. {! O( V, U$ D- x
" E) W2 T) o" F' g! tid选择器也同样支持派生,例如:# n1 ?& P# q* L4 T9 z: ^
#menubar p { text-align : right; margin-top : 10px; }
, n. p4 D! O" o. Z1 e ~, w这个方法主要用来定义层和那些比较复杂,有多个派生的元素。; D' o" P" e$ ~, H
5 Y' Y2 W( {" X4 X) y/ Y/ Z
6.类别选择器
4 f6 ^+ H0 C$ x5 Z' n) Y8 z! [# j6 a v d, q
在CSS里用一个点开头表示类别选择器定义,例如:8 a" M. G6 y4 u7 L
.14px {color : #f60 ;font-size:14px ;} 2 Y% \) v7 k/ V z. }- x4 E s+ j
- {2 U# }) `/ Y/ A在页面中,用class="类别名"的方法调用:
: G- @; I' F7 \& M) x& |, {<span class="14px">14px大小的字体</span>
4 X0 U' ~6 _0 h/ g4 {
7 D4 |2 H5 p% v2 d' b) n这个方法比较简单灵活,可以随时根据页面需要新建和删除。& @+ `$ t/ p# h1 \9 j: U7 ~: V" ~
4 C6 l, W I) R
7.定义链接的样式
+ _3 A" C. {( p6 K* XCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:1 m, `2 W( x: A( V: @* F- ~
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}3 Z1 S$ C; D {& q9 D* Z$ \* i
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}, L- s: Y" t0 w( q+ B
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}- a) X/ u9 h* D( T1 S
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} % z$ Z: d3 \6 Y: I, N3 \
0 i- p* j5 X3 _6 p
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|