|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
1 y9 p( \7 L$ v! X$ s' t/ h, a) ?9 H b! l7 D. f
1.基本语法规范' ?! `' e3 c+ U% v) f
分析一个典型CSS的语句：
0 n) v+ g5 S( \6 e4 T9 Rp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& b! ^# F. ?# N; J; V其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 3 K. E) S2 X+ g. z6 P0 U
样式声明写在一对大括号"{}"中；
d- P5 L# C) L& WCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 3 z, b/ M; f: \! p
"#FF0000"和"#FFFFFF"是属性的值(value)。
* m! A, m, e) L7 T( `+ n) g+ W
( g0 R' f2 K/ h4 c4 F' k* O" L2.颜色值
. U! T# t0 p8 X# l* o2 w0 ?# T! M, `( B& C
颜色值可以用RGB值写，例如：
) g! B& e8 |0 G6 l. y( l y7 z
8 v- X# \6 G5 ~& x* d
% P( @% Y( p4 E8 s6 v2 V5 y，也可以用十六进制写，就象上面例子
: ^# I1 L6 u6 ^! Q$ E
& E+ ^: Q- [( |4 y& E
1 H& A3 d Z) `1 W& ^- q如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
( H3 Y, M& h" `& @ A& r" l9 t6 B$ ?( F; H
3.定义字体
' J2 {* q% a( cweb标准推荐如下字体定义方法
3 h% e. u ?3 `/ f( J' V2 N
1 W: e' d3 \9 X( R1 ~1 Qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
& E0 Q1 q$ H# F( l) E: }字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
3 _, C( S8 {* J" A4 {Lucida Grande字体适合Mac OS X；
( e; j2 \+ Q; m' p$ O5 zVerdana字体适合所有的Windows系统；
9 _$ B" ^' J3 _5 s# |Lucida适合UNIX用户 ; F" J2 D3 d6 o) c. }7 N
"宋体"适合中文简体用户;
( Q! p: A6 {+ r; J/ w, }如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
, B& L4 u) B2 k& o% p
% C3 z; F! b: d, \! |% i1 @4.群选择器
- X( G0 F1 o& K, G7 f+ J4 F3 ^9 C& m. m5 ? }! W
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
0 j9 g, V) o4 n8 F0 e0 q2 C8 p
5 C+ t6 s1 }0 D& x. C p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式0 P$ e6 |) E* Y) k8 `
$ A) I# [# K+ R% x' u& h5 T
6.id选择器
! n1 S7 X4 i- o) [) |* P9 O1 q( I$ y' Q+ `
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层6 j* J9 `1 y0 }. ^8 p
. E& s9 f4 E" W6 ~; }6 f8 D4 M3 g6 O1 N* O: C% ~$ E# d
然后在样式表里这样定义：: |. y1 f* g/ F9 _, h) d
0 _3 x, I+ m. Q% X+ Z9 N9 ^6 {4 n' Y9 g: r9 a; X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
" p; u0 F) T: j$ v
+ M8 Z9 _9 m; \5 Y p* m- uid选择器也同样支持派生，例如：! V9 i# \* [$ ?& U. B1 _) l
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
7 u& _3 C) S( S8 j8 l8 w+ Y; o2 t" L1 Z
6.类别选择器
9 m3 k/ j- e; `9 E) D8 q% F$ J0 \4 T
在CSS里用一个点开头表示类别选择器定义，例如：* Y. [& S2 l5 `
.14px {color : #f60 ;font-size:14px ;}
3 I: g/ a8 M8 p! _在页面中，用class="类别名"的方法调用：. \' A' O0 [) D2 b
<span class="14px">14px大小的字体</span>
$ k {7 G3 q* [9 h# m% ?- t- y/ T3 m7 s' k0 s) e
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
3 l& ?9 n/ A, q* G$ d0 M9 B; F+ w
7.定义链接的样式
3 W; q3 d0 T. ^% r; B6 S$ GCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
`) z9 F1 y4 k. c% k) [2 H+ @a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}1 r5 t6 W w: ], M& L
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
( u; X( X$ e' ?4 qa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}# H$ z$ k9 ~/ e; L8 k/ s
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
* S5 f- A: n! V9 i5 i g2 D
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
