|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。' P+ r$ e* c8 o9 l; N
# C; T$ C: M( D! r& I9 F0 |) F% C4 d1.基本语法规范
4 M2 h- n N, M7 x分析一个典型CSS的语句:- H* Q7 ^! M) |1 U
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
: x' T( V% A6 q/ h1 [$ f+ S3 X其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; m5 W$ [' e! R; R
样式声明写在一对大括号"{}"中; $ ?$ E ^5 K2 a& N% k) ]1 U
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 4 [( `5 x& X/ M; `
"#FF0000"和"#FFFFFF"是属性的值(value)。/ a$ r' k8 }; p; e
6 I" Q, S/ P0 H4 g) L/ o2.颜色值
, p3 u# L$ A( g, g }3 \3 [' x& B j0 t! z4 b3 e, k
颜色值可以用RGB值写,例如:
& v, k& q" {! ?- Y2 |
0 G4 t# O- l& O0 S! e( ~7 W0 ]: k+ o
,也可以用十六进制写,就象上面例子
+ d# l& s& I3 T" g7 X' {: x) t3 @4 I* A/ Q5 D: R
[+ O4 f r3 W+ y4 }* X8 @5 K如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
2 K# x5 H0 t7 T% H: s
0 f' W, G9 {7 l5 ^/ E- g: o3.定义字体2 I' v1 U: e: J$ u/ A& @9 X
web标准推荐如下字体定义方法' X% C& ^ q: r) W6 \
% v' m$ S% ?* W. Zbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } 2 S0 u7 s( g- H5 Q
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
; z' W" g. X2 S- oLucida Grande字体适合Mac OS X; 3 [% y( \5 |, S4 B3 C
Verdana字体适合所有的Windows系统;
1 p; d1 v8 S' l" I. C8 T; U0 I* NLucida适合UNIX用户 6 S& X9 y" |. @- A
"宋体"适合中文简体用户; , E X- ?1 d2 y6 [) t5 f3 l$ m
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
6 q- O- Q, W* e# D) v" N7 W c
% U& o$ M% T+ n: p" ~( V/ k, s4.群选择器7 w( r5 t+ ]" B+ l
R: ~/ L* Q- J- P- P) T, K
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
|8 c( o3 u, T9 z/ q) n
9 G* A. y4 ^5 a3 Y8 a p, td, li { font-size : 12px ; } , k/ y1 D/ q; Q- J
就是给li下面的子元素strong定义一个斜体不加粗的样式
$ e; M. u6 J9 ~5 B: k" N- u0 I) m# C- ?% d$ [2 [
6.id选择器( ?+ ?; I0 r0 ^6 k" }
& K: Q' j, i- A: U用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层3 |+ R1 t7 ?9 P4 H. ~( i( l) e
( X5 q/ q3 Q$ u2 p" @9 e+ y$ I3 S/ |* n2 X9 j; v& [2 A: ?
然后在样式表里这样定义:
% H" V* Z8 b6 g1 `1 `- A' G$ x+ D' F' }% p; ]/ \+ Z& K2 v
5 O# S5 b' N" W$ C/ B/ H9 a C#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} ' r# U# u$ z J, y0 S
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
* ~% S" |9 V( t8 y0 E2 {: ^/ `5 |* f- C0 j/ R
id选择器也同样支持派生,例如:; z }2 r! ?* j0 M8 b4 E
#menubar p { text-align : right; margin-top : 10px; } 5 _& }2 V2 ^$ U
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。/ U# o- j7 u7 t# l" @8 k. x$ s
6 H, J) K* { n5 f& M9 p B# d6.类别选择器
' A7 K7 k2 z# `' a$ R
6 f8 {! g" u7 h4 r在CSS里用一个点开头表示类别选择器定义,例如:% w4 F) g8 y6 g/ y* }$ x. `& W
.14px {color : #f60 ;font-size:14px ;}
U* O5 q1 O8 Z s# Q2 i& V
% O* _$ z( o1 C3 ]$ A0 \- ~在页面中,用class="类别名"的方法调用:$ `7 Q S1 }9 A* t* \ F
<span class="14px">14px大小的字体</span> $ W t5 X( |8 g( u% s
5 m r' H; z: R( u0 k$ q' m
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
7 X) K/ G8 @4 l# K0 z# H7 r" ?& k9 j. ~+ n; r. R
7.定义链接的样式
8 F: G a1 b5 f) u% H1 gCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
6 ?2 _* E) z. X7 }) i2 @9 F8 Ja:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
- h: V0 o" S0 \; A& g( S3 W9 T+ l' e; O( Ha:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}! ?" J$ X( Y* x% b2 U% i
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
! |- {% P3 |& h# g7 ^a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 J; W8 g% A; z+ X( n; X1 L" P' q; _$ W3 P
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|