|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。- L9 s% m6 Q! }/ a
: `* `2 G& C/ @5 ]; y( g" `
1.基本语法规范
0 {' ^5 q4 \/ f J; S' _分析一个典型CSS的语句:
: J) b; x- m7 \7 H' I C# |1 gp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
% ~" T, S7 O$ u5 j( H/ p+ Z5 ?( z其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
7 \5 P( K3 g/ H9 Y4 O样式声明写在一对大括号"{}"中; 4 n# k; C6 j6 z, b& X5 i, c
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; # n V* T# G$ Q, ]( F
"#FF0000"和"#FFFFFF"是属性的值(value)。
/ S. J$ B7 g4 l% h' J1 y3 U" e, I* Y7 ^
2.颜色值' V! }; F+ P2 w4 x- w0 p8 o
& F& @( L6 M* \( u1 k& l
颜色值可以用RGB值写,例如:/ z) k2 H2 c9 O( k" x" B
- ^ L+ D* u# Z- J7 i/ q, U7 _; A, j& `7 j2 R& K' O: b
,也可以用十六进制写,就象上面例子+ W& ?! _/ S j# L
+ f" a u* L+ f0 [0 S- L: w9 V# @4 }
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。8 f# T& l) v v0 S
5 u- Q" q' c* d7 v6 T3.定义字体
" x. T: `* E# R+ W0 \2 c1 lweb标准推荐如下字体定义方法1 v b4 _, f+ F- l, r8 u
) ]7 `, r% F! V4 L
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ( X' H$ j4 s( v& S4 s
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; - N# ^. D- H7 ^ S6 K% J, b# a
Lucida Grande字体适合Mac OS X;
( B7 I* i# d4 b1 GVerdana字体适合所有的Windows系统; 3 a* J: g5 F6 O, v
Lucida适合UNIX用户
2 A) n) t8 U5 d7 `( E4 i"宋体"适合中文简体用户;
V# t1 T* _5 g3 j% }+ a如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;0 `& Y0 f" b4 U$ w
! X" T3 e- r6 s" a( G, c* v1 f4.群选择器! ~6 l. o2 e! r% m
$ P9 Y# C J' e" {: _( {! ^
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
) p! r0 j. C: Z% q+ Y. i- z# P! b+ T$ [* m
p, td, li { font-size : 12px ; } : U& ^0 {' k/ c4 M6 ^5 m9 ]
就是给li下面的子元素strong定义一个斜体不加粗的样式
5 K' V5 d3 B0 [9 k, ^) K& F! ~) y' n; L# ?
6.id选择器* v6 h/ m; t5 e% R- W4 \
+ J: m2 J# L) D; M/ m8 h7 K用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
5 n9 x) q; L+ i( r n
" U" L8 c/ p- N e
1 a( C- {4 P7 G7 d) v然后在样式表里这样定义:
: x- i! [+ i$ v- t1 w
0 }; E* v- Q. I, e8 c2 Y5 h/ C J7 i) m _3 f% O3 ?/ _' t( H) r
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} . M' N8 ~2 Y: l [- J/ ?: f
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
3 h. P/ A) c% j
V+ l' ^% y5 j$ `0 @5 I# R$ Fid选择器也同样支持派生,例如:
6 k) P, y3 a# s' O) ~) p& G, k#menubar p { text-align : right; margin-top : 10px; }
2 |% f3 _$ z `这个方法主要用来定义层和那些比较复杂,有多个派生的元素。, _& F/ s% W7 H7 E2 ] ~8 v' j
3 ?$ Z' W3 O) x; `8 E ]4 W6.类别选择器+ [3 D7 P3 R7 t% N; u4 f
. c1 n, R7 @' l. K在CSS里用一个点开头表示类别选择器定义,例如:
% F( ~8 l$ T! v. @.14px {color : #f60 ;font-size:14px ;} . B* I5 W8 T0 k
% @( U/ b1 h- e: r: s
在页面中,用class="类别名"的方法调用:+ P" T) \3 K p. z' ?* v$ ~7 l
<span class="14px">14px大小的字体</span> / z+ z9 x$ e4 G) t6 \& X; t: _
/ X( L E$ o0 s
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
4 O( t, |' m: ~. Q5 v% _4 a4 c% e8 g$ Z! { b( I4 `
7.定义链接的样式
0 a; y. o* \2 i8 l' H* WCSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:7 p W1 s2 y! E, b( ]
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}% E+ C: q. f2 p! \9 c6 v% @ d
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}) _: k6 k1 ?) _0 r
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
& S: S! N" M- L4 r. c% Va:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. S5 k. m6 j7 _: l) q- k0 D% L9 L, Y
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|