|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。# _4 l9 k j8 v0 e% Y2 K9 T
6 H# v) Y+ ^: J' [! K
1.基本语法规范
( ^& @( u* u7 v e分析一个典型CSS的语句:3 ]( D# f& E/ O: Q. l
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} ) Y3 s6 k) m- n; {( M3 l) x! P4 e8 P
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 4 H5 O. j) {# A
样式声明写在一对大括号"{}"中;
- f" V- ], [9 y- a1 fCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 1 L2 K3 A+ F) P8 _ {% P
"#FF0000"和"#FFFFFF"是属性的值(value)。
- }" R. |5 m& A& E4 a: \) ^) c* C/ W" [3 q7 j6 J9 J* ~
2.颜色值
" E W& ^3 B; b1 A% R
/ N5 w P6 Y) u! C. K4 x4 c! i3 H颜色值可以用RGB值写,例如:
+ K! }6 r8 o: D0 a8 n1 s
* N- f R8 U2 w2 J( K8 W- V; U& B! \
,也可以用十六进制写,就象上面例子
& G0 Z& c. P( M: H3 G7 ^& n
* C; @" b1 b6 t$ J e( a# D1 T( \. h& s/ [
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。6 ~ k+ n0 u+ s* T1 |1 P
( d5 n+ b! `! ~7 Z# _7 f# M m/ w- }) x
3.定义字体 s9 {( T E: z% l
web标准推荐如下字体定义方法# T" [& i Z% H
# L2 k0 Q( P2 @
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } / \$ c5 e1 n7 w# U& M. N/ c
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
- p5 t, n- t, `( bLucida Grande字体适合Mac OS X;
- z4 V9 e7 [8 s( B6 SVerdana字体适合所有的Windows系统; 1 C3 G1 @0 l1 c" K1 E' @
Lucida适合UNIX用户
# Q' N6 J" G* w0 L" R* q: R"宋体"适合中文简体用户; 5 m0 G$ J; [2 ]0 `; b3 B, {
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;) M# G9 E# j. z! n# D
0 U) Q- W' x; U3 Q+ _- _
4.群选择器5 k- d+ p2 j6 E1 k
% [( n8 J0 e ]" O当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
: |) Y- T, |- g8 Y" g T# h' w. G+ V" t- Z6 i" T4 K# @
p, td, li { font-size : 12px ; }
5 i6 c: G) q3 W) m" J3 R' j就是给li下面的子元素strong定义一个斜体不加粗的样式$ P$ x- J' A) j ?/ w
5 s7 ~' p1 z Y% ]/ m3 y! l4 O6.id选择器
q/ H6 b- ~0 l5 T9 O
) C" b6 A; @! L* C用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
6 e, ^! F) W# N, f6 q4 z0 V, p. X* I* x4 @( n8 {8 N
' |, z9 k+ b t E% e+ C8 i' n5 \然后在样式表里这样定义:
3 B7 {2 o" ^4 ]' o2 H5 L. N
6 a' V: E0 E2 J" F; J e2 p
% @1 B4 A5 U* {! @. \#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
5 M# C0 q; ?% \1 G ~其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 B& Q$ K- A& @7 R6 l( [: _2 g: R+ V- f f) c7 G! u+ _% ]
id选择器也同样支持派生,例如:% n. c+ x+ X/ T% }' G& F
#menubar p { text-align : right; margin-top : 10px; } 3 z8 [' @/ n0 W, V/ C
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。& e/ N0 j% Q7 G
/ A- B% u7 a4 b! g! [
6.类别选择器1 G' i: c3 e6 r" A$ \4 d2 T
0 A2 L+ \: Q1 E% {9 d) y
在CSS里用一个点开头表示类别选择器定义,例如:" B! t) c8 b$ V8 U0 k0 q# v0 S( H5 J
.14px {color : #f60 ;font-size:14px ;} 3 M4 d, Y$ D: F6 i
& u$ c' K4 b! E& e/ m在页面中,用class="类别名"的方法调用:- n% I9 x. h* b$ O
<span class="14px">14px大小的字体</span> 7 @$ Y, A! K9 B3 [: w2 l2 g
$ d6 h c2 b: s2 c* I3 `7 Y这个方法比较简单灵活,可以随时根据页面需要新建和删除。
7 r. {, V* a; {2 `' [
7 a; q% J: W8 G: c' ?( O4 S7.定义链接的样式
6 x; x0 U- ?: v" `! Y OCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:+ C4 w2 y) ]4 j/ z0 f4 c
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
+ N, K8 ^: e* z0 E M, wa:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
1 w+ i' s& `8 k, ta:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
) k" e, p& y2 q# l1 I* ua:active {font-weight : bold ;text-decoration : none ;color : #90 ;} ; b0 o' D$ @) E
2 B! m, T4 `" V G以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|