1.4 CSS基础
在前面的内容中讲解了HTML，现在我们已经基本可以编出最简单的网页了。但是仅仅这样还是不够的，一个专业的网页需要在字体、颜色、布局等方面进行各种设置，需要给用户带来视觉的冲击。这一节我们简要介绍一下页面美化技术——CSS。
1.4.1 CSS属性设置
CSS（Cascading Style Sheets）即层叠样式表，也就是通常所说的样式表。CSS是一种美化网页的技术。通过使用CSS，可以方便、灵活地设置网页中不同元素的外观属性，通过这些设置可以使网页在外观上达到一个更高的级别。CSS美化网页就是通过设置页面元素的属性来实现的，下面我们就来介绍CSS属性设置的一些基本方法。
1．字体、颜色、背景等属性设置
字体、颜色、背景属性是CSS最基本的属性，其最常用的属性方法如表1.3所示。
表1.3 CSS属性设置
【示例1.10】下面通过一个示例程序FontColor.html展示这些属性的设置方法，如图1.33所示。
图1.33 字体、颜色、背景属性设置方法
运行后结果如图1.34所示。
2．鼠标样式属性设置
在一些网页中，我们经常会遇到这样一种情况，当把鼠标移到不同区域，或者是在执行不同功能的时候，鼠标的形状都会发生变化。这种功能的实现其实非常简单，就是控制CSS中的cursor属性来实现的。
图1.34 FontColor.html运行结果
【示例 1.11】我们来看一个示例 cursor.html，通过这个页面可以改变鼠标的形状，具体代码如图1.35所示。
图1.35 cursor.html示例
运行后结果如图1.36所示。
图1.36 cursor.html示例运行结果
上面这个网页在浏览器中打开以后，鼠标移动到不同区域就会变成不同样式。
1.4.2 CSS绝对定位
在 HTML 中布局一般情况下需要使用表格，如果要定位只有通过表格的嵌套来实现，这种方法的确可以在一定程度上解决问题，但是却不能随意定位页面元素，而且对某个元素位置的改变有可能影响到整个页面的布局。在CSS中提供了灵活的定位方法，所以在页面布局中我们又多了一种可以选择的方案。
CSS中常用的定位属性如表1.4所示。
表1.4 CSS常用定位属性
【示例1.12】我们也来举一个例子Locate.html来实现CSS绝对定位，其具体代码如图1.37所示。
图1.37 Locate.html示例
运行后结果如图1.38所示。
图1.38 Locate.html示例运行结果
1.4.3 CSS实现表格变色
在一些 Web 应用中经常会用表格来展示数据，当表格行数比较多的时候，就容易有看错行的情况发生，所以需要一种方法来解决这个问题。在这里我们采取这样一种措施，当鼠标移到某一行的时候，这行的背景颜色发生变化，这样当前行就会比较突出，不容易出错。
【示例1.13】我们最后来举一个例子colorTable.html，来看CSS是如何实现表格变色的，具体代码如图1.39所示。
图1.39 colorTable.html示例
colorTable.html示例运行后结果如图1.40所示。
图1.40 colorTable.html示例运行结果