|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
3 E" o, b8 U6 c" }
A0 t3 n) V; J5 r1.基本语法规范
W+ a: \, o1 R# t6 H2 z2 Z1 ]6 T分析一个典型CSS的语句:
! T; n, a' M$ J8 m, z! wp {COLOR:#FF0000;BACKGROUND:#FFFFFF} ; r( R& D' E! ]; b0 i6 a' U" j
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; 6 }+ H1 a1 v- ~# u4 W
样式声明写在一对大括号"{}"中; : d, `3 R/ Z3 Y P3 G. p
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; 5 |& P! ?6 g5 J {( ]8 {. N3 u1 g1 L
"#FF0000"和"#FFFFFF"是属性的值(value)。
2 S0 w9 b% D4 c- P. A! k V5 t* z. R% V
2.颜色值
+ Y9 m& y, Q# N P! j" z& e8 k% i$ z% q$ @2 z5 J% \6 J. P
颜色值可以用RGB值写,例如: n) Q3 G( L8 P8 ?+ j8 h
$ k7 V% n; G1 P; D+ S1 a
0 Z" x7 c _3 g- U,也可以用十六进制写,就象上面例子; ]- f- A0 T% s- |% A- k" b0 C
; P6 ^! _/ D i1 @
+ o. Y3 |, S$ _: \9 c如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
1 { k, N; { m
! o/ P- o" o* g+ g! a2 f- v7 {% z3.定义字体# _: X ?: r' t* T4 {; O
web标准推荐如下字体定义方法
& g/ f& G# z3 x; w( S6 B9 e! Q5 r$ f3 {
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
: i( a+ ~' ~' l( Y6 X9 G字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
2 ^/ F1 [4 t& I6 q) `Lucida Grande字体适合Mac OS X; 1 A+ L3 ^3 W6 C3 x, B) M, E
Verdana字体适合所有的Windows系统;
3 S( U F! u3 S8 yLucida适合UNIX用户
/ X, s+ j5 j1 ?% K* p"宋体"适合中文简体用户;
6 x/ i% S$ e2 u" n9 g如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
! v. O# r" ~7 W& j
4 t+ d: j' w) Y' U4.群选择器$ `7 { _5 w% X5 f; ~" D' Q# X1 A; Q1 b
9 u9 ~5 E* H; H5 X5 `
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:. z# U/ O; W% i( p0 N+ f0 i9 H
; r9 N8 {; y5 y0 R& I* L
p, td, li { font-size : 12px ; }
+ U( s# Y! W4 S6 C/ u就是给li下面的子元素strong定义一个斜体不加粗的样式7 o: O; F k. h2 ^4 z
: D" x3 D+ x$ x" G: D) p
6.id选择器4 z; C) c8 T$ C5 R
T+ i* H: @4 I* b: u
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层( g t% b+ H) E$ u
) f- B+ s/ h$ m7 A" [. s8 N
/ A A& Q3 d2 G' _' _1 `2 k然后在样式表里这样定义:
b( c5 L2 y! h8 O, r- |- A+ o) K* W
: I3 |. }/ h' m k1 O/ M
# X' E+ f! U4 |0 X V- H4 u#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
3 i, A! X. Y. K5 u* {其中"menubar"是你自己定义的id名称。注意在前面加"#"号。+ }, @$ s6 N9 E9 d* I& w8 r
4 D5 v1 C$ ~% I3 t, p" w. fid选择器也同样支持派生,例如:4 W S5 }- d! x
#menubar p { text-align : right; margin-top : 10px; } % H3 `8 @( M: M4 ^
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
& p4 W3 q: a7 Q b
: `/ b) [5 r9 d) F8 v+ x [6.类别选择器- ], t }. C D5 V8 M1 ]9 o) J
' A, h+ e# W1 o2 W( \5 [
在CSS里用一个点开头表示类别选择器定义,例如:) ?( R- h$ n3 r
.14px {color : #f60 ;font-size:14px ;}
4 z% j0 F0 @; b8 H7 f' C+ W5 n- ?* b5 Q' T: K6 \ E
在页面中,用class="类别名"的方法调用:- S+ ]& [+ z2 ^$ m- L7 y
<span class="14px">14px大小的字体</span>
( H9 b8 b) V# R* [) N% H B* [& k' e/ W( q2 v) I
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
( V8 }1 |0 }- |# x8 i) H2 h8 C9 W ~) e; Y; y, ~. H) G
7.定义链接的样式
' u" ~% x1 {9 @6 {1 J0 V& GCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:. D6 E8 J, H5 F
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 m6 R2 |7 Y# \* C6 H
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
8 p8 l+ v' \3 v, ?2 ^a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}/ P) I9 s2 \ [! e+ F
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} : K+ n# P* U: z! R
4 [* [7 Y! E$ I
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|