|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
5 _! w6 b" J S3 w' z( Q3 i3 D% Q' Y( z5 p# U$ r
1.基本语法规范/ C! G6 M* R, G
分析一个典型CSS的语句:
+ w4 n4 `7 D2 g& op {COLOR:#FF0000;BACKGROUND:#FFFFFF} % q' y4 D' O2 C7 X `/ R$ d9 T& s
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
9 @4 c3 K6 [' z样式声明写在一对大括号"{}"中;
' L9 T9 ~& k+ s7 FCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; & M z. ~) f3 W2 p- h( B
"#FF0000"和"#FFFFFF"是属性的值(value)。
1 x o+ q& L/ R% b$ ^- x: ^5 M7 W+ G
2.颜色值
2 f- T" s# j7 X( n/ E* x$ H* k% z u5 @
颜色值可以用RGB值写,例如:
9 v# `( U8 w0 `2 ^( K0 n, L3 a8 [3 @+ o% L$ l/ O3 `7 k* V
6 v) y9 Z# m; C T
,也可以用十六进制写,就象上面例子% _+ h. O# f9 O/ J2 C
4 b2 X1 E! u; E4 a) K& N/ @, h7 t1 G8 E; y0 ]
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。8 p! C" B* [" m. ^
# v$ m @: d# |7 J3.定义字体
& K) q ?: E) s0 ]6 @web标准推荐如下字体定义方法) C: [( K6 d/ r
0 g6 g: f+ S0 |. Mbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
% ]5 q1 @3 ^2 r9 q' ]2 n# s2 t/ b% ]字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 6 d; J$ c3 ?( S
Lucida Grande字体适合Mac OS X; , l5 p- c% ~: r/ C2 I4 C2 a
Verdana字体适合所有的Windows系统; . J E: M }! v& A L6 X* o1 M( S0 A
Lucida适合UNIX用户
$ B8 W0 y, |" A+ b+ w3 N"宋体"适合中文简体用户;
; k* I! N X8 @* q& D1 i3 j如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;' y1 `( M; M/ i' e; h" I( Y
' p& q: K- s5 m4 b ~3 S7 b4 h4.群选择器
9 L. A# a; O* C4 T2 H
% j' K* F: c3 V5 R当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:* O) J/ @( ]) n6 l
8 Z/ l4 }2 p4 ?9 U& H" Z0 `
p, td, li { font-size : 12px ; }
# A( G. X" }3 S e, X8 N就是给li下面的子元素strong定义一个斜体不加粗的样式: Y3 o6 V [, j9 w$ {2 s
, K! i1 H3 }# b6 \% C+ i- k! O6.id选择器
+ ^8 b" ?+ Y* u+ @ H7 J
- ]. A. F4 k" @4 g4 y0 |8 k7 S用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
7 }* r3 `4 C. b* d: P
9 v! W0 H7 n, n& u
9 z( o3 ~- W9 R* m6 o+ ~然后在样式表里这样定义:
3 m' r' x2 F9 h8 B8 J0 b1 I3 q1 R8 N$ R7 x c
& n- {5 p( C9 N2 m4 R4 t4 C4 z$ ~#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 I+ L+ ^5 @% B2 W5 ^其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
- u& {1 L/ n/ ]: t1 E; h
; G! u/ B& @1 oid选择器也同样支持派生,例如:
# q" ?# U3 j" G/ }#menubar p { text-align : right; margin-top : 10px; } * l, n& g. I D& S+ K" Y& ~- j
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
: L, |; J' F( F7 Z
1 |1 e7 X, d& ^9 k6 ?( k4 S6.类别选择器4 \: t9 L9 M# x
/ b* i1 l2 L# q& M
在CSS里用一个点开头表示类别选择器定义,例如:
7 D0 b7 }! k; N3 A( J4 f) C r- b.14px {color : #f60 ;font-size:14px ;} 3 q' G4 ?- I! g
* e. n5 \& f# r( b1 l在页面中,用class="类别名"的方法调用:
e' ^' b* o! b. M, R4 H; [<span class="14px">14px大小的字体</span>
% }& a0 v+ S0 z, ^! {, D/ e3 q! b0 a" h* b$ m+ n5 }/ S2 C
这个方法比较简单灵活,可以随时根据页面需要新建和删除。/ I% z2 f3 U' z/ j
+ B- u R9 \- a A' {
7.定义链接的样式- D* V$ S( H# s! ?+ p1 L
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:) |) q* n, U: g/ `
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
_4 X# I, }3 @a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
) L' Y4 X+ c: I$ w0 i" _. V, S/ na:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
/ k- q8 @- i- ~( A- ra:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 0 u* f% I: J( h9 W* p
3 z; f, J" Z- w. ?8 y, q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|