|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。% C' P* y& M! [+ D: W- a
* f% f6 `7 w; A
1.基本语法规范 ]$ a2 a8 S6 e
分析一个典型CSS的语句：
- u) ^/ D9 o7 W2 f M- vp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； / X" G$ i/ c: g# \) x3 S
样式声明写在一对大括号"{}"中；
! H5 J( R( @, M3 Q8 g! Y/ E1 t& s1 MCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
, E; _& s$ u% L2 h F6 i3 d"#FF0000"和"#FFFFFF"是属性的值(value)。: C4 h$ W; ^$ k, _6 G; `9 ~0 H& d
& K. _3 C1 U) q9 ~0 V* m, w
2.颜色值% A3 J& h6 y& L
: i1 d1 x1 t4 Q( ^9 |7 p
颜色值可以用RGB值写，例如：
4 ?3 [1 o, O0 h
$ T0 J; ?+ O9 B. u% k* a' ~8 j+ A% m7 h: s
，也可以用十六进制写，就象上面例子
5 _' g7 }3 ~1 M1 Z2 b; a- g. g
- A7 V( r* i2 ~
6 w0 V7 S: s5 q: C" |2 a2 c6 K如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。2 s# l: g: o' @- T
' u: K5 @" t& n0 c+ Z8 K3.定义字体
( s' y* m' P# b- O# k* Xweb标准推荐如下字体定义方法
0 F+ p+ i& E, P0 ~) R
" V0 i; H7 n( L$ ?9 ^* N/ @* abody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
6 x0 ^- }6 I" C# m( G字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ' k% k7 Z$ p% i: g# S; d
Lucida Grande字体适合Mac OS X； 7 [$ X7 l2 h5 a, {0 Q* U4 h" D( _
Verdana字体适合所有的Windows系统；
& `8 S( x# d: @: nLucida适合UNIX用户
' J/ G" L7 Z* w7 t; x5 k"宋体"适合中文简体用户;
5 B& ^: a1 W K4 o. b2 J如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;8 n: e, r) m8 n* G) V& n/ U
6 r; `) \) |! s( y4.群选择器
) Y+ x' i. J$ G! Z' d% _* u- w0 v1 j n* b' R3 f
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：1 p7 z/ ?7 w! j0 `
: E/ p6 _% {+ ]- V. |9 D' y4 A p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式, l* w0 R! s; k0 b; Y+ o
+ Y4 x0 V+ V( s& R8 t6.id选择器" @" V2 O( i9 O# S
0 {8 D1 Z, { e- x
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* ?9 e! X" \0 c" W. r3 a& i; h- j8 C4 x& ^
& O, H; i! m4 ?* v7 @. Q5 ~/ l& B然后在样式表里这样定义：
) U4 W( I3 N! d4 e" `) h4 c4 O% e" Z5 U9 I/ o2 d
& U. K1 p7 i9 L% L: n. z" Y
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- h" U0 O0 |9 ?) p: r/ i( U- {+ s其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
2 ]! p7 S, T# N. J% ~/ E0 N0 Y8 N: T' v
id选择器也同样支持派生，例如：$ k: U0 x& s$ I& ~% Y+ ^- F0 o
#menubar p { text-align : right; margin-top : 10px; }
4 n/ _% a. ~- \/ _这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
* Y# @, c7 g. X, @8 ]4 h
0 F' f; n6 o' f2 v6.类别选择器: D2 B; A9 @9 z7 ~# v9 H
8 ~7 k5 B' h2 X4 \( J1 ^在CSS里用一个点开头表示类别选择器定义，例如：* S; {4 Q& R0 n' H
.14px {color : #f60 ;font-size:14px ;}
7 T( D3 h& T$ a. v0 U8 Z1 e; _
在页面中，用class="类别名"的方法调用：5 S9 F, m0 g# Y) r7 U
<span class="14px">14px大小的字体</span>
# ] L) y Q' g$ c* Y9 c! S% w( y) s# t9 p3 Q5 j% Z% G: W
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
t% k; l) q* n1 D& N8 V+ h7 z0 r* l8 o* ~
7.定义链接的样式/ y+ o- b0 N1 T- p2 J; c
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
/ v4 z% G. `4 e8 \3 I+ {3 X: ^: W; r( Sa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 K+ p4 Z0 o: g. e% Z+ n
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
4 ]8 e; ?$ C- F1 ja:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}7 B0 x" N; Y V0 [2 Y3 ]
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
6 U9 \% M) N, w9 i: W$ U3 M. b
) E( t- B0 C8 G, u以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
