|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。/ ~2 s5 k/ @2 Z, y, [3 S! s" b
, J- Z" z/ [+ o" d! p6 u$ b. \1.基本语法规范
7 L' C1 l. s2 ?分析一个典型CSS的语句：2 i. J; r, s! t1 O3 F6 V, {: u
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
' g9 p3 X* ?" f' F! [样式声明写在一对大括号"{}"中；
H8 r" ~0 `& P0 @0 G) [- FCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 2 l/ T# E4 R# t! C" r
"#FF0000"和"#FFFFFF"是属性的值(value)。" p! m( z4 {# b; K
; g2 L, ^! ]5 J0 Z d5 B t4 D2.颜色值
* W( S3 z& J) M& y6 e7 Z
4 d% d: p2 F- j4 S, R$ P颜色值可以用RGB值写，例如：) V& b3 E7 O8 g9 J6 ~, H
8 C8 E7 \, ^1 C' l* q
/ n& t4 E3 t4 D# Y0 i) T+ A* k M，也可以用十六进制写，就象上面例子3 C: n8 `) E# w% ^) d4 ]; Z
3 r' B2 r3 U, r+ p5 j$ A
) L" x2 j2 o2 w0 i如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
; x/ s: n j" P$ {# p7 U
+ M7 M5 q% }) g3 y4 c3.定义字体
9 z* C P6 L6 B) [5 s( p! jweb标准推荐如下字体定义方法
/ c* s+ V) s* a) H9 R8 }" M
1 E0 i. g8 U+ u* \. w* A% Tbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
" M' l, q. L0 O字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
* u, S$ n1 N9 p6 mLucida Grande字体适合Mac OS X；
2 I. ^) A) O, U8 K" g/ M8 |! cVerdana字体适合所有的Windows系统；
7 C3 p* E& c; U1 x# mLucida适合UNIX用户
8 ]2 N8 h4 c1 F1 M; O- I"宋体"适合中文简体用户;
4 ?/ h1 F$ \: I! m7 F如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;4 o; B: L( q# y7 e# N* A3 ^/ q
, Q; e2 @6 z/ ?' b4.群选择器% p- c7 K k5 I* v$ M
M% d% L7 d8 O6 z) j+ s' ~
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
' N0 k, o* {- T* } r# h4 x" C; X6 g- v" _& j* S
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式% c4 w! ~: G ^+ s8 T# f
2 @* B( E: l, o7 d7 L6.id选择器
- S3 l5 A! Y4 X4 C: D$ A+ a" N' [+ ?9 N; g1 F- e1 V
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层$ o. n$ ]4 N$ X. K( n& A
( O0 u! ~/ v, \& @4 \3 m8 y5 v. \
8 `' F3 m2 v; v8 }% c
然后在样式表里这样定义：
8 A0 R) p+ ~! J7 p2 D: k2 s
: I9 c+ m2 I! I' i7 a! t# G9 u1 V' N1 g k: h% f
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
( j- B. U' W& K' a h: H1 k2 c其中"menubar"是你自己定义的id名称。注意在前面加"#"号。. j. O, X: ]! \2 `1 H3 j! f& f4 c/ @
7 ?6 ~& k0 |# G6 G. E U' E0 \8 u0 Aid选择器也同样支持派生，例如：
) L7 j( s: |) ]' ^9 E# `#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
, ~3 ^# m+ r3 |# a6 m/ x. ?; q# ~1 Y" m
6.类别选择器4 r% k' r5 A% @1 O0 C$ O
: k4 a# Z1 ^, l* |
在CSS里用一个点开头表示类别选择器定义，例如：
, u' R# s1 r {4 Z& v! k* ^0 T" L# J.14px {color : #f60 ;font-size:14px ;}
. y( }7 K" r9 M8 S# I6 x" L
, J# f$ K, B& R8 ~: H. ?在页面中，用class="类别名"的方法调用：# g U9 i" C v# P! w) E
<span class="14px">14px大小的字体</span>
4 `0 j& P4 r* O2 a8 M, j' {
B5 h8 ^' _) r) P这个方法比较简单灵活，可以随时根据页面需要新建和删除。
' k8 ?/ K' P- ]& j, N, V0 j
6 l7 j) j% f7 }% [5 k7.定义链接的样式. Y. l. x9 H& M9 z& A
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
' [6 c" t8 z9 G7 n5 U' va:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}; k. D D/ b& S- E5 Z1 X1 T
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
( M0 R: J M, Y6 o) ^a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
* [, l l5 r& ?9 l9 \$ da:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
) l1 ?0 X4 A# z: z1 Z% v5 y% `6 l+ Y+ Z8 H+ T: x" D
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
