|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
& x( t% i, n$ L+ K
9 I) i( A. P+ J% U; s' t) Z1.基本语法规范
0 p/ c+ S! k. a$ {! b分析一个典型CSS的语句:
6 w, ]2 E7 v1 c; s0 t9 s2 T6 Kp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
& M- _. |- p2 o' Q1 l) ^( k其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
" l/ d8 k) m2 K3 u: j样式声明写在一对大括号"{}"中; , R5 f6 Q _) W$ M% R% m
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
2 P/ _& }0 ~& ~"#FF0000"和"#FFFFFF"是属性的值(value)。
& l9 `/ @& R5 w6 u, A) k% G8 \
8 v- a: G+ [: P0 N) e. M9 F- \, q6 d2.颜色值
' k* S" ~3 L( _; t3 {
8 l9 R8 P1 C, I5 T- b2 `颜色值可以用RGB值写,例如:* d- z. q6 {% ]4 o5 k3 Z5 s
) R( n2 C+ ], d8 H+ Y- x0 f: V/ U# [( a+ h; M
,也可以用十六进制写,就象上面例子
; p8 K: X* M B f1 |7 |. v1 X3 t7 R0 c
6 f/ x' M: V0 k n如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
8 ?/ Y" x& F0 x6 G1 ~
2 z) y. M/ m/ K9 u1 g" N3.定义字体
* [, B# j0 V; }web标准推荐如下字体定义方法
6 |/ O6 I" y6 c( p$ w9 z. i: D2 D
5 V& h1 j4 V9 l4 B8 pbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } ! |7 F( u7 J. A4 `/ o
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
* R3 D3 K0 _+ O0 Q P% W9 h6 |Lucida Grande字体适合Mac OS X;
% Y7 g& b" ~7 S6 s7 O7 v8 {Verdana字体适合所有的Windows系统;
1 G. ]- V$ ?2 s( M Y% n" h+ G( bLucida适合UNIX用户
; S" @, M1 c6 @5 K"宋体"适合中文简体用户;
6 _: u p0 o' h1 w: q) Y1 c如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
: W! x) H0 @& T5 l& K4 W9 r
( O) j, |5 B0 B- }+ O4.群选择器
/ i/ h/ y7 J8 O1 S- a% U& s W4 a& `* k; W
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
, [; B& q0 V7 I# }4 Y n" k$ j5 T- V% k$ z: H7 v
p, td, li { font-size : 12px ; } - `% f+ {5 P7 o( C5 H6 H8 l
就是给li下面的子元素strong定义一个斜体不加粗的样式
7 _. a2 q2 B7 X1 X' Y6 P
* v7 u7 W6 T0 W& T1 ^6.id选择器& E& Q: j+ V* S1 k: m$ G, }
& @4 R. S& T0 x, _用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层5 r }$ F; \& c6 r: J$ q) A Z
% I# u/ J$ i) _7 _
# U) c( K6 b2 ?+ k" w
然后在样式表里这样定义: f* C$ @* H& @- p H2 }' y
0 k3 }0 c3 `# x0 X8 z; i) Y
: e8 D( e: E+ @! U0 S! _- W) {( J#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
6 O6 }* i7 U# f3 l. i* Z6 k6 Q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。) r& }" w: N0 k4 X5 E' M. ]
8 p, b" P: N' s! k* Hid选择器也同样支持派生,例如:
4 o& d2 k3 G' N9 W#menubar p { text-align : right; margin-top : 10px; }
! A; ]5 T- L; V这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
$ D9 J7 N; k6 Z! g
* s) j2 \# U: c# F5 ^6.类别选择器
/ w! u$ Q, s4 t3 s) N" [" p- S2 B
* T8 n- T/ ^: L5 s0 d在CSS里用一个点开头表示类别选择器定义,例如:6 K; r( V( R6 h3 h4 m
.14px {color : #f60 ;font-size:14px ;}
* T0 f, x/ c' F4 j$ c
# ~- ~6 c7 B/ M7 X在页面中,用class="类别名"的方法调用:
2 x2 Z8 }, U* N* |<span class="14px">14px大小的字体</span>
( T9 s1 J3 I+ Z" n* R4 K* H
: U8 @/ X2 @- m这个方法比较简单灵活,可以随时根据页面需要新建和删除。
% S" a* h* C' v8 D* N/ O0 n h! B1 D& L2 L/ Y1 K% e4 J
7.定义链接的样式, f7 V5 D2 q0 O5 i/ U: i9 H
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:; N8 k5 p- J$ h8 I" U' S* V
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}3 _# _) ^; X9 b# K' L9 T) \
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}! K; ~7 @6 D& `1 x5 U7 M
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
9 ^/ v9 b* Y4 ?1 r2 s% la:active {font-weight : bold ;text-decoration : none ;color : #90 ;} $ S2 D" ?5 q/ V
6 X! h) s, D p1 j+ J2 l1 n0 R以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|