|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。+ |5 T- Z, J; H
9 k. b* z5 D2 T! ~5 t! }
1.基本语法规范! \9 c6 \4 n, {: [* Q
分析一个典型CSS的语句:
/ ^! n' m8 S0 y4 g B# X8 ap {COLOR:#FF0000;BACKGROUND:#FFFFFF} + H4 ~) ?' e5 K: c
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
- p/ G1 l4 o$ y' q样式声明写在一对大括号"{}"中;
2 I& P: j# {0 i. D- |' w% m! yCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
9 `! s" W$ Z) F, u/ d) o+ t5 C* X9 v"#FF0000"和"#FFFFFF"是属性的值(value)。. ]' i v1 h/ T, A) n
" W0 W; F: x) ~1 V2 ?& F9 n2.颜色值
: ^: R, G* I6 V j2 V6 z: s n
# k; W* `! T/ @1 G4 [ x! `4 ~颜色值可以用RGB值写,例如:" f9 I; K8 M" G, P
" W$ P8 C7 u" N+ U# x; s- |
. G* x9 p' \) Y3 S: l) A) J! }' M,也可以用十六进制写,就象上面例子7 U& \* f1 B* e6 G5 s1 l
' g: V \& t, k8 c) |9 ~' u; n
% i- C+ V; |; A8 F1 t" \( R7 f如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
. j5 E2 L+ i2 y( ]) c' N8 {) @" R( ]0 Y# x o% Z' ]5 v
3.定义字体
8 H, N; L; a$ C' a3 o- I3 s: ?% r+ Mweb标准推荐如下字体定义方法2 [* g6 U4 Y" v* O
! r3 ?) B6 {4 U% x7 |body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } R' s$ ?$ Z( j% S6 z1 T
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,; 8 W9 i% |, s( r# m% _" z) ^" O
Lucida Grande字体适合Mac OS X;
# ]6 V6 C" m: G3 l0 cVerdana字体适合所有的Windows系统;
1 k. L' I9 ?7 J: ALucida适合UNIX用户
! W( B* k9 R) n9 b: V"宋体"适合中文简体用户;
# K% n! ]0 m9 n- {* n4 h2 }! Q+ Q如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
8 Z* O. L: u8 x7 U1 X. B* K- H# ?- t2 U( C7 k/ x2 Q
4.群选择器
0 D6 r* v. i1 f( m( S% {- R
: E) m6 A+ t+ ?! f& O& ^5 x' T8 F当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
4 L9 }1 S: ~! O2 P$ z* {
* c/ @; ~6 f+ o) n2 U q( O p, td, li { font-size : 12px ; }
3 _6 N# I; b4 j# C就是给li下面的子元素strong定义一个斜体不加粗的样式
9 D& t: ~2 D% i5 Y8 T* A) E2 p1 N0 I( D
6.id选择器
$ O* U/ L; b/ c7 U3 Q0 Z$ \3 c
4 z, e$ d/ j6 U! ?用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层* W+ O" ?/ Z* r' q
- C# `5 i! F9 ]; ?1 S
2 N, O9 X5 c3 M" k2 p8 @9 s& ^
然后在样式表里这样定义:
- C; c, e" M; W! r
J6 M0 A Q5 |' ~- y9 l
0 ~- ^$ c( k H+ _" @2 f#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} , ]; ~( Q2 V5 t1 s4 W' q
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。% q( ?3 D8 a: {& Q$ ?
9 s ]9 r* f, X& v0 Eid选择器也同样支持派生,例如:
) w& ]/ h6 U7 v5 K9 y#menubar p { text-align : right; margin-top : 10px; } $ {+ ?- h- v; y
这个方法主要用来定义层和那些比较复杂,有多个派生的元素。" t4 i. I, `+ M( K% g1 P/ x
" m7 T% N0 B- e/ q6 S) B
6.类别选择器
9 F1 Z5 p% Q: ?. d' a' W3 I- K
# X' _+ v8 {' D在CSS里用一个点开头表示类别选择器定义,例如:4 n3 Z0 Z. y( I/ N; L$ U9 s
.14px {color : #f60 ;font-size:14px ;} 4 c+ u8 D4 O: C. u- ^7 K7 K& r
. l4 ~6 P; A/ Q$ H9 c9 k1 J1 ?在页面中,用class="类别名"的方法调用:$ N2 A, m% N' w' p4 ~! F
<span class="14px">14px大小的字体</span> & u5 {- J+ J3 ^! v# X% q
9 W' _7 u. I9 u; |/ Z R+ D8 K1 O+ b% p这个方法比较简单灵活,可以随时根据页面需要新建和删除。
. A2 O5 p7 Q6 T( h ]3 N, H' {) v7 g6 l
7.定义链接的样式" C4 y' K$ L# N1 t& r$ g
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:
6 C# j# p2 Q/ f4 g; s D% Ta:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}/ G! W* \( B& K2 z
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
9 v" O) h( ]+ Ja:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}! l+ {* m' V- T) @+ Y/ R
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
. A+ W( a; q3 q3 s
; R: C! l5 U* }以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|