|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。2 o! j$ L$ z8 n8 |& L
( |* [& V% C( u1.基本语法规范
0 [: C& u" g# u3 O4 V7 `. H分析一个典型CSS的语句:% l+ N8 l; i! X
p {COLOR:#FF0000;BACKGROUND:#FFFFFF}
2 }0 n0 {' d3 R; D其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; ! a5 F2 `' e4 A& P: ~: n+ C* C
样式声明写在一对大括号"{}"中;
# }+ L% G$ |8 O, @3 \COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔;
. G H) P, r: o2 I5 y+ O$ j9 D"#FF0000"和"#FFFFFF"是属性的值(value)。
+ k2 u! s& A3 `& V% Z) d- v8 p# R! @' m( _ U5 t; E
2.颜色值# `- [4 }1 x9 I! z6 h* a
% k2 L, z$ Y4 P2 S/ W' v6 P! A颜色值可以用RGB值写,例如:
: j) M4 v. m& K6 T( a6 W. L2 J3 {, k0 p% R* R7 [4 U1 d
4 b+ ]6 v: c. s$ g f+ {
,也可以用十六进制写,就象上面例子- g0 u: B1 a4 B0 w
9 Y& Z, f- ?) s& S+ k
( G ~2 C% ~+ R如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
4 t7 ], }! ~- m
+ g' r7 N: b) ^ W( T7 n" t3.定义字体
* K/ P- _, n, }9 G+ X2 n& q" pweb标准推荐如下字体定义方法+ _: z6 l3 Z* H |5 E. h9 T
" s' j3 m, C3 o0 t& [9 F/ g: y
body { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
4 X0 U+ J1 p8 Z5 B; i字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
' _$ f( w1 K0 YLucida Grande字体适合Mac OS X; 4 [; y, i$ O6 N- u9 n
Verdana字体适合所有的Windows系统;
2 G: W7 w ~: N6 B; ILucida适合UNIX用户 - P/ U3 d! l0 L
"宋体"适合中文简体用户; 6 V+ P O4 o Z; ~
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
7 v1 R9 q' R" K
9 c$ {) ~% i1 A4.群选择器
4 V2 Z0 G& U- R( E; N8 V* Q" l3 r3 p
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
% F( B0 l8 {7 f; o( S8 }/ K/ G
* `2 V- B) h3 w p, td, li { font-size : 12px ; } 2 m! a, n2 J& K, E; k
就是给li下面的子元素strong定义一个斜体不加粗的样式 L9 w6 U. h/ [8 O8 ? E
7 ?( f o" c' i7 X$ K$ V) C6.id选择器
% P/ }- Y. S2 X- n! f; }, }$ B1 k9 F9 B! w4 C
用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
) }0 S. a9 g1 s$ F' C- x' n* S( m- H* r9 t0 {
9 Q5 X3 T. c$ D; L) q+ j+ p. Y然后在样式表里这样定义:+ }# a1 {5 F' B" q* H" |
" _6 {3 S& k* i, }2 a8 P. i* C% U$ e0 t& P `7 ]
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
, u" Q* ]9 U; a% d% l其中"menubar"是你自己定义的id名称。注意在前面加"#"号。1 Y* T& u) w3 ^/ X' p9 b
: T/ K* B* K2 ^2 P) K4 |. |
id选择器也同样支持派生,例如:2 S' l8 c: W# Z O# R, q) V
#menubar p { text-align : right; margin-top : 10px; }
+ E/ _2 w- X* T; d8 m# Q这个方法主要用来定义层和那些比较复杂,有多个派生的元素。' f. s8 l2 V7 p) e: m: F- r
8 @ R' L k/ O6.类别选择器
, j7 l, X# h, t$ w: S( ?! K
# E3 G- u8 k9 B3 w2 d& u在CSS里用一个点开头表示类别选择器定义,例如:! F& T% ^& @0 D& G; U
.14px {color : #f60 ;font-size:14px ;}
' p+ [6 ^" e. V' m; s l
# P) E J- p2 P3 |4 E在页面中,用class="类别名"的方法调用:. U& O) U: C, T5 `6 @( P
<span class="14px">14px大小的字体</span>
5 d1 U& l; ^% h- d& E# z0 X3 ]/ t% Z: w6 W% o7 H$ {8 l; z
这个方法比较简单灵活,可以随时根据页面需要新建和删除。
& {2 t; b2 f) k6 L# y' d7 K( h4 t3 H b9 j! V4 D
7.定义链接的样式9 ?) {) S$ v# f/ h2 x. H5 n; d
CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:3 f; Y1 Z' r1 X& K; ~6 t
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
1 N5 ~7 O: g. a; J, R( y Ua:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}6 }6 u' r. k: H
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}, A2 w; Z6 i: C. F4 @/ _
a:active {font-weight : bold ;text-decoration : none ;color : #90 ;} - w+ f! B; Q: m( E5 c- o. e
" I1 N1 u3 k" `$ u以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|