|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
( }+ B9 |) H) {# x
& b; r, D0 I4 y4 ^+ M! l1.基本语法规范
+ c' }; z3 [! C) r( Y' D4 J分析一个典型CSS的语句：$ C* w7 t+ ?2 D/ a0 N" S
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式；
( t2 @" m/ F$ y3 ]+ k0 h样式声明写在一对大括号"{}"中； / `$ [1 ^8 n! B
COLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔； 1 r2 B M% G9 e9 X$ V1 u
"#FF0000"和"#FFFFFF"是属性的值(value)。
! ?, L" G! T4 T* e/ x, I2 _* Y" |4 Y- _, G) J `2 m
2.颜色值
/ k. O1 k3 D6 i5 F: P2 ^8 t+ `) C; _, ]6 A: ? S, R, s
颜色值可以用RGB值写，例如：" S* C1 F& D2 B' \% n1 Y# ~
" c+ z. t3 {3 `% z) l& w
( F5 w5 X( J3 c8 N% _，也可以用十六进制写，就象上面例子
8 d" N4 s' q4 B: {* O9 M/ y) ?. L) ]2 y5 g2 `3 A5 e
% R. P7 N6 F* W5 ^/ c% f6 `
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。
7 M* U! y7 d L; I4 i h
: |3 V& b- q$ h5 s6 k5 o3.定义字体
5 R4 \5 C. R/ e1 H2 a* u7 Mweb标准推荐如下字体定义方法 H, w1 M% S6 R6 p& x% M+ E
& \$ ]1 g" I6 J; Q7 J" ~body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，； ) P9 E' t& R* B3 C I
Lucida Grande字体适合Mac OS X； ( J) ]9 O4 j' p3 ~+ W
Verdana字体适合所有的Windows系统； # e: _! S6 Y) C. r# {( t! O
Lucida适合UNIX用户 9 }4 {5 U! m% Y' _* R
"宋体"适合中文简体用户; 6 H8 R5 @" m" t( c6 x K
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;3 H# `6 F" \# n* A% {
$ W2 @, H; m% B
4.群选择器1 C1 G2 M3 w/ L. `8 m9 }# U% Q
/ M+ L Z1 G6 `( w当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：
7 Z! C$ G& v- I# |) p
' U4 f4 k9 G5 u3 U! F p, td, li { font-size : 12px ; }
/ j6 }: F) Z) k/ C- B& ^就是给li下面的子元素strong定义一个斜体不加粗的样式
" s: h: m/ L5 L0 r8 A" F9 j0 ~, M7 f* @( h
6.id选择器
' F0 @7 {3 w$ N: i
; K* f9 {4 Q) ?$ U用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; f" _, |% J) {* c3 f1 n; D: y, j+ Y& s+ ]4 q
# M, p6 V/ {4 j2 X9 w
然后在样式表里这样定义：
: U4 A0 U1 h6 ~. E0 I0 |3 P& b" `3 U) |7 c& _1 l
( i$ H, R6 W+ V& g/ [& T. H6 U# h% R7 ^% `
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
1 i* c+ m- _, B, p/ p- {其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
. J# I9 Q* F+ I- q1 `; k
3 f; e- c: f1 k5 g# K, H" oid选择器也同样支持派生，例如：* t: O! P( ?6 m7 U
#menubar p { text-align : right; margin-top : 10px; }
, l" [( n# |1 R0 R这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
5 s+ }0 }; [ L6 a) h, C, `" U) F4 }+ x! E! v1 v
6.类别选择器, }& Z. p1 p0 l3 J9 y7 {
! b% `! d+ x2 L% g在CSS里用一个点开头表示类别选择器定义，例如：
h) W9 A( e7 I5 O/ e+ c.14px {color : #f60 ;font-size:14px ;}
2 X; y; p1 H, t3 o2 c2 i8 U% T' g; [, u( U$ A- y& r2 y! Z
在页面中，用class="类别名"的方法调用：
( C M! J8 g q) L7 j6 x U4 ~<span class="14px">14px大小的字体</span>
+ N( T) p r8 x; X" L& }- q* K
这个方法比较简单灵活，可以随时根据页面需要新建和删除。
, o0 m# g/ z% {4 z9 A$ j1 Q5 B6 r. {% D1 N
7.定义链接的样式 A- c: x, ~, k
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
3 L8 \* q7 g: a9 B$ `# B. C+ }5 [a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}1 w$ t. [; t$ j3 S2 F2 l
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}2 |1 }) C9 L- Z! o( B
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
9 | b3 L( k! i2 S. ?" Fa:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
5 k/ |- s2 [9 i% Y+ E
8 N/ E6 u+ |: C4 N$ U# @3 \/ _/ h以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
