|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
6 J' N. x' [0 r& M- m i( n9 ~0 p) b) f% I! J% [2 T
1.基本语法规范' Y: _) u6 R7 o7 Q' O
分析一个典型CSS的语句:
; O J- B/ ]1 G: r+ s: ?8 Op {COLOR:#FF0000;BACKGROUND:#FFFFFF} ) |; T6 A2 i3 Y5 _, h
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; / V" H6 N) }$ F, {6 ?" ?
样式声明写在一对大括号"{}"中; 9 a& V I1 V& D' ]- Q! Z0 v/ F% o
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 p- Z# g( ?/ a& c* Q
"#FF0000"和"#FFFFFF"是属性的值(value)。) h8 l0 K V* x2 ~
8 D& t; Y3 E9 r6 I2.颜色值
0 d, ~2 F) j( ?" O
# b/ _- l% [8 f* l' z颜色值可以用RGB值写,例如:
+ }8 }: n3 r( ^" X2 G6 j/ ?" Z; ]/ Z" C) w
4 }8 w( l2 g( \# y,也可以用十六进制写,就象上面例子
2 v7 I) Y# G( x+ [# R. }( g' ^& @/ b4 w6 r4 E# z" _
! w: ]" j0 `5 u如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。# S! T: } c. A" O
9 V/ m) U/ U% ?6 k0 i3.定义字体$ n+ Q9 |) ?8 |$ L4 C' \. F) j
web标准推荐如下字体定义方法 {, \8 D+ C+ i8 V0 B# g
: @4 o4 {3 ~% m8 Wbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
/ @2 b! T7 s1 e5 w6 R; B' n字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
! V3 D! H/ D/ y+ O9 _6 jLucida Grande字体适合Mac OS X; 4 m) \ |" h1 x$ B1 T. W7 `3 s
Verdana字体适合所有的Windows系统;
! ]8 H# s/ Z* Y" hLucida适合UNIX用户 1 U& {! d1 ]4 a) l; M
"宋体"适合中文简体用户;
) a0 {; A+ j3 @8 T' [" J8 I如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;& Y a6 g2 o& K. l
+ ~* _% ?, U, l3 Z, X. `4 v
4.群选择器
& B" H7 i: \0 R6 Z% X. i; G n3 c) J% O7 ?; {( Q4 ~
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:: A( W- S6 x& C* R8 M
8 {9 I4 o4 C& S0 y0 _: Y# Y p, td, li { font-size : 12px ; } - w: R: i4 X# d
就是给li下面的子元素strong定义一个斜体不加粗的样式
/ s3 m( N/ n) T" x' v s V% W8 Q
* p2 R3 o2 C K) j( q6.id选择器/ T: U. X1 T' x, o. ]
, d6 x u! D& T, u/ m9 i% R0 B/ \
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
% }/ V6 f8 T. c0 a0 Z( }
$ \! _" V# j7 ?0 U$ A
5 W/ s* A* ?- E2 P) x1 ]2 g$ d. ~然后在样式表里这样定义:
# ]0 I, F$ N& h$ B; @7 [
e- I: W" u) a$ Z& K. }! f
! q+ e$ f B. a% {+ s+ r" ]5 P' T# |#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
! }+ @! i b. ^* O其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
* R8 x ]; w7 u! P7 u
4 A* }$ ?) N/ K9 Z9 Sid选择器也同样支持派生,例如:
$ ?$ S: z3 Z! \* ^( M& x#menubar p { text-align : right; margin-top : 10px; }
9 P |) ^3 D! J- [这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& ?+ q O% E2 g
" u9 |" \' E* y+ C6.类别选择器
! s& q2 B4 q. R! k+ v8 x0 J, ^% [: K/ W" e' ~% l
在CSS里用一个点开头表示类别选择器定义,例如:# _* }1 I D2 a7 A. `- o$ F T
.14px {color : #f60 ;font-size:14px ;}
# F% [! D& i: L: c- p& b+ u: Q N2 A6 j
$ g ?3 ?2 Y' y2 X4 R在页面中,用class="类别名"的方法调用:$ \+ k. f7 D2 D. e' F% [9 o
<span class="14px">14px大小的字体</span>
6 f: T8 N8 v. _# R7 @8 ^: J# f$ q6 E
6 J( _8 e# A4 i2 o这个方法比较简单灵活,可以随时根据页面需要新建和删除。! r# p( W+ W( ]8 m, |- j/ }" S7 i- _
+ o; j3 z2 c1 z3 Z8 q7.定义链接的样式
' g6 g$ R! W9 \" iCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
( E; T! d: g/ y& _3 l3 va:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
6 v( p. |0 a# k! A' J0 ?& x+ _* ra:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}1 h/ k1 ?) y; f! G, b
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
1 S5 f& {$ R# z9 ka:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
1 D7 S* w5 A. b6 D& \2 X! l8 z9 X# S
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|