|
|
CSS是Cascading Style Sheets(层叠样式表)的缩写。是一种对web文档添加样式的简单机制,属于表现层的布局语言。; t' y7 Y* F( A- j. o: N" w
3 P4 V( Q& g0 f- v! \6 H
1.基本语法规范' }7 G* E' t5 n B; V
分析一个典型CSS的语句:
' E$ R7 n: y1 ^" \4 N& Kp {COLOR:#FF0000;BACKGROUND:#FFFFFF}
) Q3 w/ f. Z0 E7 a9 Q) F o其中"p"我们称为"选择器"(selectors),指明我们要给"p"定义样式; % u) T& @; @3 z# l6 S
样式声明写在一对大括号"{}"中; 8 ] M: R2 }3 p! \
COLOR和BACKGROUND称为"属性"(property),不同属性之间用分号";"分隔; # q. ^: c7 n5 r5 f- y+ Q1 P
"#FF0000"和"#FFFFFF"是属性的值(value)。3 ]5 [7 @8 ]6 H! g% y
; u0 s0 Y4 [& G3 _0 b2.颜色值" [1 ?% Y& r6 G r4 h
3 A' B5 z4 G2 f; Z) B颜色值可以用RGB值写,例如:
, p9 `5 r& y: ?$ D# r( f5 \0 C& z( o$ U4 o2 x; l
% u7 r. L* N7 k& E7 {6 m,也可以用十六进制写,就象上面例子
7 }+ U% ^* T. ^$ i" I4 z8 C# v* |( C4 H" p- ]; V- H" `6 |6 O- z
' B, R3 r$ b% U2 W+ G如果十六进制值是成对重复的可以简写,效果一样。例如:#FF0000可以写成#F00。但如果不重复就不可以简写,例如#FC1A1B必须写满六位。
V) `, d" {: j0 P5 ^. h$ m! R2 E8 U* a3 n, F/ S1 Z
3.定义字体# I' W! z; k- q
web标准推荐如下字体定义方法4 f c5 k; q, {. l5 y5 \
/ C4 T; v L, X# T1 s7 o+ fbody { font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; } & m1 q6 Q* ?# R/ I1 }+ d7 ?
字体按照所列出的顺序选用。如果用户的计算机含有Lucida Grande字体,文档将被指定为Lucida Grande。没有的话,就被指定为Verdana字体,如果也没有Verdana,就指定为Lucida字体,依此类推,;
) A% u/ m% N6 r( a- D9 ZLucida Grande字体适合Mac OS X; 0 C8 m: V9 R6 F( G# x p* s ?
Verdana字体适合所有的Windows系统; ' a w! | `' e6 C0 x9 M
Lucida适合UNIX用户 : l# G7 f [4 K3 J j+ N" d
"宋体"适合中文简体用户; * C7 r7 k; s& l. _
如果所列出的字体都不能用,则默认的sans-serif字体能保证调用;
7 Z, A) P# L' X h: \
1 q, U# Q+ t' `( Q2 h4.群选择器
3 E' f6 u* J) t. P* b$ p) G3 M. ?( ^2 }
当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:
" J+ R: [7 M. X( w) U0 J4 U d. i7 F b& x# k4 B6 Y* @
p, td, li { font-size : 12px ; } * X) L/ D- d( N
就是给li下面的子元素strong定义一个斜体不加粗的样式! W& n5 O; z* S0 ^# [
% V3 I0 }- x2 W) K0 p" J$ `+ B6.id选择器- u! e3 }9 A( {% O) d
! y) g6 w ~, G* q1 K用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。例如我们首先定义一个层
0 X) j& w9 _! Q* K$ ?, v1 x0 q& B7 @4 K- |) p4 N( B, o& ?
' Q5 V' ~. b, W9 \# X然后在样式表里这样定义:
3 ]5 v$ M; ^3 c v( d" u* e) l
6 j) c. I, Q+ y2 A8 {. k4 Q* y1 o4 x2 p# o2 y" A d* B
#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}
" H% w1 V( t* I8 e9 Q其中"menubar"是你自己定义的id名称。注意在前面加"#"号。6 M7 j q& F- ` t! v
/ {# Z( V% a e' l( R
id选择器也同样支持派生,例如:
4 h$ G- s3 B% Q2 Y, b$ U6 T#menubar p { text-align : right; margin-top : 10px; }
0 c; j3 d" F% e+ [! b7 F这个方法主要用来定义层和那些比较复杂,有多个派生的元素。. j" v/ E8 W& E( B
9 s, R' d4 L' _
6.类别选择器
9 G8 t& Y- ?. a7 E# Z) ?7 D6 h# O
在CSS里用一个点开头表示类别选择器定义,例如: e" Z) C' @! z7 N" B( {: `# w" Y
.14px {color : #f60 ;font-size:14px ;}
, y, ~8 s* p& N& R2 D, C. P1 Z h2 U" X7 v
在页面中,用class="类别名"的方法调用:
; G8 ~' V# R' [/ E5 a<span class="14px">14px大小的字体</span>
, ?4 L3 U/ i( m1 ]4 u* e) ]6 }$ d+ P) e$ M
这个方法比较简单灵活,可以随时根据页面需要新建和删除。+ i/ }' \, X: N& P0 j; z; a7 A
/ f$ @, F5 ?. r2 d" v$ I; e7.定义链接的样式
, {, p7 m2 a, L, V0 I" ?8 [CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:' }- x6 R' R# K5 @
a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
8 Q0 ?6 A- y* `a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}4 U2 |/ g! T- [1 K7 G$ V
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
* D) p! `/ w e& n& za:active {font-weight : bold ;text-decoration : none ;color : #90 ;}
3 Y. K7 e3 M0 C. u5 |+ @% _2 ^
- Y: k1 Y0 J( w8 K/ T9 x0 R以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。 |
|