|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。+ ^) z+ L" S: W6 f( w& o
- K; |1 A0 N* `6 M1.基本语法规范
/ d7 @: ? I+ t: A/ y! P$ G分析一个典型CSS的语句：
' C9 u, h) S& Y3 d1 u0 t8 r4 G1 W$ ~7 jp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
! g* ]) }; ^, L& ~其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 5 U) c4 u, B6 _- z) Z1 p
样式声明写在一对大括号"{}"中； ) a4 E' A8 @4 V
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ' F- n5 g5 Y {6 a" y0 f
"#FF0000"和"#FFFFFF"是属性的值(value)。
8 M8 b) ?( m6 p# H& w/ k
* c- l: [& h0 e& h q; h% I. ^7 W% u2.颜色值
5 ~. j( p9 S% j, p' B1 b
. G7 Y& f8 O F" s, h `+ J颜色值可以用RGB值写，例如：
7 M; Q% P) F) I. b; [( X% G6 T- g3 o
& Z& D. ~0 D& \. S1 U0 O& `$ K
，也可以用十六进制写，就象上面例子
/ Q0 i# U1 [" p2 {
# r Q/ Z6 R, o2 O) ~* u5 }5 ~! A* n: v0 {+ S7 B3 V8 P3 z7 p5 y" e
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。& L Q6 r$ L0 q; R+ r& [
. u9 d# m/ I, s3 m$ A3.定义字体! L5 G$ p# |% z/ w! z
web标准推荐如下字体定义方法
$ N3 C+ Y/ y0 Q6 y" y7 e% z% H5 m: l# Y2 h. V2 @7 a: p9 U
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
8 T* @9 p8 n* s, n1 [字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
1 w' [# b$ E0 T @. [( e0 CLucida Grande字体适合Mac OS X； ( a7 R. {' W7 J+ j% e
Verdana字体适合所有的Windows系统；
! v: ~1 J( y# O/ NLucida适合UNIX用户
! L f. M7 x0 i, }+ C4 c. o* J5 k"宋体"适合中文简体用户;
" k' [5 _# d2 v, V G如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
7 d& T0 G+ q2 o* l/ q
; U" I' {1 c0 P7 p! t4.群选择器
) y v7 ?( S2 a5 P5 M: I- \, r4 D! t: y4 M8 B
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
( R* @( F- T+ S/ S W$ K0 J# d- y; ]2 P8 W
p, td, li { font-size : 12px ; }
- a- h' w5 P0 ?% ~; I! s9 h9 b& M就是给li下面的子元素strong定义一个斜体不加粗的样式
6 Y) D1 e& C6 v; z
( d' _# a. e& I" M5 U0 M6.id选择器
- p+ r( f. V7 l. g
$ E) j" |! N/ U# c* V- z用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; n: q$ v3 X! P2 O
9 k9 u b: L) d/ J% s4 q5 R3 W2 _( M/ A; X6 i) L/ d& M
然后在样式表里这样定义：
+ F" Z1 n5 o$ l2 S) y- f. W
" C! L/ T M6 p
$ ]! `, D9 _$ {4 c& g) }#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
9 C3 F9 Z0 N4 M0 w. X其中"menubar"是你自己定义的id名称。注意在前面加"#"号。 a9 |; L7 |, [$ C0 `% A8 U* Y
! }, g$ O) ~ p( s3 D* |
id选择器也同样支持派生，例如：1 |' T3 `9 R; G" U) _$ b
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。1 Z( ?: E7 ~1 T
# i' x3 ^# g0 o6.类别选择器/ `: C S2 z2 J; v4 P; I: L) d( h- O. V
6 }( t [" z, X在CSS里用一个点开头表示类别选择器定义，例如：
& H! S$ h7 ^- P- V% _$ T. {.14px {color : #f60 ;font-size:14px ;}
/ B0 ]9 n9 y1 `: m
, i( [8 q' {" l) L+ a+ P1 k在页面中，用class="类别名"的方法调用：
& B. X, h! Z4 B' `<span class="14px">14px大小的字体</span>
3 ?7 o, ~6 H* x! d* b8 S
' ^- R8 i& z6 Q! v5 B9 h$ m这个方法比较简单灵活，可以随时根据页面需要新建和删除。/ }' J* y3 C! ]# D r
" P9 p, [" T; @( _4 j8 j( h& a6 `
7.定义链接的样式& o) ~5 |! \$ I* I/ U5 l- L( J
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
5 M! g$ k1 X5 ]9 r! h5 ^, [a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
- [1 b: e$ `' W4 g+ |a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}( Q, }5 n% S$ U1 h! G: o
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}; a" ]3 B9 L( q6 i; ~! c
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ I5 }1 {1 o9 }# X0 {6 k6 E; I
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
