|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; a2 J( v# ?1 E: U
9 d% Y- n# {2 R. }1.基本语法规范
- Z. X" ~ W" H$ H( j分析一个典型CSS的语句:! V; i, j. e! o% }6 }
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} % {- `$ I% G7 K; ]; h2 R8 r
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ( ^# o, ^$ b' g, L. a7 N
样式声明写在一对大括号"{}"中; , e h. @5 R+ E( G
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
/ Z' E, _$ _' B$ {* W5 B"#FF0000"和"#FFFFFF"是属性的值(value)。
% A3 M- w: {9 Z# r0 W. H+ a% D6 c7 t4 B( A; j0 ^: n3 ?
2.颜色值% R# w" _) Y% a' p! S2 h; R/ n- h+ [
5 D; D5 _* G$ _颜色值可以用RGB值写,例如:* z' R& P# e# B1 p
5 M* z: d6 n% ~3 ~9 _: N5 z5 c& h3 C3 s8 G% i
,也可以用十六进制写,就象上面例子2 `: X! | m5 {$ J; }3 |) A2 y7 T
6 W9 l" ^6 z. R$ b3 N, ]/ I7 S% r
& a4 t+ O, W# C% i& v如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。" R# B5 k5 J( [6 ]5 q
& e. i4 _' a& K3 \3.定义字体
) I0 [$ e+ S4 n/ ^; |6 nweb标准推荐如下字体定义方法
- ^ r4 U: V- i$ x3 Q; x4 N0 e f# m+ ^2 K: C" o
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
. c' ~5 ?. @3 F1 V; U" J ]* n字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
t! U L) g# s# G" c8 a$ MLucida Grande字体适合Mac OS X;
+ K5 I& f3 I+ r2 p& O% wVerdana字体适合所有的Windows系统;
9 C- {; P; |* E$ @Lucida适合UNIX用户 + r* }3 R5 ?' Y# h% X8 b
"宋体"适合中文简体用户; 1 y. A9 [/ \; M
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
* H$ w4 j7 k) |) {/ W1 k: t+ v
! f5 N' ]7 a: s e3 [/ Z0 W" H+ a4.群选择器
6 C9 ?7 T7 X! o) V$ w4 k* n, E, f" Q! |* T" l
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:/ v4 G3 E+ s! `
6 c7 R* @7 X8 W6 N D! t p, td, li { font-size : 12px ; }
3 E/ m* W+ o& O3 }就是给li下面的子元素strong定义一个斜体不加粗的样式2 }2 T6 H+ P+ u# R. L4 l
/ b' f3 q! G- b6.id选择器* {) u8 C6 b7 C: q2 L' _7 C1 M. A
& R2 r$ a! f# x9 R0 E* @$ W v
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层; V( b: f0 K( V% H
6 i4 e3 x- G3 p- X3 u" ~3 y/ M% q& {! i3 U
然后在样式表里这样定义:/ S* [+ g& S1 l8 ~" h
; v) P. q1 M1 y2 i8 z% G8 k- z: [" s6 E/ ^& {, ` U L
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 2 p6 ?* n* v* y9 a% h
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
+ Y; m0 e: ]! I9 e
2 {1 [ ]- \: k" O8 G! Uid选择器也同样支持派生,例如:7 D B) ~7 f' r3 M0 B1 {
#menubar p { text-align : right; margin-top : 10px; } , ]. c/ t- l7 p4 h
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
4 c! t- U# q; t+ H
/ M/ G" _8 C, `- g: v6.类别选择器$ E# ]" L' l: x, [. w
! g3 m6 r, G3 V2 f; C0 {3 s) F在CSS里用一个点开头表示类别选择器定义,例如:
2 k% Z4 A- t1 R) {' J* z/ v! ].14px {color : #f60 ;font-size:14px ;}
+ o+ ^2 a. ?5 `; ]2 ^
) L$ l/ j0 j% o& Q- t8 f在页面中,用class="类别名"的方法调用:
# |9 _$ \ k- n( g- W. W! b<span class="14px">14px大小的字体</span>
9 y$ E) E& t9 f/ k9 M9 s0 I/ a- m$ _2 [
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
) y- |7 z8 F5 v' n- t0 Q; Y( a
D: h8 e7 O4 k3 I$ k1 t7 o2 @7.定义链接的样式+ z, e \. d$ U$ g; T
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
7 D8 y6 T( x0 M, _a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}0 ]7 K* g7 c. U. J' h4 l
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
! |0 B$ Q$ k, L7 w: [$ ]a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}* e. v1 {. j m# |% q3 c
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 V6 l) q: h( q* r& u1 C
. B; ]# c# B, M/ {( g以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|