|
|
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}
其中"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 ; }
就是给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”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
