|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
7 D; x' z+ D) d. i7 l
& o3 g k3 t* d; a5 ^1.基本语法规范) I+ k* u- e% U C
分析一个典型CSS的语句:
: d- y: z4 C( hp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
/ c( M6 Z" Y4 M7 O" Q其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 0 J& Y' w. g/ q3 ~3 P: R' q
样式声明写在一对大括号"{}"中; 2 d! V- @+ S4 B( S: i% D$ `
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; $ p! p* U0 a) H; J
"#FF0000"和"#FFFFFF"是属性的值(value)。: z3 @9 X5 H7 g/ w, @9 C
o, [. w m2 l; k" Q2 [* c6 |2.颜色值
7 \/ j: l% q2 y
: L |% d, U' P9 n% [+ D颜色值可以用RGB值写,例如:
+ O8 K- g7 p* k5 M2 @$ w; s" _& v' V+ u2 u7 E/ y$ e8 A' U4 ~
$ l+ w \# p1 Q, F( E# P,也可以用十六进制写,就象上面例子7 ?" g/ O C- b0 n) W$ z: B
) \5 A% |. L7 ~, x% K/ f5 }
1 ?# ~$ J+ K7 c如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。9 @* j5 u* N$ K: Z- S6 n5 [! o; q7 P
7 u! a1 n3 ?* T
3.定义字体
2 Q2 M5 A( D2 D* r8 p; n+ |web标准推荐如下字体定义方法
$ B! ?# z2 s& l5 v# Y7 w$ s; s% y' Z8 W8 e; E. |/ b6 C! t
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ; ^0 B, \" O1 P
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; . v9 s, U4 g+ f% W
Lucida Grande字体适合Mac OS X;
" V/ P9 j' n" \3 m3 @; y" {Verdana字体适合所有的Windows系统; 4 B0 B9 G$ }5 }
Lucida适合UNIX用户 Y, B* B# |9 _% ?# S1 w% _/ Q
"宋体"适合中文简体用户;
- \/ Y3 c7 _4 L( q如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
( C; f4 F# z3 l' X! ]" V, a1 g6 p- V4 t* _
4.群选择器
( a; L% U( {- t3 N, Y4 C j
/ M0 _" i1 D+ e: Y2 k" {# y当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
0 e1 `- _( _' K5 K L4 C
# l) e! ?+ e+ B# P' R p, td, li { font-size : 12px ; }
9 ^/ k0 v; l$ q( y6 M就是给li下面的子元素strong定义一个斜体不加粗的样式& A+ x& l+ ^% C0 k* t4 U* h
; E" p, z7 W9 X! ^& e6.id选择器
- K4 [/ ]) `1 H
$ g' ^0 M; S4 M& s+ c; O用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层% U {: e( ^- T& y- Z8 i
7 q# L& l. s0 _5 q0 r3 ]
8 x- C' F: J# _. G! J然后在样式表里这样定义:
0 o7 ?' z/ {$ u8 t4 J3 U9 f _ i
, J: d' r. }2 p' ^& y+ f5 y, A- k4 m; E6 H+ u- S
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} , I) m- X( h m+ w5 X
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
, I% E4 h5 g4 \+ e& J2 w# y8 k5 j0 b$ \
id选择器也同样支持派生,例如:
9 @% C; a: ?7 l#menubar p { text-align : right; margin-top : 10px; }
/ r: o8 w" V7 s1 {7 ^这个方法主要用来定义层和那些比较复杂,有多个派生的元素。9 i5 w# j1 n9 l
& `* {+ a Z0 }( }1 u& W
6.类别选择器& P6 S& q, r: `% H' n# }6 k
5 E- j( N0 c( M$ o( Y$ F1 j9 t在CSS里用一个点开头表示类别选择器定义,例如: K% ]0 g; e6 v; L& u
.14px {color : #f60 ;font-size:14px ;}
: m0 F+ L( O9 h: F
: ]( M6 o5 }: z8 W$ k q在页面中,用class="类别名"的方法调用:% a9 Y; L; l& p8 n& S6 l* A% l! }
<span class="14px">14px大小的字体</span> % o+ }9 j! P5 @, q9 w+ B/ W" f
* P6 [, [& H* E/ {
这个方法比较简单灵活,可以随时根据页面需要新建和删除。* }8 W% M; f, D* n4 z* G5 Y
8 A5 T/ w- G9 c' I* \* P7.定义链接的样式/ ^+ K1 v, @. U/ H% F" o
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
9 h+ J* f0 M& N# ja:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
3 M' b s H6 P0 Z1 X" U) C; {: aa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
6 ?! k9 k5 ^! q, D$ O+ va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
7 T! {- ~% ^( l' \# {a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} . ?, @0 ^- d, X8 |, z
, l+ l( R; j2 h以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|