|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
( ]. u( l. J s6 T! l6 ]) }% U- b& g3 ^& F1 }% B1 U
1.基本语法规范
: K$ j, { a( P分析一个典型CSS的语句：
. z5 H: q! a$ Up {COLOR:#FF0000;BACKGROUND:#FFFFFF}
5 }$ V- B, }: b其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 9 [6 b" A; |; x+ H8 {
样式声明写在一对大括号"{}"中； ! l) e2 V4 |5 P) s7 M( q# k
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
' P5 K5 `7 E* D"#FF0000"和"#FFFFFF"是属性的值(value)。
: l/ Z: M0 M3 _; W
0 m' A! w$ P) c3 t2.颜色值1 c: I. Y# a+ g4 K6 u1 }
- x- N( S9 i+ l s0 V
颜色值可以用RGB值写，例如：; w6 I. B& q) n8 T$ C0 h) i: ?
* o4 D* _& h9 }" l% X6 ?0 L4 P
& C0 M9 P3 \9 U* {9 T9 K0 S) Q，也可以用十六进制写，就象上面例子9 Y4 ?. d3 y8 B% C
. g. S! R6 T- E0 J
3 G. t a- [9 t( s" f
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。8 f% Y: H: p% v! O( X" O, T
3 b: `( o6 |% B* g/ e
3.定义字体& v: l' R$ y: J6 i8 ^ o- B% U3 A
web标准推荐如下字体定义方法' B" L, H1 n$ l/ w6 D
6 f x6 ~8 l- d4 b, U
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 1 n' q: w2 p. ]
Lucida Grande字体适合Mac OS X；
$ O) _5 t2 j, q* r1 V2 X& e3 iVerdana字体适合所有的Windows系统；
$ H" q/ Z: M/ ~, yLucida适合UNIX用户
7 {+ U; O* p- }5 D"宋体"适合中文简体用户;
8 E+ Q$ _$ L! n0 w+ G3 p( t, n: m如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;' x: }- o/ R0 b/ Q7 S% C& F. U. X
, e+ {6 F0 v4 Z* q
4.群选择器4 r! i+ U' Z$ J2 N Q& k" k
/ U: s, `* ?. K S7 a0 }当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：9 N8 u! }2 p0 i$ h9 `
) z1 q6 K- X0 m' L
p, td, li { font-size : 12px ; }
, ?1 x F h, i5 Q5 n* d就是给li下面的子元素strong定义一个斜体不加粗的样式; e+ N* w E! m( `+ a( i
5 u9 Y8 G V* W5 B0 R! } h
6.id选择器1 Z& q, V4 e% b
( V% ~+ L3 K7 y7 U. k) b& _用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
* z# D# v8 z, s% ~" k3 c) u& l' ~! l0 A6 o8 F S2 [" i: H
- _2 e* V* J: E( V: L然后在样式表里这样定义：
; T3 f P! E) I% b; g+ c
5 L8 `* [5 V' \
( d& a" N; F" n+ }& o* r- a6 {#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
g; d7 L6 z/ @0 j" m: o+ {+ I1 Q% W: Q9 s) s0 T M+ Q) V/ H
id选择器也同样支持派生，例如：' ]7 x/ W" v, U2 g
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
7 Q- W+ N' l9 L* P8 \5 }/ d+ {( s! F) a7 r, e5 t
6.类别选择器5 i' C3 s8 `0 s6 H2 k1 ^" K
; R! ^& Y9 N: h$ P; @4 W) j在CSS里用一个点开头表示类别选择器定义，例如：
( ]( U+ m% }. L1 q4 W.14px {color : #f60 ;font-size:14px ;}
" d7 q4 N0 y/ I, V& s
3 U# u& p0 P& R& l在页面中，用class="类别名"的方法调用：
2 L4 S& _* v, _5 F<span class="14px">14px大小的字体</span>
& i# V9 l! y1 H l) w% N1 u7 j, W4 x* o9 e$ F7 K
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
+ Z- P8 n" @( s6 V9 o
# Q: k. r6 a4 T7.定义链接的样式( v0 Y4 s9 ]5 c! x- y. {
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
9 ^6 R' Q e2 }; @7 k P' ?8 ^a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
" O9 R& Y9 F; K! s- F' Pa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
* k- c- y" y; N" z. G+ F/ oa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}9 v2 k" v+ F& u U
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
' m% V4 h* P9 C+ I+ V4 m8 {
* x" u* g" j- V! u以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
