|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
; J f- }' }9 K+ X
6 X% ?6 a3 M% J; D1.基本语法规范
3 P0 u: s: P C; _! d. z分析一个典型CSS的语句：8 Z" j: O- B. v7 V# J
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
3 D, d9 c0 P: O% m其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
- R% ~4 h. i* j8 v2 ?样式声明写在一对大括号"{}"中；
7 }7 r2 T5 x: R6 o) gCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； t. t5 F" u# r- O
"#FF0000"和"#FFFFFF"是属性的值(value)。* p: u. h \3 l" M8 i6 _
: B* m2 \/ G3 r
2.颜色值
& O6 p- P, i- ?$ e) w; V/ z$ |% [* K: u4 }, x
颜色值可以用RGB值写，例如：
$ Y9 E7 d" x4 j* [% D) h5 v p
% E. R& r3 ?) c9 K1 r4 o, w; s) u r" ]& t: Q' I
，也可以用十六进制写，就象上面例子& E' ^9 B$ S# M: e7 Q e! E8 H4 v+ T
9 H$ Q. P( L. T; V$ j. b) T" S5 y
+ j% o( c: @& S, D$ f& w0 H6 }/ z
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
1 Q) r7 J- B, x* M5 u6 s( ?" e$ n- x
3.定义字体/ }- a% e4 z `# |4 c
web标准推荐如下字体定义方法
5 T- b% S; j: W b( F
! d6 }2 u O+ e/ [- E4 M( F" n2 z9 K; Wbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
# u" k8 _% r; f7 k( ~Lucida Grande字体适合Mac OS X；
. D. F+ n, M5 [2 \ J9 s* @Verdana字体适合所有的Windows系统；
9 c; X% j7 W. i; f. ^' yLucida适合UNIX用户 4 B1 ]0 K9 F5 Q, V( J
"宋体"适合中文简体用户;
; c' d N# @1 Z: g4 c+ R如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;+ L8 Z7 E$ h4 V6 _
: k4 f) k( z6 _( e% ~0 b4.群选择器
8 M& H# |6 q% ^
: \3 F* u+ X- H1 o4 z当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：3 i, P8 F' E ^, |/ O( v
" x! |: C6 \" _. c5 R% A
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式
/ r" y% x2 z7 [: X; }1 a+ t
. M" B* E R0 A6.id选择器; `" L2 @# Z, i
" T4 f+ f; Y5 E* F- U用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层9 j& g% N. M6 I9 [8 v# E3 g
. V P6 | p% a1 y- ]7 X8 f. b2 R, ?6 y& K) Z( v2 Q
然后在样式表里这样定义： L) |- Q# N' ^6 I# c
/ {3 q7 E3 U8 K# _ Y5 ^) N! ^
+ G/ v0 x* t4 {$ y# x
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
H9 a+ E8 b1 X4 q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
- T- F- L ~3 Z
$ m7 |9 Y& L F) v8 _id选择器也同样支持派生，例如：
6 D4 a5 m; C+ {7 ~( D#menubar p { text-align : right; margin-top : 10px; }
4 i! [2 W7 I+ w" u这个方法主要用来定义层和那些比较复杂，有多个派生的元素。7 T, a0 R R" t+ n- [) [/ |
2 Q' [4 U: `3 U; ~6 ~
6.类别选择器
# A) i W7 @& C" C3 N$ D$ E* e7 {" i: _0 j$ P9 D# h3 i
在CSS里用一个点开头表示类别选择器定义，例如：
/ R, c2 z/ d8 I9 E w.14px {color : #f60 ;font-size:14px ;}
5 U/ f$ P9 d; f7 G. e1 V2 L8 t7 \- R5 X! g C+ I* I
在页面中，用class="类别名"的方法调用：4 b" S; \% d1 O' }1 ?
<span class="14px">14px大小的字体</span>
* s5 N0 r6 \4 ~, O
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
9 g# N7 a; k) L$ _$ b2 h
: r. h3 p' ]3 h7 N* u O' C8 V0 |' ~7.定义链接的样式
/ U& ~, q5 X. C- ZCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
! q" M6 h0 H3 s: a" @/ M- i; Ma:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
' A V- C+ m" P# Da:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}. m% X8 o( N% L
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
f8 |8 h4 T6 Ya:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. R6 ]! H7 V( M6 F以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
