|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。1 n5 l) [% L) Z
, S' L' y+ n; y4 I( p( d0 X0 ]1.基本语法规范
+ Q4 v& ?3 d4 s H分析一个典型CSS的语句：1 ?! ^3 v' v n" _
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
' Y2 m$ }* C7 N' p2 `其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； : p5 N$ B: x. P8 T r$ X) x
样式声明写在一对大括号"{}"中； 8 r# C( Q7 M( T9 ^' @
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 9 c& [; z9 G& a* n; V; m
"#FF0000"和"#FFFFFF"是属性的值(value)。
3 N. r0 d2 W2 H4 ?
8 J7 R" ^5 M$ g+ f9 h4 {2.颜色值
+ ~8 k) r3 o q! Z% l- `7 o. e, ~ O* `, _
颜色值可以用RGB值写，例如：
! y' T: m, \5 M1 c8 f! l) d* X, y4 l7 J8 ^$ m, ?+ x
3 K5 x1 U" K! ~# S
，也可以用十六进制写，就象上面例子% P$ P8 H6 o3 }
: O. F2 o. ]: k& ^. h* t
7 `. \9 r& ~4 i: q' V2 r5 s0 b% X如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。) z; W7 d6 |0 | i8 f' f) p- ~
% y. Z7 q: g4 O3.定义字体
# a6 T) Z5 W, B8 Tweb标准推荐如下字体定义方法5 X0 O: v% z0 B0 U% H: {
* F5 j7 v& N1 i2 a" y$ W' s! fbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
( V7 _1 J' K2 b0 L7 {字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； 9 D! ~, m) s5 t
Lucida Grande字体适合Mac OS X；
% J" J" @) O4 i% {5 K1 r8 Y4 l& W. C# q* \Verdana字体适合所有的Windows系统；
6 A+ S- k7 G2 ?9 w# F3 yLucida适合UNIX用户
, ]) S6 f5 a) \* C6 Q"宋体"适合中文简体用户; . P6 J9 p: t3 ?! @; O7 p4 V- a5 b1 ]
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
) l9 E3 g% S5 ? i0 q$ Z \- F3 j+ `7 t" S1 O Z3 `
4.群选择器$ N% g: ?! f5 B/ i* r3 j/ w
% K9 I3 E7 j+ T/ p* p1 g当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
0 p7 m2 L, }! O% l. ]* P, t! }# \4 F" t1 K4 z3 X- ]
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式! L; |* J' G1 j Y" g9 `" S
- W9 L- M* H7 i: @( D7 `
6.id选择器, a A& a: r: f/ T' f
& E) F! a4 ^4 ?' t! J( `
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
0 D- Z1 ^) @# t9 T% l/ R6 a+ J& N' Q9 N; z5 M- Z6 I
. V% L; K2 g4 X: D: L7 a6 [( b. A8 B
然后在样式表里这样定义：
5 D6 Y# p9 m) M7 j' E- @+ M, }) ?* ?1 @0 f6 l2 I3 f: k
. R8 Y* ?& t6 B5 T( q9 V- N7 @
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
- n' Q( [9 R2 V- l# Y$ S# `其中"menubar"是你自己定义的id名称。注意在前面加"#"号。# y! C, A( L2 _/ V2 T! }
' F- ^- o# o8 `, B* D. k
id选择器也同样支持派生，例如：
( d! c# j( X/ ]$ B3 ~; D' B. {#menubar p { text-align : right; margin-top : 10px; }
7 t, K$ ]& [. g1 U/ N! |" y3 X这个方法主要用来定义层和那些比较复杂，有多个派生的元素。8 H5 s, `- v& u' Y: ?& i
' r. M6 k" q& }# U. c, w& g6.类别选择器+ P0 }4 q9 I8 ^! O
( s; N. z( s6 T# @, S+ \% N* W在CSS里用一个点开头表示类别选择器定义，例如：
% b6 U4 o: r+ P4 }7 X1 {; ?5 R, [.14px {color : #f60 ;font-size:14px ;}
4 h: Q* F0 x# Z2 ~ O
$ j9 l( C0 @/ \1 ~" Z在页面中，用class="类别名"的方法调用：: h8 R& F' X+ o+ }. b5 i
<span class="14px">14px大小的字体</span>
8 ~. o/ Z: D' c+ M: G4 h2 [
" Q! V& X0 p' ?这个方法比较简单灵活，可以随时根据页面需要新建和删除。
: J6 p/ n2 Q4 D ]( X; m o" K+ |6 x7 a2 U6 B
7.定义链接的样式
- g: j& _) c: L3 r8 w( \$ _CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
# _2 n7 |, O2 ?# Y: \a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
( |! K4 B! j1 U& |- h+ e/ La:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 s5 d' o8 I9 r) L5 i
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}: p- Q7 y4 h) @. b
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
+ }# t$ f( C! K5 H, t
3 d' |3 j0 y/ [1 M, B) S! K以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
