样 式 表 全 接 触（4）

四、样式表的定位
  b' X3 x" l! m% C: L9 X
) P" a8 n) O, L5 T　CSS定位的"positon"属性能够使用两种方法定位HTML元素：相对定位和绝对定位。所谓相对定位是指允许元素在相对于文档布局的原始位置上进行偏移；而绝对定位允许元素与原始的文档布局分离且任意定位。CSS的定位属性共有9个，分别是：
8 W1 A2 G; [/ f4 R: P) V& F& H/ V1 w3 t' \+ ^4 ~
position、left、top、width、height、overflow、z-index和visibility　position . ?9 i$ Q/ D" }1 O
: s8 a& N1 O' S1 C  L( k
positon的属性值有absolute、relative和static三个。当使用绝对定位元素absolute时，被定位元素是独立的，它与上下级元素都无关，完全独立于其他内容。当使用相对定位relative时，该元素对于上一级元素的位置进行布局定位；通过相对定位，使用脚本语言就能实现动画效果了。
+ W* R: S, U2 V5 h
% g% a* B, ]/ n9 L5 S6 k& v! dleft、top
( s3 A0 v+ y& a: D$ x  J& d) J% ]" g
CSS在格式化文档时，是将对象放置在一个个的容器里，再进行格式化；这个容器的左上角就是定位的参考点。left值就是容器的左上顶点到上级左边界的距离；"top"就是容器左上顶点到上级元素上边界的距离。
: |' b, n8 d2 [( B  }+ i2 V) N% }1 O  f: h
width、height 2 c. q5 n4 T. z$ `
# `. o) W# u. Q: q# N- O  Y. o/ v
适用于绝对定位的元素，"width"和"height"定义了元素所占空间的大小。可用百分比或数字定义。 - o9 E! q$ E3 }5 P- k. p

/ h3 _" z  d$ f* X4 Boverflow 7 R- b  N2 z& ?1 o3 s/ m. g
  j; @7 @% r- R( C/ ~
此属性定义了元素的内容超出容器的宽度和高度后，浏览器怎样处理。其属性值有四个，分别是： / p0 O2 ]3 h; K# n1 Y
  V8 m( y* }3 A. _4 [% l6 F
visible：无论定义的width和height是多少，其超出部分都无条件显示。
& q* |2 X, p4 z* M: G1 k1 F* a' y% j/ q2 q0 N; M" X0 i
hidden：超出定义的容器的宽度和高度部分将被剪切。
' p4 L) F0 T/ b
0 i. f, k. |1 Y( h) u3 {scroll：浏览器将提供一组滚屏工具。
8 O' V: _3 S4 P! f) g* ~
  n1 b1 z6 w+ L$ l' bauto：根据浏览器的不同而不同，通常会提供一组滚屏工具。
' o# D/ J1 x' X- N6 [9 ]5 s6 f9 C. D! {4 |1 x) N/ J5 V
五、样式表的引入 8 @5 e; P" S5 `# X7 W" j/ T9 O! G

  \: ^$ Z& d) r8 ]  ]/ |* f% H; \　　了解了CSS的定义方式，下面将具体介绍如何在HTML中引入CSS的各种方法。
+ k  E( S2 w1 k1 q+ X4 t+ ~# Q% x( j5 Z
　　1、使用LINK 链接外部样式表单；例如： 8 @9 b2 L3 t- `9 R

: a( _2 G6 J6 h1 L  YHEAD
, ~/ f/ _5 ]; X9 v6 j' D9 s4 a! ~6 E% b) e) k& r( V
TITLEMy Stylesheet/TITLE 1 L. d2 S( b+ J& l0 u: k, E
+ n! W! R' h' F3 b" G8 e2 {
LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"
- K1 N! x/ R$ v8 @: R. ~
3 d- }$ t$ X  ], y8 }8 t/HEAD
2 l! z- K; C5 u3 l3 B' D8 }" X
3 ]  W  E4 m& b应用CSS文件的一个最大好处就是，你可以在每个HTML文件中引用这个文件，从而可使整个站点的HMTL文件在风格上保持一致，避免重复的CSS属性设置；另外，当你遇上改版或作某些重大调整要对风格进行修改时，可直接修改这个CSS文件，当然了，HTML文件一直引用最近更新的样式单，而不必每个每个HTML文件进行整，你说是不是挺方便的呀！特别提醒一下，如果你想建立自己的网站，这方面不可忽视哟，如果在建站之初没有网站风格的统一规划并形成CSS文件，以后内容一多，想调整一下风格会累死你的。
* z3 H; p6 r/ c% i/ L0 s; h9 a& n1 J" e( S% \3 u/ q5 a
　　2、把定义语句放在HEAD和BODY标签之间，这种风格定义产生作用的范围也只局限于本文件，其格式如下(套用上边的CSS) : `, o" n# s2 S0 _
# w; ?  Q/ K9 M8 s. D4 c
Style Type="text/css"
6 v8 P) M5 z! n" x( ^  b
* a3 U8 K! @* M　!--
  Z6 ~8 ^) g, N* T6 Q
7 |- ]  \  R6 j2 |/ S. o3 X　　td{ color: green; font-size: 15px; font-family: Arial } " e( e" e+ d3 a1 A% |9 M

$ F. Q8 A* @! }# C5 q　--
7 v$ ]. m6 d) I8 Z* N& B2 F) G, d3 m$ e6 M) i' i+ A) P
/Style 5 E  U% Y3 Z8 X, ^" Z& i

: R' @  H0 B8 X; W2 E　　３、使用CSS"@import"导入样式表单；例如：
) |, N3 Y% `5 [- P; I2 g- [5 K, c* ^# o6 X. k  U
STYLE TYPE="text/css" 7 x9 L* l" r4 [1 N2 g
' q7 t: P3 ]+ @; _# N
!--
! ^+ \; d$ M6 y. R# s5 U) Q
) t4 `/ J4 p. e, @* Y, @@import url(mystyles.css);
) v! C1 p# b' T' T/ h0 m/ e# X- I7 M6 N* ]& c8 c2 g
--
5 X! N4 A; x; e- {( W& M5 K& J7 R; q2 T7 W3 V( `9 n1 U
/STYLE : Y* @7 t9 R. n0 l* {3 v! w- r

  D; J5 y* T5 T% L　　4、在BODY内部元素中使用"STYLE"标记来定义;例如：
, B9 E- D6 f; K% S- e( A$ r1 `1 j
6 z7 \; j. e& [9 R! {0 Z; Z, }' wp style="color: red; font-size: 20px; font-family: Arial"我的样式表/p 0 ~  n# @$ a, z; {; C
8 [3 b: w9 E( ^8 f- v" ^" _  I
5、直接插入式
! K3 S7 z/ C& p  `4 n7 X
( \2 b) [" i+ Y　　直接插入式很简单，只是在每个HTML标志后书写CSS属性就可以了。这种方式很直接，如我们想规定一个Table标志中的字为红色，字体大小为10pt，则可书写如下： ) U2 {8 G5 u" r0 J  G2 e# }9 Z

/ \3 Y; f- s- e. }! A7 n2 T: U2 j9 @　　Table style="color:red;font-size:10pt" & l. T! i5 T! Q1 u3 y

* T2 D3 b6 D4 J: w4 ]- f% F( t( W　　这种方式主要用于对具体的标志做具体的调整,其作用的范围只限于本标志。