|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。0 z# y% u# n: W# P) B
o2 ?' S/ s @; |8 f8 ~1.基本语法规范0 y% A1 V/ M. a! I% _3 P+ F
分析一个典型CSS的语句：
1 C. ^+ J: F! ?6 `3 B' q( w; C1 t9 Ep {COLOR:#FF0000;BACKGROUND:#FFFFFF}
V2 K! W7 g9 Z/ [( I7 H其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 1 y' x: W4 q' S- T0 P
样式声明写在一对大括号"{}"中； 8 W- e( S: b+ h+ g3 b. N
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； / e0 e, C4 w5 ?& e8 N0 F
"#FF0000"和"#FFFFFF"是属性的值(value)。
1 L, c1 H# \0 B/ T4 `2 }$ {
3 |) Z n W7 e2.颜色值
* g% h; u6 Z7 ^+ w6 e! r8 U- o& F% i7 C, D
颜色值可以用RGB值写，例如：
[7 C) {& ]7 H( ~0 y7 Q J6 ^4 I, r
f! `0 F' r0 X ]' U7 _+ K8 R，也可以用十六进制写，就象上面例子. v$ u' T* _, R# u" @+ P4 N
6 v9 N* C# b% h* w- i4 z( A5 H
9 F* B; c1 o8 x6 E4 k- L如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。) |- Z# @3 x4 [) E$ ^0 A. w
0 M1 W+ J/ a3 ?) l+ }3.定义字体: ^0 |) i) O" u. m( @* d
web标准推荐如下字体定义方法* S& ~, G4 V; ?
% u. t! y0 f4 n# X
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; Y' a! R# x# F5 g( B7 [, m* n字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ' f' Z8 R! p$ V# U
Lucida Grande字体适合Mac OS X；
$ `/ n, a! p4 `3 d+ HVerdana字体适合所有的Windows系统；
/ P$ v! _, u0 uLucida适合UNIX用户 7 J' J# k% X& H
"宋体"适合中文简体用户; * h, m0 h* \+ b" i0 t% m
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;1 X4 ~; b9 h; L$ c" ?' ~
V0 h2 r, ~) T9 d" F% f7 v4.群选择器
z$ K$ B4 ?- ~. A4 I1 ^
+ O3 J4 ^' J( K当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：: s. U* r5 H, \: u, T- W
4 K3 ?0 G# t$ N! t( L( `
p, td, li { font-size : 12px ; }
1 Z2 S' e! E \; G/ V就是给li下面的子元素strong定义一个斜体不加粗的样式4 o1 w4 t9 D5 N, H
# q4 Y, L: ^! M+ M6 W1 ?2 Q2 }
6.id选择器& f0 P2 p' l, [" v
: X6 R- Q" d& {" \$ R4 X( @6 e1 R
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层6 F' r% x! V4 e
; `, G8 z, [! R& G! D7 ^" |
% r4 \' a9 i, E8 B$ n
然后在样式表里这样定义：: @- t4 ^. X1 J; p7 F
: ~. {% @( ^. K# A- v
; g1 S0 @) R$ R8 X
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- n5 |% u% Y S0 D: G! O @其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
$ \9 I: F9 U0 l0 c8 `$ Q1 E9 [. t( `. g) `9 Q5 F2 k
id选择器也同样支持派生，例如：* _! X# l$ ~* s8 `
#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。. v" J! s/ S9 f, J
3 @+ j6 [9 s# l7 j6.类别选择器
5 D5 T4 t1 y( x* \9 e# I% Y+ e* ?2 S5 D( E6 O* T" A
在CSS里用一个点开头表示类别选择器定义，例如：
; ~; |, N- N" G l.14px {color : #f60 ;font-size:14px ;}
4 X3 o$ z0 S$ D- B
在页面中，用class="类别名"的方法调用：3 I+ L3 b& ?5 I! O$ Q
<span class="14px">14px大小的字体</span>
9 }/ H" Y1 _; V' n& b
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
G) Z5 ?/ {2 m4 F$ t' c
5 a! f5 `6 @3 F% P8 b7 j+ n7.定义链接的样式
% F1 O J: r4 h# w# f1 y- }7 RCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
2 X$ m/ Z" M; \6 [, o8 v/ S" Oa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
; |# h- M( o7 k) ?a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}3 K. q* `, a$ b3 q* d2 ^# v' p
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
% Z. F" u1 }$ ta:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 m- D1 a' W* I: S: D& i1 c5 [
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
