第三章 Css的运用
3.1Css简介
随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用Table来排版，用空白的图片表示白色的空间等。直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表。CSS按其位置可以分成三种：1)内嵌样式(Inline Style) 2)内部样式表(Internal Style Sheet) 3)外部样式表(External Style Sheet) 示列如图3-1：
这段文字没有使用内嵌样式。
图3-1
3.2 Css 基础语法
CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望 改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组 成了一个完整的样式声明（declaration） ： body {color:
16
blue} 上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。 在上述例子中， body 是 选择器，而包括在花括号内的的部分是声明。声明依次由两部分构成：属性和值，color 为 属性，blue 为值。 示列如图3-2：
这段文字大小是10pt。
18
图3-3
3.6定为基础和相对绝对定位
CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一 部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单， 它允许你定义元素框相对于其正常位置应该出现的位置， 或者 相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让 人吃惊。要知道，用户代理对 CSS2 中定位的支持远胜于对其它方面的支持，对此不应感 到奇怪。 另一方面，CSS1 中首次提出了浮动，它以 Netscape 在 Web 发展初期增加的一个功 能为基础。浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明 确浮动的含义。 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元 素在 X(HTML) 中的位置决定。 块级框从上到 下 一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。 可以使用
19
水平内边距、 边框和外边距调整它们的间距。 但是， 垂直内边距、 边框和外边距不影响行内框的高度。 由一行形成的水平框称为行框 （Line Box） ， 行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。 在下面的章节，我们会为您详细讲解相对定位、绝对定位和浮动。 CSS 相对定位 相对定位是一个非常容易掌握的概念。 如果对一个元素进行相对定位， 它将出现在它所 在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移 动。 如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设 置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。 CSS 绝对定位 绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对 定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。 普通流中其它元素的布局就像绝对定位的元素不存在一样：
20