|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1 f' [$ T$ \" W* ?' Z4 U
4 y/ }: q) r1 Z8 U4 l- A3 l/ z) z$ v1.基本语法规范; O- B- p, y( l$ k5 a1 ?. |
分析一个典型CSS的语句:
$ G3 q. O' }5 A& a( Tp {COLOR:#FF0000;BACKGROUND:#FFFFFF} ' w! J2 S, r( ?7 o6 |
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
5 D0 {9 h( M8 m5 u( j) ]样式声明写在一对大括号"{}"中;
! `) r5 A9 o# U1 r6 v6 |0 lCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
9 b; j0 F5 |' i"#FF0000"和"#FFFFFF"是属性的值(value)。* `) e5 u/ o1 P
9 k4 U* V# m# M6 y" c6 f2.颜色值* Z0 B2 z( V6 M+ X
` k& ^6 [9 r) a3 S6 Q2 O
颜色值可以用RGB值写,例如:& k, p0 p( Z1 ^% y
+ \2 z% N; u9 o1 [0 N
0 m& D0 S: j( `+ y$ ]! v# Z,也可以用十六进制写,就象上面例子
8 P5 v' W5 K; I1 m
; K% L5 W+ c$ P `+ S* }; x& ~+ \+ J' i9 z1 h4 q- ^& p
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。8 v( ^' f0 G- X3 c; z, F( Y4 e
& n) j; w. f5 _/ L3 x0 C' [3.定义字体
* c- t& ^5 X; |0 Z5 ]- iweb标准推荐如下字体定义方法1 e% d) ~0 U( b; \8 {7 _
! Z: U/ T* o( I5 T6 w1 {' i
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
7 z" x' R# k7 \0 K7 s9 j7 l8 `0 W字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ) r8 B8 D8 }7 X# { p w
Lucida Grande字体适合Mac OS X;
. T) q- E: [2 r9 ?Verdana字体适合所有的Windows系统; $ u" M, x- E* Q
Lucida适合UNIX用户
3 t4 Z9 a6 D) [2 c1 w"宋体"适合中文简体用户; $ F1 I1 I. s Q+ ?
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
" _& P% E$ ?5 v+ M* s& K7 f' Z1 [
' _$ B8 X+ d, O# j4.群选择器
: L) f& S, v6 m5 N# A! E
* A& J) X$ P! u0 a& O. R当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
d* h6 G7 k2 X! J9 F3 n2 p7 R- @
" W& W- m1 p9 L p p, td, li { font-size : 12px ; } / I* K; S# I; F2 O) u/ V0 ` T
就是给li下面的子元素strong定义一个斜体不加粗的样式9 k T6 i2 a( q7 x4 P! X) N
& I5 q( `7 e, T: \; V0 q6 a+ S7 i
6.id选择器
2 ~8 T: `/ }% P9 S, E; b
: [# H0 X3 [+ M用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层 O( C* b3 S, C( B& H; R
* F# N% Z- D% s1 K! A7 M% q
3 d: @& a" p: o7 t! Q8 K" C
然后在样式表里这样定义:. N& U# w( y: ]3 y" i4 S' q& P* C& J
5 c! I0 T3 K/ n1 N
+ Q( @8 h& H' g- _: U- G9 D#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} / f3 M. L0 ?, N6 C- c; Q3 H
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
l+ {9 r. p; T( N! o0 z6 o( z/ H H' c
id选择器也同样支持派生,例如:
& B2 z% H4 L& T#menubar p { text-align : right; margin-top : 10px; } ( q H. W& }$ }( b& ?. c& `
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
; T/ ~# _ S/ x0 c" Y; h' i, e5 ~; E( [0 U( F7 t
6.类别选择器6 u( n4 @ A% w2 s7 ?* Z$ K
# _8 o) J( N* W% L2 a
在CSS里用一个点开头表示类别选择器定义,例如:9 S4 W! f! I/ y5 X
.14px {color : #f60 ;font-size:14px ;} 0 u& Y& O- c y9 W4 G& T% h
& _& \7 G; x2 N' n" \# m
在页面中,用class="类别名"的方法调用:- F" e0 G0 O, y9 p- g+ Q+ l
<span class="14px">14px大小的字体</span> ! l& O4 t1 K; H2 a( U
' x' P4 Y1 q. P/ ^) `) j0 n7 N这个方法比较简单灵活,可以随时根据页面需要新建和删除。% g! P; c) B5 V2 W
$ [2 X! e8 V$ U2 {7.定义链接的样式6 N/ T9 d# k `' @" t$ L/ A" B! r
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
* o( V0 M+ [( {a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 ~7 X; i7 W2 F6 u* ]a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
3 m3 N7 a* @" ^% ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
3 Y6 ~5 U7 Z! `4 ]a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
5 H: Z4 }. _8 [' _ A. o/ F
% j% n) Q( {3 h) s3 w* V+ i8 N以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|