|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
( Z1 t# p: N$ g1 C
4 o$ D: c5 M& L2 Y1.基本语法规范8 q: z' h/ q& W3 c/ _; u! C% }
分析一个典型CSS的语句:
6 B$ N- c& o1 T- k) N9 |1 Bp {COLOR:#FF0000;BACKGROUND:#FFFFFF} + ~' q6 O3 E* P- W U
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; # N9 c: Z1 e+ ]: W2 Q6 U
样式声明写在一对大括号"{}"中; ' e7 t! R* F* ?& o/ h
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; [; y0 a1 F5 b% `
"#FF0000"和"#FFFFFF"是属性的值(value)。# l% R2 f& f. E. p/ I4 P. m
7 m7 X8 U( a5 Q2.颜色值4 a6 j( H. K! C" C2 Q+ L
3 |& x4 g- Z1 T9 m X, t0 D% v: l1 P$ s颜色值可以用RGB值写,例如:, L7 f2 ^& {/ C/ \
% [6 G- L$ {: K* O9 f* F6 @" r8 X; [. C* t# ^$ T
,也可以用十六进制写,就象上面例子6 J; U! G1 j5 A7 x" z$ |2 s
, \+ Y# O- _0 S$ s0 Q
6 u( o& E# k, a: D) O
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。+ ^' b X# w' s% N
( ]& g7 z7 c$ T" ^0 U9 U1 E
3.定义字体
1 g# \; P& E$ S; ?web标准推荐如下字体定义方法
; s$ E) }' F6 J5 M# S% f }2 a
% [; K4 G2 Y3 `* B) ?4 u/ ^6 s. Gbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
8 x% `- h) h: E$ b) P. H& L7 f字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
& A% W) E, y& n; H" HLucida Grande字体适合Mac OS X;
+ i) b* g! g' v) P5 WVerdana字体适合所有的Windows系统;
2 I1 G& b! m/ k" S. g9 kLucida适合UNIX用户
6 B' h( N6 M3 c" z3 P; J5 y"宋体"适合中文简体用户;
F; i7 H p2 b0 r& S如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;( D7 z. C7 U1 m. A3 A, h
# [; w% E# I+ h% M
4.群选择器
; e/ d0 V5 u. x |' ^( _1 }& H5 }
' m5 _# h# p" B% g当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:4 [# o. X* z% z& ~# R# Y
. X4 i& U( C x& _' w( k( K p, td, li { font-size : 12px ; }
% _- Y' U" ?& M# V就是给li下面的子元素strong定义一个斜体不加粗的样式
5 S% O0 N+ s; [! H7 [% g9 j; x. C; T) y; }0 B g
6.id选择器
, C8 d# V9 T0 ]" G1 w& G6 Z2 a1 s7 o% y& |6 A9 y8 c
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
. Z" R- e5 Q- s
* S1 V3 W3 C9 @: t* O0 U& O
1 l+ c& u' p; B9 I然后在样式表里这样定义:
7 N& z4 B% Z. M- n/ U
; \ u- k% e3 a0 b4 K$ l# {6 F- D( h1 l' i8 k. B% M& A
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
1 N) ~ P. y4 j% W2 U其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
1 T% V. l, z0 L: f% @ }' s6 C; X- ^7 O' W5 K
id选择器也同样支持派生,例如:
* l+ t% T" p" [& {1 v& N#menubar p { text-align : right; margin-top : 10px; }
( u" ^9 h$ H% J+ Z5 j这个方法主要用来定义层和那些比较复杂,有多个派生的元素。4 ~( E8 [# O6 A- b0 L
+ t: f v5 w1 R+ v6.类别选择器
1 C' S A8 b' ^: F( W2 Q: N- E$ X$ S. [' {, o1 d0 l
在CSS里用一个点开头表示类别选择器定义,例如:
, C* H: v! l( K$ X4 |/ Y.14px {color : #f60 ;font-size:14px ;} , l2 s; }& @4 g( u; f
1 H# V# Y0 T& d3 j4 T8 o6 M6 g在页面中,用class="类别名"的方法调用:
5 u; l1 o4 E( E# N0 v# f6 b<span class="14px">14px大小的字体</span>
' a1 R9 c! V7 V) O
& @# t9 E% P+ r1 p这个方法比较简单灵活,可以随时根据页面需要新建和删除。
: Z% K, Z! W6 {1 ~2 x; L; Y. `5 G6 S* q e
7.定义链接的样式
, ^3 C+ j- z8 \ g& a' R ZCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
" D* c! E6 U' k- E% @. ga:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}7 `; ]" V7 J6 A& C4 @3 v6 L1 K. z$ u
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
2 D2 I2 t, y% |/ K* T0 s; Pa:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}. M) A$ U0 H) t1 [3 f$ @
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} " {# L' k' W+ a/ A% m* n( s; Z
& f$ R9 L# P) Q1 Z" }0 A
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|