|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。7 [3 h) @; r1 Q3 \8 g- X6 [
X: V% a* T6 [& E1.基本语法规范( X x! T' y" a% K0 _
分析一个典型CSS的语句:* x' H& Y# \- l4 p4 ^
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} + e$ L+ Y8 s! I
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
6 ]6 P R! z" Y样式声明写在一对大括号"{}"中; 0 v6 A5 Q6 R: ^
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; " n7 O2 O- u0 M+ f1 U& W! f4 M; r
"#FF0000"和"#FFFFFF"是属性的值(value)。. b& U$ ^2 G t" h
( U/ |" N+ U0 Q3 _2.颜色值
) K: S; n9 e% r( v
( S$ u7 j+ b; H* R! D颜色值可以用RGB值写,例如:
. r& @8 E. T3 ~( D7 o
. `* A, m: [) C+ V
2 d6 D) r/ y7 p,也可以用十六进制写,就象上面例子
& S( m- K: e3 v ^- x- \5 F( c8 I3 N: P, a$ K1 A8 F
* p6 s! {- C3 V
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
, R; v. f$ d5 e$ s& U. \" d0 p M" C; C$ i
3.定义字体) k8 p, H' y- c
web标准推荐如下字体定义方法1 d2 [/ ]9 k3 }3 K& m: ]% U' D+ {
; Z6 V! Y# Y! z1 [4 s8 Ibody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ; E* S; f4 @7 F$ S7 k* h7 D) S
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
6 j# i7 |; Y; z- p# QLucida Grande字体适合Mac OS X; 5 U6 i. J* M* b# L' R. t" m
Verdana字体适合所有的Windows系统; - x9 h$ E: w, Z8 l# Z
Lucida适合UNIX用户 ( z4 x: @- M1 S, _
"宋体"适合中文简体用户;
& o2 R; m4 \7 I如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
1 `+ X ~. v# d% v9 g9 C F
: u& D" z( n" y4.群选择器
9 z/ z8 l) n* v5 Y7 [
' W4 e6 U* h. {# E4 H: A' s当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
. J( J6 e7 j7 G: P/ z5 C% m
( @" |) }9 H! b+ [ p, td, li { font-size : 12px ; }
* g! Z5 k2 q* q) e+ q+ Z$ p! q9 t就是给li下面的子元素strong定义一个斜体不加粗的样式+ T, O6 y- E% |! E" c
' i" ` e( x/ n7 B% I3 p6.id选择器
/ @4 A) k) L5 _% v0 n# A8 [; B* Z, } D# ~: F
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
; C) F* c6 _1 O5 [, P/ X7 ?9 ^) O# Z
+ P+ H! R/ p" i* B s2 P% S
然后在样式表里这样定义:
2 a' t' M; i( p( z8 P4 [5 q0 `/ c# Q0 R
0 S8 L6 V+ }1 V4 S1 e$ R# H9 N/ F/ A# e. e& L
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} , d( i4 ^+ }, x# g1 c; V8 y
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
" Q1 j) H) q6 _ n% Z3 O
" n, R7 u* |! s+ a( ?+ Eid选择器也同样支持派生,例如:7 r4 U _% w* g, z
#menubar p { text-align : right; margin-top : 10px; } & W( ?2 _: G( d: ^3 p
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
" i8 z& {) z- A7 O# F6 _; b$ n% z+ \" z# U
6.类别选择器
& B' D Q3 @/ r7 S. d+ k/ _
, j- ?7 g+ v, A+ }5 o, E在CSS里用一个点开头表示类别选择器定义,例如:5 I v4 c2 B3 d, P J/ @( Q5 S
.14px {color : #f60 ;font-size:14px ;} & n7 t) [9 d6 H& h5 r
7 B z& b; o7 \ k在页面中,用class="类别名"的方法调用:' \) }2 t; y! \; `9 Z
<span class="14px">14px大小的字体</span> / n6 {; M& k& w
$ x- A. \. y3 L/ \! i( b1 Z这个方法比较简单灵活,可以随时根据页面需要新建和删除。) A. x" @* h# |4 u' J
9 o, d" k% N+ k, a- ]7.定义链接的样式
4 v. a7 ?* w4 ZCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
1 Q; m$ v7 X' T1 a3 y; i7 qa:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
% y, D" \& m- Z6 x" ^1 f Ea:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}! K! q8 }2 }3 H$ h5 @
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;} {$ R k* F9 q
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} % Y+ B ]! [9 O5 |3 m
; K: z2 }- B1 |' W4 [2 t
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|