|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。; ~1 x" L) y" |" I
- k/ B* F! B& |8 [6 s. p1.基本语法规范% _ \# G* w: C4 _' G, e5 E
分析一个典型CSS的语句：
+ f% O1 [ }0 x1 U' g& gp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 0 s) ?7 _0 M7 g
样式声明写在一对大括号"{}"中； & S+ ~! T0 [. l; e4 ]# n( n, I) t
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
# K6 Q( O' ~3 I! U5 V$ G"#FF0000"和"#FFFFFF"是属性的值(value)。
Q/ Q+ W: i: o8 S
+ I. G( J% f6 ^$ n0 Z z$ L5 r2.颜色值 \0 f. V' X2 Y- A( s
! Q6 ~, R9 k6 ]5 }
颜色值可以用RGB值写，例如：
. M7 Q& Z( h: p
/ }- N; _" x# m' e3 l$ }+ u+ z' ]
7 j# ^# T4 _. ^5 O8 u6 x- b，也可以用十六进制写，就象上面例子8 b$ P$ v0 q& F+ c) O- \
6 A) T! H" O( |: |# g! u- r" y; T0 @! A) M6 f8 Y J) ]
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。: l2 K" _* D: l7 c
" F& z$ S% X$ v2 O# O+ s3.定义字体2 n j3 g# A# }" ?
web标准推荐如下字体定义方法# r! K, m$ f( k ]2 P t' z& ], K
% Y2 g, Y: L9 t/ y( w
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 4 @% h; S( ?* e Q! Q' z
Lucida Grande字体适合Mac OS X； 0 d! d# h6 g1 A
Verdana字体适合所有的Windows系统；
8 k7 ~# e: }5 N( q# CLucida适合UNIX用户
7 o; D5 n. t2 \& A8 P"宋体"适合中文简体用户; $ ^" U7 E4 O5 `$ ~
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
0 S. ~$ [- z6 B: B6 v. Y* o, J0 Y- h |- @
4.群选择器: F' H6 q/ _+ j' N4 y9 _
1 `" u/ n2 W: C# g( G) {: x
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
: O$ p$ b) r4 W2 i9 O9 u9 [3 I
0 ]5 Y; R" ~9 F" [" _& W2 N p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式+ [0 f; o/ A' C
( n& j" G3 U) ~) B8 ^4 u) b6.id选择器
( K2 l7 I4 Q) E& h R# c* v$ Y, v" K# r# h( q+ B. S! J2 ?, g
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
+ a% ~ f7 A1 h2 H9 b
" t6 v" i4 t, y \ D1 @
7 F3 d) a* e$ ?- h* H$ O5 H6 ~9 ?然后在样式表里这样定义：
2 G: b. v5 F. v" k0 K9 v9 B" o f- V$ X7 M: p5 U" A s
) [# A( }, A# ]% y' |#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。; ^; v/ ^7 V# I6 e
2 L" \' h Y# i: c& L. E' h
id选择器也同样支持派生，例如：
9 m4 [2 K: j7 s! }#menubar p { text-align : right; margin-top : 10px; }
; [% ~, r( a* t; }, c这个方法主要用来定义层和那些比较复杂，有多个派生的元素。0 D7 t. P& u6 ^# N
' B2 |& y: p/ v6 h l3 [; T, V$ @# m4 u6.类别选择器7 z" l3 x g5 E3 Z% w O, y2 t
- g% I' e/ t2 [) K在CSS里用一个点开头表示类别选择器定义，例如：# I1 x1 q# u% X
.14px {color : #f60 ;font-size:14px ;}
+ z$ m* s1 K- V
: x! a) d0 m8 F, X在页面中，用class="类别名"的方法调用：
w: K5 g# M% ~) e L& _<span class="14px">14px大小的字体</span>
, d, j3 y5 K! U l; n) X9 x: k* e1 P V
这个方法比较简单灵活，可以随时根据页面需要新建和删除。0 o: B! t# U @1 g/ ~! E( `, U
8 k1 u: D {" c
7.定义链接的样式
: w) J% E( f% W: R( y) b2 R9 {CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：" j' a& b9 ]) S) |5 U
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 }0 \* v2 K' W+ Ra:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
* B' I" I! ?* q8 @/ k: ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& j& R" x9 z8 p. p* k7 [4 p/ Ha:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. B( q8 d3 K) `; _, L9 y$ o2 w% h3 J) }* P
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
