|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
+ Y& B/ [2 p' ^+ Q- c3 R/ W% E2 w Z: _7 Q
1.基本语法规范6 e& l8 P4 y/ V, ]8 a! U
分析一个典型CSS的语句：$ l/ }1 _6 i6 S1 c$ ~
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& V# }" G3 V9 M8 U4 p" x其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； ) S1 t: T! [% P" I
样式声明写在一对大括号"{}"中；
( C$ }0 w: q; RCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； $ S% l- e \! K
"#FF0000"和"#FFFFFF"是属性的值(value)。. b8 |9 s5 o! ~6 P7 r+ r$ w
7 |/ f2 J- q: F! \- d1 X o F8 ~* G2.颜色值
% P# e. U A# C0 Y- N/ S8 @' f, b6 b! s& c& b
颜色值可以用RGB值写，例如：
0 C [; r2 [- U- I4 U5 u- K L+ b% a) e+ E1 B% H
0 P, C" W% ~' V- S$ p. k4 x6 h
，也可以用十六进制写，就象上面例子; \- v2 K) C4 s5 o6 d
: ^2 x* n4 Z1 H
. w! M" o& a) a5 D如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。; S7 _! I; Y" S% W4 g" a
: [6 o1 b t" f: Z. l4 u9 g
3.定义字体1 }9 ^2 E9 Z9 }4 f# y$ `: T
web标准推荐如下字体定义方法6 R; x' k- ^- U, Z
* s( f( Y* d. l4 K+ u
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
, l$ K- y) I% @% K1 b, h, k$ V& ~字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
) e( A9 F$ @' {( W G+ zLucida Grande字体适合Mac OS X；
: W7 X+ u+ ]0 A8 FVerdana字体适合所有的Windows系统； ( Z6 c9 ]: w0 w, }
Lucida适合UNIX用户 8 _& n t3 [: G* q
"宋体"适合中文简体用户; 7 R( B- ]2 y* Y+ q
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
H: i5 w) a& G/ F
" O. z3 f$ d C2 K4.群选择器
5 F4 V9 i6 S. l0 f
) E( B; A; E9 U9 l1 C8 r当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
, X9 ~' e% x$ b! t
, t! m& W: R0 p. u0 R p, td, li { font-size : 12px ; }
2 } ?0 f2 z/ t/ A% R& P. j就是给li下面的子元素strong定义一个斜体不加粗的样式
6 G( k( y* y/ g+ U
: w* H- o' S# p$ i6.id选择器
2 o6 Q: h% Y$ K! f) y1 }. `) F% h% v) @# e3 i b; H
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
, L( h8 {+ ?: ?4 q1 _) q7 q2 r# s. P) Z9 \9 \) ^
]- W( `; s, Y# A5 @" _0 L# P然后在样式表里这样定义：
) Z- z0 s/ V- A% k
8 Z( a0 T4 b# \) V7 V1 F* l$ B1 F# D- l+ m8 Q
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
$ e# x4 k2 j( c' a" ]. A其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
7 Z3 ?7 F5 q8 S5 Y' o
" E2 Z# `$ \9 y7 C* w9 Cid选择器也同样支持派生，例如：. H8 J3 h# c r4 o" T8 }9 f
#menubar p { text-align : right; margin-top : 10px; }
0 q( j" A) i$ l4 K这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
" A0 S& V2 i! {5 [7 u: Y! m9 V* n+ a: x' u' P, i
6.类别选择器0 M+ G) m. T: I0 X0 R% I4 ?) j+ l* z
' F! A) V& v' k2 |7 K( k" J$ v在CSS里用一个点开头表示类别选择器定义，例如： K! X# p' o; J6 T* h) A$ k
.14px {color : #f60 ;font-size:14px ;}
) e6 o. c; I F+ C
在页面中，用class="类别名"的方法调用：
( _ `$ f7 y7 L$ d& U<span class="14px">14px大小的字体</span>
. F' }3 e1 d/ X, f: p- p! j
. H! ]6 m7 ]/ B# \7 f3 }4 H$ E' |4 m这个方法比较简单灵活，可以随时根据页面需要新建和删除。2 M. r1 C; r# ^9 X
. X' c: b. \8 B$ ~7.定义链接的样式
! m T3 N) D9 |# v0 l$ ~3 TCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：$ T& z6 |" D! H% A; g8 h: U/ m
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}* q$ k# {. j, M- T# y) N6 C
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}; n6 {( f1 p+ ]5 Z2 h. Z' H( _. \
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}: f; }, k# |% m% i( R: l
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
4 l3 Z- M) e+ H/ U2 H以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
