|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
% i0 Y! x8 E; U, j4 s' M
5 A5 u/ X- \; y H1.基本语法规范- q& I& l7 _/ N( }/ `
分析一个典型CSS的语句：2 l6 C. [* K2 X( _+ V% }
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
" v) l1 O$ N8 S: N其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
1 z' K) V7 _9 y) c+ }2 z) w样式声明写在一对大括号"{}"中； ( t# p8 k w% b! e
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
( o8 r' B$ N. n6 e- y" h7 f"#FF0000"和"#FFFFFF"是属性的值(value)。
/ `. X0 ], `' D+ S8 K! J- n
1 E: B9 h" U0 r; V! ?9 c2.颜色值
5 q. C, _9 O% c* t) l& d. }+ f4 I4 X4 ]1 `/ Q
颜色值可以用RGB值写，例如：
g8 W) @* q9 T
$ Z5 `2 p; I" B5 @3 t* `
7 T& G7 \' I; S; @$ E，也可以用十六进制写，就象上面例子0 t7 w, i9 Y! E3 [
$ u0 ?) g1 u4 D- |1 h1 F8 R
$ i* Q5 [* ?0 ^% A* t如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。7 O% j' Z" I. \# q* H5 H
/ e: `2 e. u! b% D l1 K3.定义字体
" S& Y6 ^7 H1 s6 Iweb标准推荐如下字体定义方法0 D3 o4 }5 S, M7 G7 \' l- `1 u, d, x
8 K& O3 L* `+ Q+ g; ~body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
5 l& |% }" C8 x) k字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ! L4 m2 k. h1 ^( f9 P( _) v
Lucida Grande字体适合Mac OS X； * f! ^. y b7 v' i, `% r
Verdana字体适合所有的Windows系统； 9 F! |" ?* ]' j, y9 T: C) s1 f4 t
Lucida适合UNIX用户 $ X) c! V+ G8 f: P( \# x. a
"宋体"适合中文简体用户;
0 w* S5 ]3 n& X* W. h. W6 K, b如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
; L$ F) D y) D. u1 b1 T- G$ @' {4 ^% A: F% l
4.群选择器% J- u8 k1 Q, ]) ^5 R
: o1 L8 b. K0 s/ r( p
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：: X4 J8 q7 k1 u$ k
$ t% N% w* _* g1 y& m p, td, li { font-size : 12px ; }
/ @! t" a( `% N8 E6 c' e/ T+ p2 W$ y7 {就是给li下面的子元素strong定义一个斜体不加粗的样式
* j/ o3 d- s2 `* Q. V5 Y' k
) N6 @ h' l# k, ~! J% w" _5 X6.id选择器1 t" c! R1 w9 T! d4 \5 A% }
$ b' V: [8 @% z5 s
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) Y" z' d8 |5 D. u4 `; B/ g, K6 X B0 x7 P H) i# R, o
9 j0 t+ G8 ^* y% w- U) o) N$ Y m
然后在样式表里这样定义：4 q% {& ~2 ?) ?. q! u3 {
; W. M1 [" Y, W$ W* q
- f' @3 J0 U. j$ h5 A, c6 Q
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
, X' l H0 N4 F其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
' _& F% E4 y2 R) D6 M
; m' L" \& b( P7 y0 did选择器也同样支持派生，例如：
5 f8 G/ F' }" [2 c8 G3 g" ~#menubar p { text-align : right; margin-top : 10px; }
/ q" _& y, u7 g# }5 V4 U' y这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
+ _# I8 q0 X2 E; d* X5 E4 G
6 C+ `- j# _4 S1 \) v2 F6.类别选择器) a: _' ]" m; a+ Q
3 e9 T0 s( v7 M( x+ c5 D- u/ n在CSS里用一个点开头表示类别选择器定义，例如：
9 V$ V; P: e4 \- }.14px {color : #f60 ;font-size:14px ;}
+ ^; o6 z; W, F5 L) F- D' W: q
3 D, o5 {* G0 Z: u+ \' k2 ?, S在页面中，用class="类别名"的方法调用：. y0 v& ?$ K" e8 Y
<span class="14px">14px大小的字体</span>
1 L& ]3 C1 _2 I( k
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
# m# i! U7 L& P! X/ ]9 m3 }! r1 v( s8 b5 ]- j
7.定义链接的样式
- C, m# }" @9 f; DCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
+ p* g1 e' f3 n. x5 Da:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
: v3 [, C8 w- k+ w; J" ~a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
( e) p2 [1 c! \% X& U5 Fa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
3 m1 u! q1 _. \0 S# Y8 sa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 D% S+ i3 `1 n
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
