|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。. t# m! n! D- Z. p
4 Q. u: k. x- t6 A2 G2 R2 e& y
1.基本语法规范
/ y* [2 ?0 Z* i3 S& R分析一个典型CSS的语句：
8 G. c& r3 U ?: C7 X1 ]/ K* I H7 x, d/ ?p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
1 }" J7 _$ M" F' Q! \其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； $ B! \0 C5 z" q9 t
样式声明写在一对大括号"{}"中； : N7 B5 L, H2 s3 [" o ]
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； ) K) U! F0 E5 a1 v' |3 P
"#FF0000"和"#FFFFFF"是属性的值(value)。
# T% q+ o3 w/ R
' F' _1 b; H/ f8 B6 x2.颜色值 O6 v. [/ g1 j& {# {
0 A0 Q) F7 F+ b# ^! Y! V1 c/ B; r
颜色值可以用RGB值写，例如：- o) y4 ?9 T6 d
$ ~8 m. @7 j+ F5 r
6 _2 C' \) K/ K' k, Z6 @，也可以用十六进制写，就象上面例子) n$ p# M& D' ^0 n* D. @
' w, f3 r0 c- J; Y; B1 U9 l! `# X
- ?2 e2 v& C3 G0 m
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。2 F+ I" S. F, H" f& {
) {4 c* `: \8 W' i, G3 [$ H
3.定义字体4 j, d3 g6 S( r# o; l4 ]; e% M+ Y
web标准推荐如下字体定义方法8 k; Z6 L! ?. e( S, p/ {
7 v- `7 M5 X \1 Z- c4 Wbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； H$ u$ K; N0 [$ X4 l! ^
Lucida Grande字体适合Mac OS X； 6 _7 l4 K. ]& s& s4 P) _) u2 x
Verdana字体适合所有的Windows系统； % K- E% F$ f2 ^/ ~
Lucida适合UNIX用户 * L! w3 ]1 N/ u% x
"宋体"适合中文简体用户;
2 Y* j0 ]% C4 e w% ^如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;* u* s7 I; }3 O3 h7 a! p
5 F( J; J1 r5 g* a0 R. w4.群选择器
, i) E+ }( s7 r1 J% c! m5 j# m
7 v5 c9 @1 e3 `6 @ U当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
, q; `' s, @% Y; M. a. o3 x7 k% g& o) l8 h2 l# ~
p, td, li { font-size : 12px ; }
( p' I- |/ \5 E) X/ m1 v就是给li下面的子元素strong定义一个斜体不加粗的样式
5 W Z6 X( I, @" h. T9 V: C' U0 u" J/ x$ ^, ?( j
6.id选择器
% B+ l3 g- w9 }) M" t0 Z, F5 ]8 s! J7 Q& k7 f x
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
3 k6 y; D) U" ?1 S& x; k7 P" e) n9 `% d
S3 w3 x1 T5 x, [# K然后在样式表里这样定义：
& k8 r% A0 }+ C
n) F8 o$ b- j% j$ r/ b: P# W& u5 r3 f- _0 T& Q! z
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
! Z2 _$ x3 L, K8 e% V) Y0 i. {* w. v! k
# A( f! M, _- [! V4 v0 u, C: s. uid选择器也同样支持派生，例如：3 r1 J8 y; _7 N
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
5 t0 S( i% u `- R
2 O {. x7 B2 b) Y6.类别选择器2 t$ m4 ^& C+ T8 |
1 ~* J4 c7 i7 S! O
在CSS里用一个点开头表示类别选择器定义，例如：. o |, c! M H3 k6 a! w, X/ D" k
.14px {color : #f60 ;font-size:14px ;}
7 }" _' j" f' q4 D! n, | Q8 t) _$ ^" F: E
在页面中，用class="类别名"的方法调用：
9 l5 j' t. x9 b( r+ b# j( R<span class="14px">14px大小的字体</span>
2 T, u _2 }, P0 |1 X
: c( I# N& n+ L _, M" L/ J! K这个方法比较简单灵活，可以随时根据页面需要新建和删除。
; D/ s# {6 x# Z9 I- y
" X+ D& o6 \" [$ B: T% I7.定义链接的样式6 J# N$ ~. ^$ t6 q
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：3 y5 d* ?# p7 L
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}- o' w% {2 j7 n3 u# |
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}# k8 v- e! z* |& W
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}; g, C9 }1 a2 U4 t# c
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
0 t$ ^6 e( M3 M J% K. S+ l以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
