|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。1 G8 Y6 Q( a& ^ P* `
M3 U0 n6 p. S, U1.基本语法规范
6 t5 V2 q7 r* \; T6 d2 _: @分析一个典型CSS的语句:
) Q& k, Q2 R% b8 b9 t/ ^$ sp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
( {6 J" J7 |7 E其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 4 V! o; ~- N3 V1 O( ~
样式声明写在一对大括号"{}"中; : E9 a6 _( ^* L5 q
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 6 O5 G5 h. U# [4 E& t9 A, u
"#FF0000"和"#FFFFFF"是属性的值(value)。) W4 e9 |: X# a2 _; T. J, w, t! @
$ _. d0 |# V1 ^2.颜色值
( _( f. {0 v: D5 H! H* k5 T' }: b
~/ O) N6 ` D. t# J) A颜色值可以用RGB值写,例如:$ @ p9 }( {0 p: S& h& Z6 v
" k2 n, S4 ?; x! `
( F5 j3 y0 F5 W/ F; x. p. R E,也可以用十六进制写,就象上面例子1 d; E, W* v% N7 @" i9 ?4 E: `+ m
" F# L% B4 ], o" @. n: G$ a9 {# {
+ f; F1 t8 y6 X& |% \, G# _6 D
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。3 r4 g6 T& Y: X. B" I( u: M& g* m
; N$ |! r: h. m+ N$ J% Z& z2 v
3.定义字体
7 U# ^! b% t: A* z3 l* O; bweb标准推荐如下字体定义方法
$ ]* b9 _' p' I# c' m. [: Q. y5 K! G" v
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
+ U6 I* B, w4 k0 Q1 z字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; ! K" R; L; W9 F/ G3 {5 W2 T
Lucida Grande字体适合Mac OS X;
% c3 w V: b) z7 O. J4 OVerdana字体适合所有的Windows系统; 8 @1 M/ } k! [) [% \
Lucida适合UNIX用户 6 J! ~$ R/ @# I" M6 h6 B2 ?
"宋体"适合中文简体用户; 0 X0 c' C" F3 k! _. \
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
3 Y. K* X/ o7 }0 b1 z$ P ~7 T f8 B# j7 W. A0 y/ u" z2 s% m+ |( ]0 u
4.群选择器
; J1 z" _: e6 p1 o% h8 y" N. M( l2 g. Q( U) n
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:3 r, q9 H; u' q0 V$ W3 \' k
: T0 D) o) t3 W2 |) H/ W! l p, td, li { font-size : 12px ; } : \! `5 I" ~4 e1 B$ }" a
就是给li下面的子元素strong定义一个斜体不加粗的样式
, ~ m0 `/ i8 E1 |: U5 G- L$ E1 t* k) |) s
6.id选择器
$ G4 ]! l' g- H3 P- r" c* X+ p9 f
% p+ M+ A _5 Z用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层7 W: L- U! s) M6 [+ M' f$ c
' _; C. K4 H# C+ g0 T3 y8 d
2 ?5 n: |' n0 Z+ X% I: A$ s, S
然后在样式表里这样定义:! }( _% |/ j4 U( T) k) h
- r/ l4 y. n( y( @2 r
5 l# H$ X0 J1 x& V/ i% l' k#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
" I1 b- y8 ~ L1 X- g其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
7 o+ T$ w. R. L9 R" r) c
0 \7 v9 j2 u1 }5 ~9 j* a. S/ Y [id选择器也同样支持派生,例如:
3 @# @, U! l+ j#menubar p { text-align : right; margin-top : 10px; } # o( }+ N: {- t: x" |6 r
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。! s/ x, U5 t* \1 f: G% V8 M
1 ^. E: Y: I" o' b
6.类别选择器% a; g3 ?. _* a/ q1 @. E
2 p' T5 t1 {" b在CSS里用一个点开头表示类别选择器定义,例如:0 I6 c W/ ]3 z3 F% s
.14px {color : #f60 ;font-size:14px ;} 9 }! d8 q! Z/ ]- U
: b/ y& f) I( F: d6 w0 e5 a
在页面中,用class="类别名"的方法调用:
4 y2 J/ {5 C+ e) P9 d# c<span class="14px">14px大小的字体</span>
6 }4 m8 `5 z) }! X' p) l8 K) l, y ?7 d2 u7 a! ?7 ]
这个方法比较简单灵活,可以随时根据页面需要新建和删除。 [" v) ?; O3 N D2 r* p
( t- L, t+ o% j9 ~3 w' ?2 @
7.定义链接的样式
: R" X6 d4 C4 ]7 O9 J3 NCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:$ p" t/ H6 x- l1 C. g/ X
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
9 x& r+ ^1 s9 C9 q U$ q0 ha:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}) T5 r! a, D! H( v1 Z% a( w
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}) Q# F \! G; _* ~+ M+ V) n) y6 f
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ! W" r! y! |- O" ~0 V6 [' O
) {$ B% O+ D e6 ?' _, z以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|