|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制，属于表现层的布局语言。
' ^ T1 v R. b. Y- q
2 t, M8 {" [8 ?) x- H$ x+ E( Y9 [1.基本语法规范
* y3 e7 T' L# J分析一个典型CSS的语句：
6 a0 T0 b( Z0 W4 d0 ^) s9 I- ep {COLOR:#FF0000;BACKGROUND:#FFFFFF}
: w5 b1 b+ O, U$ m" t. w' |其中"p"我们称为"选择器"(selectors)，指明我们要给"p"定义样式； 5 D q# v+ o5 k. v' t% p
样式声明写在一对大括号"{}"中；
L( o- p) ~, T- L/ _' [% Y" OCOLOR和BACKGROUND称为"属性"(property)，不同属性之间用分号";"分隔；
& I; |) g8 J: M"#FF0000"和"#FFFFFF"是属性的值(value)。; S4 Q- Z: Z5 r
- ?5 G) G% g5 I6 _1 x! a e
2.颜色值. H9 A: z5 p8 d* K$ A
1 `# Y& d4 o6 O1 b% ~& i& s颜色值可以用RGB值写，例如：
3 d. U0 I1 ? `' w2 J$ P0 K1 ? k% s3 H; u" l
0 l# H! D1 M' l7 U7 ?，也可以用十六进制写，就象上面例子/ X5 h( o; h$ g7 {1 o+ ~; T/ F3 L
4 |& m1 D4 F8 e A/ U+ V$ r3 E7 [3 _6 m# }; E% T1 | E
如果十六进制值是成对重复的可以简写，效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写，例如#FC1A1B必须写满六位。7 j% b/ m5 F0 y( p! a1 P' ]: m
' c) u4 W0 W# x% o2 N
3.定义字体; ~8 n$ e( h$ h7 j/ a
web标准推荐如下字体定义方法
- P J0 U9 S6 [) X5 t2 H8 W9 |( i+ a- E% Y( q# m
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体，文档将被指定为Lucida Grande。没有的话，就被指定为Verdana字体，如果也没有Verdana，就指定为Lucida字体，依此类推，；
+ e; s+ e/ O. YLucida Grande字体适合Mac OS X；
# n/ B2 N0 q( oVerdana字体适合所有的Windows系统； 8 @( R% }) j4 h! T8 S
Lucida适合UNIX用户 2 G5 W) j! v$ ]' s/ ~
"宋体"适合中文简体用户; & H- w. K* @! X. b; v# z$ |- G# v
如果所列出的字体都不能用，则默认的sans-serif字体能保证调用;
7 s8 ]0 A& O% _) Q; ~+ M# I/ k4 T6 D, v. ~, E% L$ M
4.群选择器
+ k6 f, Y6 D# u' Z' {# i6 q/ n
) n2 N6 |# }, x' t- ^% I# M* `' l8 }当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：; l! _/ k5 m! ~2 h5 z- J3 d
+ v. c. i- i6 q- K% O
p, td, li { font-size : 12px ; }
' ^& I! B, J! T* d就是给li下面的子元素strong定义一个斜体不加粗的样式
^& s' @8 z, k0 g3 l8 z$ D/ i- c7 P3 ~# Q4 Z2 B/ }: N' k1 F1 n- g
6.id选择器9 n5 Z6 e* {* }( h. T/ d& B+ g1 o
) T& k! v ~6 ? `1 S# h6 A
用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。例如我们首先定义一个层
@/ x: R& `0 r$ k" [1 v8 t3 Q3 z
d% d- U% n2 i% W
3 I4 \* H- R/ N2 P( ?然后在样式表里这样定义：
8 Y; D8 d& p' j! M: v3 U) F
* j& S/ g# x/ p# J& F, J
, H$ J0 D* @* T0 m, `. A#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
5 v8 m0 k: n5 ~$ _( u其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
( C4 q5 `& F1 ]# T% G) A# J
1 u) u; W y3 ^3 C, sid选择器也同样支持派生，例如：
1 r8 ^% M0 U& j' R. ^' M#menubar p { text-align : right; margin-top : 10px; }
这个方法主要用来定义层和那些比较复杂，有多个派生的元素。
0 p( V Y4 d6 g+ Q
4 P* ]# O0 ]6 s# A6.类别选择器6 P5 R, E0 s9 }* b( [
- M- Y8 ^$ i6 t/ u5 e+ ^在CSS里用一个点开头表示类别选择器定义，例如：2 q3 \' P c1 u2 j; l6 E4 G
.14px {color : #f60 ;font-size:14px ;}
4 L# e! S( `, ]1 Q在页面中，用class="类别名"的方法调用：
- B. w$ B; e& F% ]; S; V: X; J% x9 D<span class="14px">14px大小的字体</span>
' D& {. E- r9 C- |
这个方法比较简单灵活，可以随时根据页面需要新建和删除。+ w7 Q; H' V. a1 G. m* n
) m6 x/ O! }; G: X* y$ ?
7.定义链接的样式7 u+ p. k7 h8 u2 V" {9 G! O5 w
CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：
7 {* L5 E8 S+ _. Ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}8 R# x4 _ x! M! d6 k) D
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
7 ~$ |* b; S- c" za:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}" h r3 g0 J' V3 x9 a
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
7 U. Z' Y' _! q2 V, }8 L, w以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|
IP卡
狗仔卡
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
