|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。5 ?7 C* L9 j1 J2 M
" [2 U$ v3 x& L0 k1.基本语法规范
( h- B6 w5 {* X$ f1 c分析一个典型CSS的语句：
& `0 e. E2 w9 r6 A- m" Vp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； . r) [9 T& J& t; C
样式声明写在一对大括号"{}"中； ! ~# g2 Q; Z- t/ ~- G! \; N
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 0 l' m$ ?2 Q1 ], w6 D! O% W& t
"#FF0000"和"#FFFFFF"是属性的值(value)。
4 Y) ~* V+ x! Q5 Z8 P
" a% v+ N7 _) H9 U2.颜色值
& h, u9 f# f: R- F
0 W3 l, }' Y) d6 l% X" d颜色值可以用RGB值写，例如：
! A' W9 j) H1 r- R
, P( l5 M! [, r: b: q. F8 u: |, h ~2 _2 v! b
，也可以用十六进制写，就象上面例子( c0 h4 Q) [7 y: g2 ~
. D0 c/ a( Z9 u; A& H; x& B9 S Q! r: r( U
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。5 r& a3 h. M, ?; A
) E% }5 t% f2 D
3.定义字体
; } [6 n- k8 v3 j$ Z6 L! [web标准推荐如下字体定义方法
- \3 x( r0 i6 \: h* m! B8 Z
5 z: I, `- Q2 I. e# I2 d4 obody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 4 g Y% H3 _6 P, Q; W8 U
Lucida Grande字体适合Mac OS X； J# z- ~/ Q, X( V' v- n. Q5 h
Verdana字体适合所有的Windows系统；
4 T$ x7 l/ x8 E7 NLucida适合UNIX用户
; Q9 g6 |4 G! y1 N2 A! C% l"宋体"适合中文简体用户; 4 v8 D7 A0 C8 ~* D. u* x! `4 J
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;. j Q) t8 c$ t3 _' K; {' C5 i
6 N' M3 W9 r4 G: B) O
4.群选择器
' S% V: T, q5 W( A: X: O, G; A0 `# k. d4 O7 E4 ]) H! \1 W
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
$ f8 t+ \8 V4 k6 m/ q( S; m9 S# ?5 z5 p. v
p, td, li { font-size : 12px ; }
! b( O- w L, l* P% L l就是给li下面的子元素strong定义一个斜体不加粗的样式+ z, _! `- c3 H+ P' t& M
0 V9 t, x* n [2 Z$ o
6.id选择器4 f/ B3 S5 j/ @& p; ^
4 j8 t3 W0 ~* o) [ X
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层- ?' s; w7 |& L2 {
; \0 {& q" n6 u8 N) D
- j4 O' h6 }1 R4 n" E, K然后在样式表里这样定义：
8 l ? W1 X% T6 C4 I' Z' f |2 {" I8 @7 k
. e5 Y* T2 C) r2 |) b6 ~' Y
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。+ f) X0 M0 M# |3 w
) e" i; b& I8 t& [9 h; l8 hid选择器也同样支持派生，例如：; o) }" \6 [% Q3 O% m
#menubar p { text-align : right; margin-top : 10px; }
* n, ` t5 y7 l, S/ q; L7 E这个方法主要用来定义层和那些比较复杂，有多个派生的元素。) j* E% m2 ^* h i2 L
9 g+ x: F" g$ |$ e6.类别选择器
|+ N6 @. y/ Z8 w8 b. b( W/ z& y' T2 `& G% o4 g# y6 n, o
在CSS里用一个点开头表示类别选择器定义，例如：, l, t! q4 N K0 K: {9 Q8 J
.14px {color : #f60 ;font-size:14px ;}
" U; Q1 ]/ h+ B/ K/ N& f7 o! k在页面中，用class="类别名"的方法调用：
t9 i: b y( L2 `# x5 F) Q<span class="14px">14px大小的字体</span>
Z$ W% f H/ q. s3 F2 C# f% O% A
1 [. ~4 z; B0 @' Z这个方法比较简单灵活，可以随时根据页面需要新建和删除。/ B" p; L( k5 t7 {9 f. v: M: {: X y
+ I- B J$ {6 M( B) O. n
7.定义链接的样式6 v6 C9 p* `9 Q( B' e. A8 [
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
, x5 O, q( G" B% ^- c. k/ sa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 r9 w, z+ K+ h' \( S0 y1 Q0 I+ ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
4 K; j7 s% U; y# ma:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
6 y6 V( {5 ?% u( l- K+ [: a, W sa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
" B& V2 E. u7 E1 P( N+ J5 \ n; s' J
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
