|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。& {% H2 m! t0 E: a, |4 j4 H1 n
( L7 G# g# J0 a- t
1.基本语法规范% f1 W1 c; v) X8 w( }
分析一个典型CSS的语句：! d o' q; K5 b6 @
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
& T _$ t2 K( x; r1 G: q1 u样式声明写在一对大括号"{}"中； 1 Y9 ^8 j, q) T: @8 H
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
4 ^7 v. n$ V" M8 x"#FF0000"和"#FFFFFF"是属性的值(value)。
1 P3 B$ m0 o1 w$ W+ U
! l; Q+ U# T; ~( k/ W& Z2.颜色值
6 }2 g1 }; Q# l& b3 b7 }# s
* Y1 D. x q8 B% c9 \6 t1 |颜色值可以用RGB值写，例如：
6 M7 d* u. N% c+ {
: c5 D: h! x4 j& N$ o; x4 E/ y
+ j2 m: T/ N# {( Z，也可以用十六进制写，就象上面例子
; y2 }- P9 g: n& W4 l% E, L3 X* L, d7 V; i7 d5 h. R
& S! x3 x2 V7 W, V* w0 I如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。- H c, g: x9 ~. D7 z
' ^1 l/ @+ D3 P6 M/ d; q3.定义字体
' O( o" V: Q! m+ Pweb标准推荐如下字体定义方法
( [6 v4 B; A0 G. o0 X j% o* {! f2 j) @9 i( |8 H0 O
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
) [4 F, `7 ]2 @$ H" x' g1 T$ |字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 2 v' @$ b! Y6 I9 v l: _1 @; P
Lucida Grande字体适合Mac OS X； ! a/ k* z) ?0 G6 x9 v
Verdana字体适合所有的Windows系统； % M2 D9 r' O; _0 d5 O, G9 i- m
Lucida适合UNIX用户
; k9 e T/ j7 p"宋体"适合中文简体用户;
- @9 \- ]4 `5 |7 |; h3 e# l如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;7 o; x; N, H1 P r, s1 ^3 G8 p
* Q0 R9 {# ?% [$ X4.群选择器
7 q* R8 D$ F$ U- S0 n# F/ t9 e/ |. l9 a( ~% _2 p5 F
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
2 }# ]5 n |8 m$ W/ Q/ p+ X' c5 R0 _
, Z% M: w; f4 _5 v; X p, td, li { font-size : 12px ; }
% Q. l+ Z4 a9 U7 H; d8 a+ Z' X/ [就是给li下面的子元素strong定义一个斜体不加粗的样式- \! E; ^% a# f
, f$ q9 c8 p- n6 T
6.id选择器
$ K5 B) u; W' W$ G3 c) f# S
2 r. B. R/ ?7 N( T: X用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层' E T/ h' L5 v p
9 s) \" M6 w: s# W6 f; w% s: c
' Z0 S& O% M& r6 q1 c T( ~然后在样式表里这样定义：
5 x; q: w% {& s4 b1 h
2 R* V2 Y @1 {) Q# V, O
, n2 V8 j) o( |#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
3 _! K& M2 ?0 D其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
/ e, ]* a9 {; m0 }
3 e/ R5 d/ d' {+ ?: J6 u7 N. {id选择器也同样支持派生，例如：
/ Y: C: G7 u: V" Q _1 U' `' {# G8 E#menubar p { text-align : right; margin-top : 10px; }
1 u. a9 |& a8 z3 y' m这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
5 l! }( L/ S* T$ m0 i( F# S7 a \2 p! m9 U% |$ [
6.类别选择器% n7 O8 U, N; M, {* a9 S) K) x
# N. {' e% ]6 A( E! u
在CSS里用一个点开头表示类别选择器定义，例如：: e* n# @9 w/ Q1 |
.14px {color : #f60 ;font-size:14px ;}
. w5 A* `3 e9 J4 I, i* H在页面中，用class="类别名"的方法调用：
9 r! w: N9 `+ h2 f5 v. c<span class="14px">14px大小的字体</span>
( M& s- ^8 O, ~1 E
这个方法比较简单灵活，可以随时根据页面需要新建和删除。" x) E8 ~+ I5 V$ M, m
7 I3 }) `: F; F z$ O5 d5 B
7.定义链接的样式
/ S X |# Z) \3 D( b' GCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
3 I$ q& F: h }6 p0 q% c3 Ha:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}+ W* c# A' A* w8 Q
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}7 x) F1 `) v. H
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
% l# \0 r6 G% ~9 U; E# d4 Q" l% Aa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
1 Y; ^: D |+ v, Z9 b' e8 P% a) g |( E4 g
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
