|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; E! L! }2 R3 J2 y
- L5 c3 |* b% V* z1.基本语法规范
' D, C# }+ ?* A: k. n* K6 c分析一个典型CSS的语句:" [8 a: {; M: D( f# `
p {COLOR:#FF0000;BACKGROUND:#FFFFFF} % ~* T, j' J9 @0 h0 m |! A! Z
其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; / t% N+ w# _. `% g5 n4 f0 W/ q
样式声明写在一对大括号"{}"中; . T% M$ k8 ` }3 e0 {# a3 d! S
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
! ]; W9 M d* P; z, A"#FF0000"和"#FFFFFF"是属性的值(value)。
& u1 e% }" j- y, t
/ Q/ Q! P. Z* ?2.颜色值+ |/ J& Q& b4 @
, Q5 p1 I% @9 F8 K: M颜色值可以用RGB值写,例如:& l9 ]2 H" ?; J1 N) v2 r- ~+ o
# \3 Y. I* x2 ?3 i j. E: b4 M1 S
" d6 J' L. ~; R- q! b ?* H7 L# B,也可以用十六进制写,就象上面例子
+ n+ m) y+ `" P/ g, u* i
: g/ }/ i( E, [3 B$ ^2 a/ D& Z2 y6 B5 H: s* \
如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。0 c+ i1 R; ^8 M% x. F- W" U- l
0 j0 ?9 I3 p& w& ^6 ^( }( `1 b/ l
3.定义字体
+ K9 Y% U3 o. m; j! j9 O+ bweb标准推荐如下字体定义方法
) g# t$ l! A' ^ H# R
! C y; K1 t5 \6 V- e* l- Xbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } $ c$ x7 M. O. z$ S- x
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
/ A2 w+ f; b' B/ ILucida Grande字体适合Mac OS X;
! R& n! B7 W. w2 N& cVerdana字体适合所有的Windows系统;
! N6 H/ ]7 U4 o3 d% ?Lucida适合UNIX用户
4 j) F( l; a6 g+ _9 k"宋体"适合中文简体用户;
, a7 @ x. d! |8 c如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;0 d4 f+ s% ]0 j F, X
* x7 q- k. K3 z# P1 Q" y# @
4.群选择器
& \' Q* E" E# b* r5 K
. b- ]; M" C! a6 u当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
; N/ F' V& Q0 i) l! d
6 p8 \: R V) A$ {& n: D p, td, li { font-size : 12px ; } # e a4 M+ J0 o
就是给li下面的子元素strong定义一个斜体不加粗的样式" ^/ X1 i+ p9 ]4 C. D. {7 k+ |5 E
# r1 W; `- I. ]4 H3 ~
6.id选择器
$ o( n3 F& w" X8 l1 G7 b5 ]. T! L& _ ^9 P
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) v. E' \' G" p! \# g! K; j# R1 H. H4 b* p9 b' F7 A
. I- S. ^0 G6 u* v! s7 v& x
然后在样式表里这样定义:6 d" C3 n' |- B! [" p: t2 Z
; h( |7 j `* s* M% R: t" y4 l5 i" A6 F* h
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;} 3 E; D. `; i" l( u
其中"menubar"是你自己定义的id名称。注意在前面加"#"号。
0 ^5 J+ K8 n2 ?8 ]& W
1 U- A2 O- u3 U% ], g8 _. lid选择器也同样支持派生,例如:
2 ?8 T R. |! @4 Q5 m2 C#menubar p { text-align : right; margin-top : 10px; }
+ f) U8 c9 w7 v, E( i: s这个方法主要用来定义层和那些比较复杂,有多个派生的元素。
Q5 j D- X) r) G0 O
6 h" V2 F7 S% y2 V; R6.类别选择器
/ z6 h9 [9 P8 ]6 ^+ s
" e0 u) q! X( P* G在CSS里用一个点开头表示类别选择器定义,例如:' S- z% c/ B, L1 z# [
.14px {color : #f60 ;font-size:14px ;} ) G/ q9 Q" L& i& E* J
6 S& n1 o& D5 f7 a( q在页面中,用class="类别名"的方法调用:( h4 d1 ~$ V0 } @8 `3 H
<span class="14px">14px大小的字体</span> " u3 B4 U$ r! n
0 C% s4 h* g7 N7 K1 M3 O/ U这个方法比较简单灵活,可以随时根据页面需要新建和删除。' O5 D: N, Q- y* u+ C, J
5 M4 B; ]/ G3 V T; h7.定义链接的样式7 A( ]9 Z9 F* s' u- ^* _
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:" r" _* L0 H3 Q7 t
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
; X% X" \6 K$ F0 W8 ja:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}) H) Y) `4 F$ A4 l! S4 w+ n
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}) {! V3 V3 ~; T3 M: u1 h/ m
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} # Z1 r) V- n% x" \6 N
" J- p3 e: O. e4 I& K: L) f2 \4 {以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|