|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。$ t1 _+ S, E( L* |& J
) x+ T1 v1 o* c8 s5 @4 h
1.基本语法规范
3 ~" L# ?3 N! D/ V! ]分析一个典型CSS的语句：
0 `0 P# ]# `4 ]1 k: o4 dp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 X* `5 G$ M/ ]5 V# s* l4 M) l其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
- {( l8 d) t# _4 n: s样式声明写在一对大括号"{}"中； 1 p4 c5 \% s* H3 j8 }
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
S* R, ^6 }+ I6 F1 p, F) b9 W"#FF0000"和"#FFFFFF"是属性的值(value)。& y$ }2 r" ~- Z% j7 G3 g6 G8 }; k/ m
" N1 T4 K- ^6 q. g, l9 b
2.颜色值
1 Z6 |* u, q, ^( n4 J' R: X8 y" q( y: W, L& w1 i# O- n e" o7 C1 s
颜色值可以用RGB值写，例如：7 R3 o, M+ `$ L( d" [% j
% T% F; p$ c$ a# G2 E' g. [# k/ g
2 c! N( [) P3 N3 u+ F3 |$ {，也可以用十六进制写，就象上面例子/ t0 A. z) y" |) i
; o" {$ A/ l' H5 ?8 D% O& R
- D* Z7 R, ], {如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。+ g. r: w; F# t" Y1 ?
- `4 c9 Y! I* V Y
3.定义字体
- N/ U0 N7 Q: T) t6 u, Jweb标准推荐如下字体定义方法 ^( l- B! b7 f& l0 ]
9 n) w0 {2 u" I* m/ M5 K% D
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
8 p" Z6 y! z# T- i' U字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 1 r5 s) l! i* @2 p3 |+ ~7 [: S0 T
Lucida Grande字体适合Mac OS X； ; s: t: L) E' ]8 p3 l
Verdana字体适合所有的Windows系统； 5 X. e4 |' |0 J& X
Lucida适合UNIX用户 2 E" R2 Y4 |0 d: k
"宋体"适合中文简体用户;
( a' A }% m2 n. l; k- C0 ~如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
7 G' |- y4 W' @5 u2 a; K' [% z3 S7 L) r6 P/ g+ p1 o# Y0 g3 g, l
4.群选择器. m, H$ v- g. x! W7 L) r2 P
: L5 U, I4 `6 p+ x当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
# ^6 j, V/ s' E
; u9 D; k; V- r% f p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式, p* x+ c- m3 k0 O3 D6 R* e
& @4 `: T0 d& b6.id选择器
7 a) o0 Q- X$ N+ C5 i, ?' B1 G# y2 ?3 O4 D5 l9 p1 Z/ Z; x9 g/ J
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层; }0 }; Z; E2 d' d/ I8 r. Y5 a
/ }+ T+ n3 l: l8 X- x: J I) u" U3 F( Q% `
然后在样式表里这样定义：% m7 v2 s6 V: u O! ]& t
! A5 i+ ~! e* p) ]- F" B% r" ~( f" j/ \ o, g, F
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- `5 X1 D. D- _0 R* M其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
8 A% Q) d/ c, U5 s/ {/ K' Y6 A' ]) `2 u) f' N
id选择器也同样支持派生，例如：
6 d( V. B" [' N#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
; Z5 [3 b6 `6 V5 c' a# B* l6 `; `# t/ `# W
6.类别选择器
% D" o$ ~) k% c) S }4 b6 Z2 W. p8 e7 I6 I5 i
在CSS里用一个点开头表示类别选择器定义，例如：
- H& [7 @ |9 S.14px {color : #f60 ;font-size:14px ;}
/ B4 H. J+ }! X- a
在页面中，用class="类别名"的方法调用：
/ i: _- O( e# \/ q4 i6 g<span class="14px">14px大小的字体</span>
$ i, l& E( c5 w; m6 z8 T6 C
这个方法比较简单灵活，可以随时根据页面需要新建和删除。( G8 t9 z) s2 l% a3 J- F ~ z
4 o* }" Z$ u. _# n$ J7.定义链接的样式
% C, {6 V# b, ^; a) |/ ICSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
8 I4 X, \) w* F# ~" [: \) l' ya:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}# ~6 t- K& m6 c+ d! g
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
9 {! m; x5 @2 j' f6 \: A) |) j ha:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
: H2 j! \+ l' t4 aa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
! P* s1 g% E: Q
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
