|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。9 i9 I# T" V# |1 E9 M! A8 }
7 n' H/ w/ ]) s0 _) I: P
1.基本语法规范
( q- `3 {$ W/ P! i) |9 E分析一个典型CSS的语句:: X6 y$ W6 j* \0 F8 b
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} . d+ b9 j: \! F1 A6 R
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
1 i: s1 Y4 k7 w m" Q+ r( V& }- l样式声明写在一对大括号"{}"中;
8 o- S) t% E- V/ G! c/ g9 `COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; $ u. \) {" J+ h$ o1 k1 Q8 m0 w: @
"#FF0000"和"#FFFFFF"是属性的值(value)。7 Y* u/ ~3 P* P( B
$ ~9 V& x4 |( ^ u: O; e+ u" g3 ~2.颜色值/ [" x6 ?9 f" @: E, k: E2 @- G% i
3 Y, y; ^% S- f" c; Q. ^+ x& W2 t颜色值可以用RGB值写,例如:
' M N" P7 \+ r% \$ i( o( E& S( U7 y& ^! @
( u0 n+ _& z1 u; d" @ g% n
,也可以用十六进制写,就象上面例子
9 S, [. [+ z% v# }
% t, g `* D. V$ E4 C
( \, b' |9 n& i( K" d2 Q( s: V/ q; i如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
2 K1 L% z1 F' `3 A* M# \# i/ c6 }& \- o V
3.定义字体
( E" r* a, t% M. r2 O0 d! i4 }- iweb标准推荐如下字体定义方法 D3 O* }/ k- S3 h
5 K* A( o8 ~; G- @+ n6 ybody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
/ I5 z/ _. Q0 R# d/ [5 B5 ]字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 `" _0 U K* i3 f, f$ E9 _" i
Lucida Grande字体适合Mac OS X;
/ E' t- k" r5 t8 D% pVerdana字体适合所有的Windows系统;
, w9 `* v6 L6 V6 D% ~; H& bLucida适合UNIX用户
: L( L. a4 x% f( x"宋体"适合中文简体用户; 1 H* l) `- |3 M# K8 v
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
/ A- T1 N F# ]" m$ Q% p4 d! @+ z* s+ N# a [3 S
4.群选择器
% u+ X% a0 D, @: F4 g
+ i9 Z h. y. w当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
/ v; G" p) k8 J: w/ Q5 L5 M3 ^; Z0 P
0 H! g% N* G$ Y3 t p, td, li { font-size : 12px ; } / u" `2 D+ H/ H- h
就是给li下面的子元素strong定义一个斜体不加粗的样式
$ c% J7 x; q$ ?+ O: K$ X
: D* j1 M# Y7 {8 m. S7 t8 D" D6.id选择器8 v" x% D. {( j! J6 c
& D+ P! Q) r/ x. W s, V用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
9 w7 G) A- H+ H0 E& T3 f* y' L
9 |7 L) D& c- d) ~
3 F: M" F- [6 S7 u然后在样式表里这样定义:
! M0 i( A, M, ?# j) V: F1 y0 ?7 h, o
8 M7 E9 u$ |6 N- m E, b/ M" T& N% u; M/ \6 c; z b7 o4 O/ n& E
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} : U2 \: Z# y$ S5 b9 A1 T/ v
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。, L. a5 I( Z" d* c# {; }6 f1 p
' P) E+ j# U' @' I( s1 Jid选择器也同样支持派生,例如:& u4 ^% n3 _$ Q2 T
#menubar p { text-align : right; margin-top : 10px; }
; F+ m- @" o' l- X7 W3 d这个方法主要用来定义层和那些比较复杂,有多个派生的元素。# v' W0 l' q/ d
/ i# K) e3 y" T5 S2 `6.类别选择器
! t1 f1 K# Q: e0 m. ]* V# Q% D4 x# C# {
]6 y& r: q8 v% I& U7 ^在CSS里用一个点开头表示类别选择器定义,例如:
. B% ?9 @0 s0 N% x3 q$ v& C! G. ^.14px {color : #f60 ;font-size:14px ;} 4 C+ @+ a' n* ]
8 t* r& l2 s# B' m, G; ], ?
在页面中,用class="类别名"的方法调用:+ L3 B; i2 w' i
<span class="14px">14px大小的字体</span> 3 c7 H) M& y+ M# u( A8 K e
1 P s% s. j9 e! L! q l& Z这个方法比较简单灵活,可以随时根据页面需要新建和删除。1 k' ~* v6 g8 J7 d5 ~
5 Q8 T# {$ t* }
7.定义链接的样式
. Z/ Q1 M; N6 {4 w: y, T. ~. z; ?CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:& m' Q0 x% Y& A3 m M Q
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;} v g: T2 v) n
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}' K9 z. i( c! r3 |0 W6 Q- F3 P5 \
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
* S# p6 I: O2 P Ea:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
# S6 v1 t9 r3 \; R/ Y
* V( k! k7 x- G; G5 Q以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|