|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。& D g+ A* N9 E8 e- b
) u- N, v$ a8 M9 i( w9 H4 M
1.基本语法规范7 q9 V( u, \+ B# Z+ l! {
分析一个典型CSS的语句：" |; ]* n0 n4 h
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
6 {8 R. x3 G4 V- A( ]: h- Y样式声明写在一对大括号"{}"中； ; C+ [* j/ L0 J, x M8 X' g
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
7 B" i. ?3 K- }2 T% E0 u; K# W"#FF0000"和"#FFFFFF"是属性的值(value)。
7 M9 _* i- e1 q$ x2 N+ z% q6 P5 B% k( Z. d I
2.颜色值
5 @5 F* K, M+ w+ e. ^
; g5 w$ m! {7 R+ M颜色值可以用RGB值写，例如：
! I4 {+ Y1 S0 y( t: C* l& v# Z
$ P% `8 R1 D- A; Y9 C; r ~$ v" d) M& ^' G
，也可以用十六进制写，就象上面例子2 y$ J6 g( C3 J; o
* J' O. P! W0 n$ |, B
* `1 r9 e- T2 s F; A
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。8 z8 b: o6 Y% T& V
0 s8 j( T1 j$ s6 \2 }. ~5 v3.定义字体
0 c7 j# h9 ?; l$ Fweb标准推荐如下字体定义方法, B8 U/ H( e4 @+ r4 h# B2 ^
3 Z+ s9 H& l$ P" @, j% a1 Qbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
" A ~& X3 w1 S0 K- l! o1 GLucida Grande字体适合Mac OS X； % O1 ~) b6 S) _- A" Q0 e. N0 E
Verdana字体适合所有的Windows系统；
2 n5 L+ G4 n2 DLucida适合UNIX用户
" I8 l- J7 l5 N1 Z"宋体"适合中文简体用户; % l) e( m: ]: b
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;! N T8 f: b/ g2 t) v
( l3 P+ m, p) C4 F! g5 @4.群选择器
* b" b' g. _1 v8 E/ ~/ s
& T# f$ ?- g, ~' |) W7 `当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：( S# P: s2 j+ Y/ b; O; m
3 e% h6 a+ n' S' ~, t }( A6 E" Y* L
p, td, li { font-size : 12px ; }
就是给li下面的子元素strong定义一个斜体不加粗的样式* i2 I' ^ h( h
8 C8 ~9 ?; f' }) \" [, ^$ ~6.id选择器# c7 ^" ~. e% w
\1 \; G4 W9 ^$ |: y. h用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; q+ }: D8 x X4 n# c5 _: X
( C, Q/ l8 D) e9 k$ C6 w) k; w N1 r
( g( a* x0 H) X9 G' J然后在样式表里这样定义：
; u) n3 n% W, C5 i c/ Z$ ?) w1 T0 D0 [3 c. ^
7 [: I: n' k5 H/ J0 W0 L
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。4 `6 ] s& O4 ]7 H8 `2 Z+ e
6 L# l# o9 b/ ^5 C4 S/ l4 k. z: Nid选择器也同样支持派生，例如：
! y( Y7 D7 ~" P' \- t* \#menubar p { text-align : right; margin-top : 10px; }
/ S/ H+ [- n. E# u% i+ J这个方法主要用来定义层和那些比较复杂，有多个派生的元素。& D) h( s& N& x0 F9 R* F
n# h1 S8 |0 W+ @, W/ Q3 M8 `6.类别选择器
0 z/ F4 J& N7 c% ]9 I
: v% B7 v: e9 H# |* i. M) ^/ n9 w在CSS里用一个点开头表示类别选择器定义，例如：
% `+ U/ J, b) [.14px {color : #f60 ;font-size:14px ;}
) ^( x9 ~( a, k2 f( K; A在页面中，用class="类别名"的方法调用：: @$ w. b; W. j
<span class="14px">14px大小的字体</span>
. Y; _- L7 D4 {& s B
+ h; e/ J! n: u) M# q$ O. O% ^* l这个方法比较简单灵活，可以随时根据页面需要新建和删除。
! Q O* o( b7 I0 ^8 v0 u( @/ ?; W N G6 c# e: c" j
7.定义链接的样式
. C3 j% Z. b6 l3 G9 H, X tCSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
/ F8 n, D' c p# t5 Y& \$ y" @a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}# Z8 t4 t2 K4 _* A0 i3 j" o
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}$ c3 w' f* t0 f8 y
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
. N* t$ E7 d! }- q2 V4 E% [, R" Qa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
9 m* E. A, e. n6 O. ^3 S2 N1 Y1 Y2 ~, x
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
