|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
" b2 I9 Z1 j. s# j& i2 N" r3 K* j4 s
1.基本语法规范( w+ W0 F# Y8 M0 x$ s2 i8 n
分析一个典型CSS的语句：
- f7 ]9 g2 z9 E7 e4 m2 P' f, Dp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
# V0 ?8 t5 M0 j其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； # I& ?) I3 n% [; P, L
样式声明写在一对大括号"{}"中；
: v2 z2 f. W( d R, y0 q$ uCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 6 }# Z2 W" O, ?. u
"#FF0000"和"#FFFFFF"是属性的值(value)。/ K, O0 ]0 b5 h# h. ~7 W
7 e y4 K/ U% H# \' V! [2.颜色值
3 S9 m' r k5 L: m& e' r' E2 d, E/ }3 X, }: w3 W8 l
颜色值可以用RGB值写，例如：
$ u7 R3 v: w4 U% ?+ u4 q! t P3 M- K- n- O; x0 q' W
y. x3 Z2 z) P: ?0 b; A6 P" E/ t，也可以用十六进制写，就象上面例子
, w) _! Q/ L z `. l' n- E0 ?7 ?% }( t0 l
2 I$ m4 ^3 p, m) f如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。* n5 P; G! K; H) Q
^, F" j2 B2 z0 K2 N$ ~3.定义字体5 P" y' P; d4 v+ b9 C9 l
web标准推荐如下字体定义方法
# t: s0 J8 y/ i, W5 v0 U9 F: R" M( F; U
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
0 G' @4 L9 u% u9 j字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
H% [ q0 c' K9 L- B* k% }2 RLucida Grande字体适合Mac OS X；
5 K) p n, j$ j# F" AVerdana字体适合所有的Windows系统； / f$ g! w9 L i( c; J1 T& s# k! p4 n! y
Lucida适合UNIX用户 ) j9 `- u) a8 e! @" M9 F+ L
"宋体"适合中文简体用户;
) J/ q( t3 _# i! w c$ I如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
4 @; a4 {6 {- z+ }( {
& \0 B. o0 T7 H( G% B {0 S# `( M4.群选择器0 t; s) w* A: i& ^
: R2 s* k/ z: u, z0 u当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：% i9 E; h3 ]/ J- H
$ d# w8 W0 N; _" O4 M/ h# u# v& L
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式0 r) L. H- f3 m3 M8 h. u# R
7 z: Q; g4 m2 h1 J) o( l$ P3 ~
6.id选择器
& o( l# K" F6 [. A, _
8 I R1 M5 J3 n8 B# n8 ?9 J用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
+ w- Y+ o. U+ c1 P: O$ _! }
- z9 G: F% l7 u: N( X3 L1 f) P3 l
然后在样式表里这样定义：
' I3 Q3 G0 I% v! B# a4 L0 r$ t3 x7 y7 V+ u; B
) n& T2 I; ]4 m$ I
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
$ @3 U; h% F7 l$ d) r* i* b3 o Z* G$ N
id选择器也同样支持派生，例如：5 i* [- f6 T- l9 R# f3 O6 ]) B
#menubar p { text-align : right; margin-top : 10px; }
* q$ k! T7 h0 l e2 S这个方法主要用来定义层和那些比较复杂，有多个派生的元素。( o3 S* G0 X: c B
+ g: o" i3 P3 Q2 N: T4 I6.类别选择器 ?$ |" g2 W/ j6 G6 L$ s) e5 z
' q' S8 g1 a7 b% T) H! F& w
在CSS里用一个点开头表示类别选择器定义，例如：0 G( R: v& @8 \3 z3 F
.14px {color : #f60 ;font-size:14px ;}
7 j& K; p; B0 g9 t ^8 y
6 C0 P' M; [6 _; D& X在页面中，用class="类别名"的方法调用：
/ B" Y* B7 H& X$ h<span class="14px">14px大小的字体</span>
2 c0 L6 a3 f0 z" @
7 N* k$ K* B" ~# b0 ~: h; e这个方法比较简单灵活，可以随时根据页面需要新建和删除。
9 R; R( R1 Y# i
) X* g6 d* R% U, g$ }: Z8 R0 z! ?7.定义链接的样式
0 I: u0 L7 ?% cCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：2 U6 c% C6 o! G& u$ ?( W
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}+ N) m+ J2 t: r% z* o9 c
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
9 e0 S4 W: B+ Ca:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
7 T% q( Q0 W% J) v/ Qa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ g4 a6 E) d1 }% T
+ b+ ^% K/ P! j2 q* v/ N; j! q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
