|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
& L# W* c+ _0 I' c6 |9 s% g& }: b1 J
1.基本语法规范
1 T# R1 b3 v7 W3 |+ z4 x4 b分析一个典型CSS的语句：8 [9 u6 C7 m$ @/ T& z8 q7 o/ U
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； / ~0 u* B( y9 V4 a( b4 m
样式声明写在一对大括号"{}"中；
r( f# k7 P/ X& QCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
8 n! T4 T% [: I0 h- ^7 |"#FF0000"和"#FFFFFF"是属性的值(value)。
& `) Q2 z0 c/ U. P0 j w4 k6 o. D2 _1 [) m/ S# G3 H& o' P
2.颜色值
. k( Q6 ]+ j+ J' r# \9 d* B- `. m4 K
% s* ` ?0 y. o# e, C8 |颜色值可以用RGB值写，例如：
0 U8 b3 g/ R2 W/ ~9 h
" O8 {/ F/ }: T0 B' p+ B
3 F) F- d G! r8 A. J' G; X' \" A，也可以用十六进制写，就象上面例子$ |1 B3 V k% V! x8 d$ d9 o1 x
: m, `8 A5 q" O8 P! c7 U
" ~; \$ P$ a% [1 D# j
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。" [2 D2 d8 y( ]' ?
. S! a5 ~7 m) c; m7 K& ], u3.定义字体
- Q/ ]& O4 ]1 ~1 r* t3 x7 b9 |web标准推荐如下字体定义方法# b, q1 T0 ~8 _% y
7 ]3 |* R p4 G: n* `, x
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
( T2 x/ N. b" i `/ B! j# N% g字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
" l+ ^, }, [- t- FLucida Grande字体适合Mac OS X；
4 u# c* p7 F/ KVerdana字体适合所有的Windows系统；
* I3 b3 g. ^" Z5 O3 r% YLucida适合UNIX用户 / L: T { N) d- w ?
"宋体"适合中文简体用户; 7 W. S9 H$ z) w# {/ p
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;/ b0 p# s% a# }+ B s' k! L3 p9 N
+ B9 o5 T( _% ]' E' q
4.群选择器( W4 e7 U& ?% S5 o* A
& l& ]+ c( S8 y& a3 p2 F, ~当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
% b9 g3 t0 @% r* t) W- D
: `" [1 S5 G6 U( U+ t. C p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式+ q" R B0 O- M* A' U7 F
6 X, U+ z, b6 w' |9 v8 ^
6.id选择器
! ]3 X$ B4 @! D Y# ?8 [3 `2 }
# N3 p0 ~% G7 ~. ^9 U. E用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层8 i* d- a0 l3 `$ {- e
3 _5 p6 `" @/ g7 c2 T; X2 D5 v3 D& W5 Y( I5 d5 L- D
然后在样式表里这样定义：
6 R3 N9 Z* j- d; t
2 [/ }. s3 {4 b/ j8 Q! w9 Z8 u6 G& w/ k0 J0 I
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
& E1 I7 _0 Y7 x" |' I其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
+ |& f7 s( t- F' v2 G8 j! x
& _' t; V. t; t' D# Jid选择器也同样支持派生，例如：
0 f) r2 O7 }. z#menubar p { text-align : right; margin-top : 10px; }
. A; S; e" D. Y' c- K& i- M这个方法主要用来定义层和那些比较复杂，有多个派生的元素。 B$ a! d8 R7 ^ g. t
$ r; o/ m- l/ e- N
6.类别选择器9 h5 w9 v& A5 P% T
5 g* _6 b. X6 p4 C0 B$ q. v在CSS里用一个点开头表示类别选择器定义，例如：5 H* y5 Z% h0 _) s4 }2 ?
.14px {color : #f60 ;font-size:14px ;}
" \( i( {6 _* ]3 Q. A+ S& m. B( X( E1 O" W3 x
在页面中，用class="类别名"的方法调用：
0 R U5 M# N- x7 ?( Y3 o* f<span class="14px">14px大小的字体</span>
6 V h/ Q6 v9 g$ i3 \# \9 G4 G: k& H
这个方法比较简单灵活，可以随时根据页面需要新建和删除。6 R% A, \9 o: C8 \! B; F
# j5 i. ]4 A" n8 U
7.定义链接的样式
! f. [7 W3 d7 u; O0 A; dCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
, u6 o/ Y9 a! H+ p* i# {a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* N1 c, b9 k1 K2 e3 T, r6 R) w
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 Y) o: }& d6 N% v9 X; B1 P
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
: x8 v% h' o% @9 P( @: }( ya:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
4 s! O6 g6 l3 h
7 u s6 h/ _* ? ^, I以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
