|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
$ Z0 ~* j" s: P2 C( |0 H! v
! c) s- o E, O% S i) h1.基本语法规范
f8 P$ u% f: j7 @分析一个典型CSS的语句:9 a+ l% v7 T6 z1 ~
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
: l: t+ X4 s) o0 D1 Q其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; " Y3 ^4 f! X6 B! h, r% n
样式声明写在一对大括号"{}"中; + [$ i0 Z- v7 R* |9 @3 @7 W5 ?
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; * }- b& X+ [2 ]/ @% Y# S
"#FF0000"和"#FFFFFF"是属性的值(value)。
; F) N' X- c9 s& K: v A0 s" ]& B6 o! y
2.颜色值9 }/ V- s! W$ W( Y4 m
1 u2 P& A. [) Z9 A颜色值可以用RGB值写,例如:7 u9 x5 P/ e" p' c
" R- b& m4 _% J9 U
2 H6 U/ {$ g4 D3 I4 B9 F
,也可以用十六进制写,就象上面例子
8 k5 m9 d, ]6 T
& R4 s O& O! A: U8 T5 S
3 H1 s$ ~' \ t* @) O& T" I& a6 J; g+ I如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
$ s* Y7 B6 ]4 R$ _
0 a/ s, a: B2 ^6 S1 Y# C3.定义字体( Z9 M3 W. ^: u/ R0 P% @+ H5 i" [
web标准推荐如下字体定义方法$ q) _. h, @6 m' V& c% F, y
; ` f( z, ^5 R, V5 p7 d ? Kbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } : u% L7 L: Y& O$ d2 n
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; + q$ d9 a; ~/ R6 [' v
Lucida Grande字体适合Mac OS X; ! `. E) r' l7 `7 b T- B
Verdana字体适合所有的Windows系统; ( q- g8 T; b* i- W% u
Lucida适合UNIX用户
+ V) m; g R* }* i8 f* b"宋体"适合中文简体用户;
" Z4 z1 J8 b% m如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;2 T3 v+ g& O, u1 {% r& w* m
2 _( l2 G7 T! t% m0 q; i3 j
4.群选择器
; R: G3 C0 v( d8 y, v# E3 x' g' D/ @- i$ }
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:7 @4 q; h7 \. ]
' ?* M; P- R% L* o$ w. a
p, td, li { font-size : 12px ; }
4 h" v* O7 y3 e/ h( [2 R! t就是给li下面的子元素strong定义一个斜体不加粗的样式& c' t' m0 }7 n$ n7 A
* ^0 ^& d! S3 S" W5 V, B0 u
6.id选择器/ @! |8 z" b, Y" `2 J/ \
. ?% t9 T1 |0 V% q% ^' i9 ]
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层! Z1 X9 |9 |) Z4 [2 J5 T4 J6 n
' z* s# D5 e) z1 L$ O$ S% W7 i+ S$ \# j) q
然后在样式表里这样定义:8 |6 m1 x' b3 b! Z' M9 U
# h9 V5 @7 c% j/ B/ L6 {1 E, S( E' H
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 9 b- O" R( R+ M/ }" |0 K
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。4 B5 k/ n: }3 k" W
$ H! }/ M$ t9 X7 N# V$ |% Nid选择器也同样支持派生,例如:5 C: q( V5 o* v6 L* d" H
#menubar p { text-align : right; margin-top : 10px; }
0 _, F% D* M9 L: T) a这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
O- u' {0 s# c- L1 d% n2 K( X) W
& D( U' z9 b- k7 P. m) a6.类别选择器
) J# I) H/ @! a- I5 M+ p& R$ _5 t2 F$ g+ Y- ~9 Y! Z9 u3 d/ E
在CSS里用一个点开头表示类别选择器定义,例如:3 g2 {' G2 G& i* d9 [$ b6 b* e
.14px {color : #f60 ;font-size:14px ;} " s* c: V& m: Y, q/ n3 [
8 ?% F2 ?8 i6 e4 X
在页面中,用class="类别名"的方法调用:, N2 o& m- f( q% s& y3 f
<span class="14px">14px大小的字体</span>
4 f; W, _1 I6 ^$ i# e$ L( m7 Z2 O; R9 S1 T
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
8 H! z" G# Z( C( t7 Q( |+ z6 F4 r; i
$ c1 `: g4 V# D M3 B9 s5 Y7.定义链接的样式% v* L% W' D" }% {
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:& h2 p! B9 s0 |7 d' d% g- K: K
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}! Y. W1 C5 Q2 G7 [8 \ x
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}, L! J' c. L5 n' p9 |
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}5 X2 f0 R1 \4 r
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 1 M) P5 F9 r) Q9 W% p d9 A+ q' I4 m
! Z# p3 M$ x' d: Z" K
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|