|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。5 {. g' W, E* f' N9 I9 |7 Q% e
) X+ r" r+ {4 w# R$ \0 U
1.基本语法规范8 t. X& x- e; @8 A3 Z) f
分析一个典型CSS的语句:7 x/ W! C$ \5 m+ j0 g1 a3 `& S
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
/ R1 s, v; |1 z5 p; r. w1 V其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 1 O3 T1 W$ M) t, m' Q& R$ ~
样式声明写在一对大括号"{}"中;
8 f7 N s# ?5 j u8 C4 d( g) BCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; $ F/ }# L% j7 w! R
"#FF0000"和"#FFFFFF"是属性的值(value)。
2 w) K$ e& j: g9 R$ ?7 o. P, ?. q* i6 X: r: Z# ^
2.颜色值3 X5 r. g6 K- T
# B* j" P1 b) [6 V: F7 v颜色值可以用RGB值写,例如:
7 y( c5 U3 [" Q" ^4 C$ Y6 a, k
; |8 D- a! e# L' J6 q. Y+ G& I1 S( e' o
,也可以用十六进制写,就象上面例子7 O$ P! T% W+ d3 P* {
e: v( i2 [( a
9 m1 ], _( ^1 i' m2 h2 `; u$ i如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
9 v5 P X, u5 P9 ?% N# E
8 W% |; F2 r* i+ Z1 ~; v5 C3.定义字体
6 w2 Y2 t6 n6 Z* \, u1 lweb标准推荐如下字体定义方法 H/ F; {. H' j- F& f1 Q
" k/ n4 M6 n }
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
# v0 a/ X5 h3 g3 @- x字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; $ P& b4 R9 l* Z6 J8 w* z" \4 i
Lucida Grande字体适合Mac OS X; ( h9 r3 O7 d$ u4 Q% P% Y/ r4 J
Verdana字体适合所有的Windows系统; 4 l1 G3 k5 p7 _, }5 ?9 R
Lucida适合UNIX用户 0 L, B5 j; A. V3 G5 \; f
"宋体"适合中文简体用户; + Z* G2 t6 F7 y8 d( A9 W/ F
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;1 J6 y7 F& p1 H& R
% g: C3 M/ ~* ` a H2 ~
4.群选择器/ `' p5 w! u1 B$ e
: \7 q6 V) F0 t8 }0 z& \0 ], v [当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:! w( u2 ~ z' k4 z" I/ j, o8 H
6 D/ T0 F6 P" L8 n6 v4 M4 f% U
p, td, li { font-size : 12px ; }
* B5 d% z. v4 U( k8 J. U/ Q+ k* Q" t就是给li下面的子元素strong定义一个斜体不加粗的样式
7 B( y M% J# x# H/ Z ?3 u
4 S0 E! K9 w8 K2 q6.id选择器( d/ K8 N' p$ y) v/ O, P
$ y: M6 u3 U+ A# {) R7 X) y用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
$ ^+ ]1 z5 h2 {( z7 d
$ \# K* [9 C! c0 R a: ]6 i: U! Z1 d# V1 j4 }
然后在样式表里这样定义:
0 {# d( q% S. S+ |4 k# Q+ L4 N( z6 L1 D
3 E/ Q( o# k' {! z! V# s& C; O9 _& @; m* M
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : I- t& P. N& P" E; y! K) P
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。( ?) E: k4 n) G4 Z0 q- t; ^# _
- a. S- s6 }' ~/ ]! Z8 C* L
id选择器也同样支持派生,例如:
, } q6 Z# |% }2 P& W3 M) F" V& t#menubar p { text-align : right; margin-top : 10px; } # Z- w) {1 N+ h8 M" i% {
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
1 T, ^: Q- u; Q' l) a$ P) Z
, b2 o1 _( ]0 H6.类别选择器
' i; N8 V' N( l! A7 v
4 X, {! A5 ^/ P( y; _* }8 I1 m在CSS里用一个点开头表示类别选择器定义,例如:
6 i2 u% |7 Y J$ Z.14px {color : #f60 ;font-size:14px ;} # C+ `5 ~, X# P# f
- }' C0 W5 m, K- ~1 w; @. U1 g
在页面中,用class="类别名"的方法调用:
! [9 H# m- p3 ^& W& P, B1 @<span class="14px">14px大小的字体</span> ! o) ]! c% F7 M. _$ B) O' \5 z
4 J6 _6 n8 q3 _4 x# Y* e+ _
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: s4 T4 s- m0 Z2 z6 s4 V& `' s) O; V; p' e9 R# F
7.定义链接的样式
: \+ W9 ~ D( w7 j' tCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 e3 ?! a: m) q5 Y; \a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
8 z& i/ h# Q. ]# ]5 ]: ga:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
& |3 H4 L$ u( o. [7 va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
- d! t& l9 M: L) h3 T+ f j2 {a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
# G' L/ e! F3 s% I
, C# V! q; u3 s( J以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|