|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。8 Y. J6 e" A: F) f$ h
- r+ b) f- A5 e ?3 K2 {5 J1.基本语法规范$ R( g' T! b, f% H7 @9 T, N
分析一个典型CSS的语句：
+ Y0 E0 S) {0 M* n: m3 R* Tp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
% x5 i0 M+ t/ f0 j其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
$ |# ?# Q* l, q; k' V8 V3 a+ ^样式声明写在一对大括号"{}"中；
' V# X4 O! a3 {' q3 H5 `& v# JCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
% k8 Q$ ^% g7 K4 ~"#FF0000"和"#FFFFFF"是属性的值(value)。1 M2 y1 h& N+ \ n+ Z* B
% r7 q( T/ I5 A F
2.颜色值
6 H6 f; c$ m- P/ m0 o
9 ?" _& k0 x1 x1 E* J' P/ Z颜色值可以用RGB值写，例如：
- {" Y! o0 ~& L2 }; m# m
, p: T+ B) J D2 A( T% d0 L( k: m+ k" |2 ]! O
，也可以用十六进制写，就象上面例子* D7 e, Q( y0 Q0 B, R7 m- O
! H+ T: O0 h, J) k4 f. @- b. X! h, O: g! H/ L7 @8 e7 d, o
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
7 ]4 B( i- {3 ~6 y3 G' j G
7 R( q) G( u5 _* M& z) `7 B4 O3.定义字体
, o; p1 G9 ? Eweb标准推荐如下字体定义方法9 j% b7 d$ k0 r% ]) r0 z
" A4 J9 h2 c' |1 r" k+ xbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
* P, K8 Z: {, n, y" p字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
1 m, t4 B/ {' O. jLucida Grande字体适合Mac OS X； 3 G7 @) P: O. \' d6 P7 ]
Verdana字体适合所有的Windows系统； 4 Q1 t) T- N/ M9 j5 v% T( h
Lucida适合UNIX用户
: g& c" V' M1 ~" Q g"宋体"适合中文简体用户; ( s+ T( u* E1 L/ c
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;$ u4 Z0 z; L# l$ V: M7 J5 q
, Y1 |6 R( U( V) U9 t W9 I
4.群选择器
5 e. {0 d0 R) J; R- d6 n# j
# }3 a* @- D* a$ Y当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：' h# E9 P9 x; \/ t( p8 B0 b) B, \
5 R7 i v2 d$ T8 a& j9 \7 P p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
' z# a) F8 S; H3 s" Z/ Q3 W% I) E' j- c; c8 C
6.id选择器$ Q+ B. z, L' i, Q) H, X4 b
z# B* f. i. x$ s4 _- L7 c用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层) ~; ?, ]: W: O6 u3 i# u0 T
& I& G* q3 D6 w7 t4 e$ Z) f
7 f' A" G( q6 s/ x$ `) [; |
然后在样式表里这样定义：
- U: F; _* A) k3 s6 d# T3 J9 |
5 q/ D5 p y) U6 b
- x4 E/ L) ?% a+ n+ i#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
. Z4 |8 `% M3 V, c- W! Q/ G8 a7 X
) {$ N) H9 j0 ^0 l6 aid选择器也同样支持派生，例如：# o" o9 g) {* R' T4 f: D I
#menubar p { text-align : right; margin-top : 10px; }
$ Q' o5 ^- j: l0 q# X1 b这个方法主要用来定义层和那些比较复杂，有多个派生的元素。. D1 d) O K4 D5 v
8 @. S- D. c3 m1 Y b/ V
6.类别选择器
% `# r5 ~- K4 H1 S- A- E# P& n# x9 a7 d
在CSS里用一个点开头表示类别选择器定义，例如：% m5 e+ ]$ v v: O" ^5 \6 `) J9 y1 ?
.14px {color : #f60 ;font-size:14px ;}
{$ {0 U+ |5 l) T
. J0 Z) d3 G# z& n5 V" i在页面中，用class="类别名"的方法调用：
5 X% r9 ^) P% h$ I4 o<span class="14px">14px大小的字体</span>
2 _( i Q6 X) f2 z; \% k& X9 k这个方法比较简单灵活，可以随时根据页面需要新建和删除。9 ^1 `: X7 j) m) ?) B4 L
9 m v( K2 D4 u. F( |) |1 l |; j
7.定义链接的样式
) q: ]) d2 @) F2 U! ZCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
' O& }) p: I3 n- z4 |' a1 ^, L; Xa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
$ N1 B! l* F% [5 m* \0 ta:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}+ V. b( [0 o) |2 F
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}0 @7 l3 L s# e9 {
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
) r a( P! Z$ y! X) |
% ?( }+ W; D/ Z; e$ |1 [1 x) W( X3 F以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
