|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
d% ?% r0 n6 X+ o. |8 B( Q% _/ E( T* X+ n
1.基本语法规范9 l. u" e5 z2 U+ Q
分析一个典型CSS的语句:
$ s' B) z6 F8 B/ \+ I |/ P1 u) Q& ]# Zp {COLOR:#FF0000;BACKGROUND:#FFFFFF} 6 U0 X4 i% ?9 [3 O' ^& I' O7 C
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; / C% X7 t, Y! v3 J
样式声明写在一对大括号"{}"中; : ~( d6 F: H! ]* S
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 9 I; y- }: k* J- z3 I9 A8 o" ~
"#FF0000"和"#FFFFFF"是属性的值(value)。$ r% i5 j5 O4 e# q
. `; v1 F. ?: O" E% q9 p$ f2.颜色值
; s7 `5 k- Y; f: q7 w4 T; e; U
: }' X- \+ o9 m+ Q+ ]颜色值可以用RGB值写,例如:& H+ x8 N w/ v8 p1 ? o
/ _) ^) I& z% w! x" F# ]" r
* b$ m' S9 e2 h/ k$ p0 L q
,也可以用十六进制写,就象上面例子8 S5 Q3 S: X' d: a7 _& ~9 P' D
1 M+ J. a! Q0 j- k9 E/ e5 f# }0 }* a1 F5 J6 {* F8 c
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
$ P$ f6 w& B; S8 U2 @1 i/ r, d$ c: Z3 J. w/ d! p; r2 g
3.定义字体1 x) ^$ [. s+ l7 T* R! L+ a! j
web标准推荐如下字体定义方法9 J5 {- w% u9 k {0 B2 v
, g1 w5 I+ q" N4 a4 g
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } / _: @" U. t5 Z
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
( y) M" j9 F, w" \* Z- ?& A1 V8 nLucida Grande字体适合Mac OS X;
- z$ c6 |) |: ?: B/ @Verdana字体适合所有的Windows系统; 8 F$ p5 K* @/ o: | c& K. K# s
Lucida适合UNIX用户
1 K( N, k2 m8 c"宋体"适合中文简体用户;
2 a- i& }1 [- C: p" f0 L% f9 n; W6 I: i0 a如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
* @& ?6 w: @% \" O; E! s3 E" x8 p& H6 y0 z
4.群选择器6 C1 O' S/ {" ?; v, B
1 X S6 l8 L6 Q+ O0 j当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
( r! w. w0 z: n3 d- k" n4 ~- `) W, }- c* A E
p, td, li { font-size : 12px ; }
6 h3 N8 {) k3 d7 A2 d& @2 k \1 p就是给li下面的子元素strong定义一个斜体不加粗的样式
+ I! r' V& f$ R
1 A/ o2 R1 n5 Q- p/ ?6.id选择器
* T* t/ h" m6 t; Q/ i3 i& R i W7 _/ i7 L8 M9 n" E) e$ F# I
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层4 d( K$ ~8 g- v7 B% {+ i
% N& z5 j& T {5 n5 A
" x$ @' r R1 T3 d+ j7 U
然后在样式表里这样定义:. m2 l7 [' C; w( w
( F- h( Y9 Z8 K& \& m$ g# W0 t+ s$ S/ q \) ^8 x. |
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
2 e# t; N# n1 v: N3 [) n3 O+ d" |其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
1 ~4 j8 j( z( O) [; g5 c
% x8 p) W$ I& Vid选择器也同样支持派生,例如:
3 @' b& J; ]. _, w#menubar p { text-align : right; margin-top : 10px; }
. A. N! T0 w U$ x) ~$ ~$ `这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
5 |+ ?9 @( E8 \
1 h% k9 U3 y( A6.类别选择器& R. x4 U# m9 w# T
) f3 P% {. A& L9 M; |$ k4 o% o
在CSS里用一个点开头表示类别选择器定义,例如:7 R! o, M5 l* e- D
.14px {color : #f60 ;font-size:14px ;}
# h; i! g( T u) ]$ ^- J8 ^1 w, k9 |$ o
在页面中,用class="类别名"的方法调用:4 n- A0 B# Z' p5 O+ h' R& C. L# U
<span class="14px">14px大小的字体</span>
& {% y" `' y$ ]. D: `9 B* }' ?4 l! O1 l$ F% x' B" U7 W$ l
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
' T2 B- \& b) C: V8 Y. }
( c0 d8 R8 U+ d8 z7 q$ O7.定义链接的样式9 m$ K4 r$ J* h( O( K3 f/ F/ J1 [$ {
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:% d0 g1 T; _2 E8 q. A
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}0 U, T# j1 l/ [9 V( d3 R& U
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}5 |1 x0 C k+ N/ _9 R# p
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}( }( ]. ~8 }* l& }
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
- F' D( c, J/ i( S5 S
( t5 k5 U; I8 q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|