|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
2 l% a8 o& r8 _8 u5 `( ^1 |$ G. l' ? O9 Y u3 Q( ?% A
1.基本语法规范6 p A) U a) n, M* v* G( |
分析一个典型CSS的语句:1 v q) W* _* g' m: Y/ x4 k
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} ) B2 M" C6 U' C" H) Z; M6 V" h
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
! C/ j* T# m) C; ]) g样式声明写在一对大括号"{}"中;
# e7 Y% i3 @2 L' Y3 RCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; , l+ W, a& H! a" T, Q4 ]1 }: @
"#FF0000"和"#FFFFFF"是属性的值(value)。
% d% I% C6 x4 p: G# Z* A5 i
- E# A- Y; ], D2.颜色值6 P8 o' n& ?6 Y9 e8 c
# F. f4 A) P# L: i4 A/ k0 q# u! B
颜色值可以用RGB值写,例如:
8 @; a( K3 w4 o7 W" s+ |, I7 Y. M
9 G8 U5 k9 V3 {
& P! s0 [. i5 u9 ?,也可以用十六进制写,就象上面例子" `) ]& f" s1 c* `$ t ^/ c
& y2 g4 ~' l+ F/ N4 k B# S' x! X! C# m9 V9 Y
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。/ x4 P+ f# \) O3 N& @& Y6 Z
* n3 f4 N2 P& X8 y! h) D% ?
3.定义字体' a/ @% n; {; G4 d' V& c" Y
web标准推荐如下字体定义方法, P3 c. u/ d' Q+ ^" L$ y
Z/ Q1 H1 I$ g4 F; ?" W/ @body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 0 b3 D/ S$ h7 @ F, ]) ~, N0 c
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 N1 x7 Z$ G3 h8 i! v; s( x
Lucida Grande字体适合Mac OS X; 8 j% m* G- n* [3 Y) D8 @7 D
Verdana字体适合所有的Windows系统;
/ o' V1 C+ M7 H; g, gLucida适合UNIX用户
* l$ M3 V8 _' z2 N, y, s"宋体"适合中文简体用户; . r) A1 m3 M5 J; G3 u
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;. p% o3 u S2 V1 f# a
( y( Z: Z1 q5 w8 m6 j" S6 ^
4.群选择器2 x" f/ V3 b( ?/ a
7 b v# ?9 \" O# k, U2 e& {
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:" ?+ E* \ X- e; w
4 b( V( Q# g% d3 c" D/ ?' l$ o" I p, td, li { font-size : 12px ; }
) d; y4 m1 R7 ?" K8 W就是给li下面的子元素strong定义一个斜体不加粗的样式
9 \6 F% {9 e+ L+ G* X+ j0 V) K! c [7 |
6.id选择器8 S# q. A6 @) z7 u) O: h: o
' D1 S* \1 ^2 Q7 u5 S( p' B用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层, n3 I" ~& L2 O# R8 Q3 A
8 {8 O( i* D* X( B! ~5 h' x
) x2 l- C: P( J然后在样式表里这样定义:
+ B4 D" }( I5 S1 l; K% K; @6 c! v; E& l5 Y7 d0 ]& |9 L3 M
" v: \0 d' R/ Y1 B2 D. F
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} + P6 q# n3 i' F& m }/ |
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
p2 @, R: ?: W+ @# `% Q# P' y7 }3 ?: |. e8 W( h* w" S. n
id选择器也同样支持派生,例如:( f9 x& b7 K# z' f; P5 E7 `
#menubar p { text-align : right; margin-top : 10px; }
7 M0 i7 B+ R8 H9 E这个方法主要用来定义层和那些比较复杂,有多个派生的元素。6 Q' |* g! a& q9 `# Y$ @4 [( U" A- O
9 o. h" \) x' T* d0 {& H: R' h
6.类别选择器% c" @( r! ]6 w& }
& p. Y4 X1 N, s0 k7 S- z3 a) ~
在CSS里用一个点开头表示类别选择器定义,例如:' K. [3 f% ], R2 T9 r, ]* W
.14px {color : #f60 ;font-size:14px ;}
1 h t9 Y+ ^$ s. y
# p; K2 j! u/ c/ |) K在页面中,用class="类别名"的方法调用:/ F& F+ u7 Q$ o& v
<span class="14px">14px大小的字体</span> ) p& s- u7 }: l$ K. Z
! q& N, S! V: i4 C6 L$ [/ U& M' \这个方法比较简单灵活,可以随时根据页面需要新建和删除。
6 n2 g+ x' d, p! K# h! U# S( p
1 I0 U1 v$ g# C+ R* R' k1 Z" Z7.定义链接的样式, r$ r1 U. i9 ]9 Y! X
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
# o9 g. o' {: [a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
4 O0 j8 J0 \9 ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}1 J" H7 S$ O e
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}3 a: g$ \! k- U7 T% c* U w+ V# n; h
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 {+ |) S( l) U, x( A
, u2 E2 f0 g7 ^+ Q* X以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|