|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
j6 g5 Y" {! ^; f8 ~. |
7 h5 O3 y, b# m- T! N( M1.基本语法规范
" Y, X" Z1 w; J- F分析一个典型CSS的语句:
! t7 N- l! z! w& ]& |, Hp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
- G8 w1 o4 a0 ^8 G, Q( A其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 P9 ^5 s0 _$ S样式声明写在一对大括号"{}"中; $ S; W W2 m: [+ {1 b* v! ]" n5 K
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 7 j! l. k" J6 C$ H1 @
"#FF0000"和"#FFFFFF"是属性的值(value)。2 t y8 J! A6 L- J( s1 b) |6 u1 `
9 z' b; ?( o- o/ |
2.颜色值1 b: F4 F! c4 W" y
, `2 T+ v4 n7 [: A6 o4 D
颜色值可以用RGB值写,例如: `! o' K6 Z% \* `" \
- N- J6 G* W. j) x$ V! F* c$ f' k+ i' }* P0 p# D4 R- i6 w: F2 V# T2 w
,也可以用十六进制写,就象上面例子
" V" C- d- o$ D' q
( E. L3 a9 N- s% K) z8 Y M6 q5 R4 q Q3 F, P$ \9 U; |
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。% S$ [# F& q( k. G) r: R( u0 k
; q! N+ c, ^ ]# q9 t1 O1 K* c3.定义字体
" a0 C% i$ F6 O+ w/ W4 [ z1 b) cweb标准推荐如下字体定义方法' j) w) q. o, p- H% ]
; G: b/ C7 q) `& P4 Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
' D5 j4 J. `7 N1 Z字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 6 w$ t* a$ P9 S1 z& [+ P6 e
Lucida Grande字体适合Mac OS X;
; J& K6 {- v% T, ]8 A) tVerdana字体适合所有的Windows系统; $ f' h+ G- _; n; w
Lucida适合UNIX用户 $ \. O0 v' Q, W1 ?! z7 a( Z
"宋体"适合中文简体用户;
3 O6 y4 C: H1 k如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
5 }( s. n4 i. `! ]4 m( C1 w6 {9 d$ m% f: L) ]
4.群选择器
' ]8 X* b9 p9 E7 q; f" f. r* y) r: e( M; [3 w4 n( Q
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
+ F; X& o/ g" |7 Z% ]. b7 D5 c' d! s, b$ r
p, td, li { font-size : 12px ; }
% e' b7 S/ K% D2 d, Q6 b$ K就是给li下面的子元素strong定义一个斜体不加粗的样式
1 ^! x- l D2 S1 M- h! Q
I4 l' q- d3 s0 G* _4 Q6.id选择器 y4 m6 q1 X- i5 D
3 q8 i: D) V7 R& p' V' ]" @2 ]
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层, Y: b1 d8 Z3 f1 i( D0 P3 K; K
+ y! p$ F" w# I$ u1 x& {5 L4 \6 k- C: M# w5 {$ Z
然后在样式表里这样定义:9 N' d0 _- Q& i6 k
( a, w5 }9 W2 J: o. L/ m% n9 m; @" m. n; D' T
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 9 ^! D6 M3 S# p F1 O. z
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。: w2 d! i+ g# V6 X+ Q) i
- t3 ^( M9 [! |# m( q0 `/ Iid选择器也同样支持派生,例如:
9 D0 R0 u2 v0 ^# g* c: _0 e) [" E1 O+ R#menubar p { text-align : right; margin-top : 10px; }
* M ~% E0 v; T/ c4 V9 F这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
- ?, S$ V2 ^9 _* z4 P* L- w
% A C) @9 c0 o$ |0 R) p( s( f6.类别选择器
* q; `+ s6 y1 {, {; F' q( Y& Y
& A* k: d, X3 x$ |) {3 E2 f在CSS里用一个点开头表示类别选择器定义,例如:
" }4 `; M2 q: V.14px {color : #f60 ;font-size:14px ;}
5 j ~2 n7 G, r' q. k+ w3 m$ V" H0 l G
在页面中,用class="类别名"的方法调用:
" A( B& H& q) I9 `3 M5 K/ s<span class="14px">14px大小的字体</span> . H' A, d- f) D: ^0 L8 p. ^$ y
$ }( ]2 ~8 \* a8 e
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
, f8 i; A7 I' X3 G
) O: |0 ]! d; i1 G7 k" N: {# m7.定义链接的样式* ~( _3 ~& j7 P5 k% v+ p
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:8 V9 K3 @; J9 G- s* k. U" p
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 f* I4 B! k# X5 s& J( l: E T; v
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}# ?' Z. w* j& b; _2 j* b7 ?
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}; i/ _6 }* Z4 G) ]7 ^
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 8 K8 ]7 T6 D' T* ]# j' y
# ~0 m. l. k+ o$ j4 ?
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|