|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。
3 y0 ]. u3 a0 C
/ X4 ~! @' w- Z1.基本语法规范
- p4 \& x K4 S9 F- E分析一个典型CSS的语句:
* [) _5 O9 Q& P- P/ D Q- T4 Ep {COLOR:#FF0000;BACKGROUND:#FFFFFF}
0 N7 _+ Y0 P( ~4 g" \8 ^. m3 o其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式;
. M. d; \+ S+ {: H: R& l. \样式声明写在一对大括号"{}"中;
6 ^- c7 R: f' v" gCOLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
7 ~# [9 A. j1 `; T"#FF0000"和"#FFFFFF"是属性的值(value)。
8 E+ | o6 T6 d, O$ z
k& S/ I! T8 l2.颜色值
" s. h M6 |5 Z" U
/ \" C% F0 @; m7 A% d颜色值可以用RGB值写,例如:
N6 E8 N' V8 T6 x+ s0 _% F# g2 }; x
, f; E& Z6 n& l$ y/ d1 d" @,也可以用十六进制写,就象上面例子" i% N3 ?9 `$ B- [1 X
. i% ~% [" L; G# y& C5 D+ O. H8 s. g: X
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。4 V& N. z9 ]" \: \3 L4 k6 R
# U U |/ o* u0 y
3.定义字体7 p- ~ |5 M4 J" W z
web标准推荐如下字体定义方法$ ~ Z$ i3 r% J; V, M! F$ n c
4 ?1 }! H3 U" e. Vbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
; B( Q4 _% N+ h5 h' J3 L6 y- F, m" [/ R字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
. a4 ^! z5 {; y, b; fLucida Grande字体适合Mac OS X; , ~; n# h0 i( P& @
Verdana字体适合所有的Windows系统; 7 h& @6 G A9 E8 ~+ A F# E
Lucida适合UNIX用户 4 G" T) o5 {1 ]' ]; `
"宋体"适合中文简体用户; 9 ~4 S* E% s' y/ L
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
+ f8 Z* {" h% W" Q" N3 f+ w
+ ?" R9 Z9 L6 J' H5 J4.群选择器/ \8 s9 h Y& @. j" O& R( p
$ W) k- `# M4 A6 e" O! s
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:5 N& l! Z# Y$ ^, J9 n1 F
! i H7 b' k) k& ^/ l p, td, li { font-size : 12px ; }
+ e# P" g6 o2 l* n5 Q# V就是给li下面的子元素strong定义一个斜体不加粗的样式
$ J7 G2 {4 p+ G+ G2 M4 e; l" k# Q8 H) u5 i( q$ C
6.id选择器
4 T/ ~3 Z; G: x8 R9 w: W5 `9 u& E: E* a9 ^# P% P9 g, z
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层# g4 i6 C1 V, K, w
% g! L$ | Z4 w: t H) y* C
~6 H1 ^) E+ O然后在样式表里这样定义:2 _6 v l: i1 }7 T5 _; c" [# y
7 W3 f8 C* S4 e0 _. H
l5 h" A+ g: c( D( B* A#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
$ y5 p' C! D# U& k- s2 [其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
! A& M9 p& h `7 q, `* g* b" N2 N9 @& O: w4 N8 c+ C
id选择器也同样支持派生,例如:
$ u/ g- V% o5 ~+ r. H7 W4 b#menubar p { text-align : right; margin-top : 10px; }
4 \/ h- C' Q6 u这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
) I9 Z. b" c+ \5 g1 S- I/ [, _3 s. U; I2 o- \% H6 c. \8 j
6.类别选择器
2 _7 z9 d5 j9 C0 v9 U2 Q) G; H% n9 q o# N+ j+ q
在CSS里用一个点开头表示类别选择器定义,例如:
@9 ?( X# a2 A" g% y& y: T.14px {color : #f60 ;font-size:14px ;} 8 C4 S" f) `2 a& a5 O2 O
4 D/ {2 w; K& s# a1 F& C. T在页面中,用class="类别名"的方法调用:2 }. k, A; K: l& z" l, L
<span class="14px">14px大小的字体</span>
# y* \" ^: _' r% k5 u1 Q3 M( E1 L' t# X
这个方法比较简单灵活,可以随时根据页面需要新建和删除。: |; a% c/ |* j2 {1 p5 F; a
! m2 U$ |- M6 ?0 G" Q$ j% c2 ]) @# w7.定义链接的样式& O! Y! ]; `5 y2 }2 ?+ k
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:, O* J9 \7 {, a. |+ A& q. i* {
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}6 Q$ ^: E% D% K* C) V
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
& t) z$ _ i6 ?8 Va:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}: B. D* \$ \( N2 ?
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} 0 w. @9 G% \' X1 K
8 E( l3 G" |; ~9 A8 {2 o
以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|