|
第3章 开启CSS的大门
从本章开始，我们将正式进入CSS的大门，系统地学习这方面的知识。对于学习一种新的技能来说，最自然的方法就是从最简单的开始学起。我们这章就是这样，简单但是非常重要。下面就让我们出发，一步一步走进CSS的殿堂。
3.1 背景让HTML页面更漂亮
我们在前面的章节中已经对HTML的样子有了大概的了解，知道了它是如何发布出来，而我们又是如何去访问它从而得到所需要的信息的过程。还是用同样的类比，HTML就好比我们每天要看的报纸或者手机订阅的新闻短信，如果总是白底黑字，岂不是非常单调，提不起我们阅读的兴趣？如果页面能够更丰富多彩一些，肯定更吸引人，从而能将信息更有效地发送到每一个需要它的人的眼中。一句话，为了吸引眼球，HTML必须更漂亮。
我们都有这样的经验，在报亭中，几乎所有的报纸都是白色的，但是有那么几种报纸，纸张是某种黄色的，一下子就能让我们从一堆报纸中看到。这就是颜色的作用之一。对于HTML网页，这样的窍门同样适用。我们的第一个任务，也就是让我们的网页背景颜色发生变化，从而在众多的网页中脱颖而出。
3.1.1 控制网页的背景
网页的背景可以是一种颜色，也可以是一张背景图片。我们首先来看控制网页的背景颜色。
【设置HTML背景为预定义颜色】
其实很简单，简单的只要几个字符就可以了。请看代码
代码 HTML增加背景颜色：background.html
<html>
<head>
<title>网页增加背景颜色</title>
</head>
<body bgcolor=red>
<img src=1.jpg>同事周末爬山
</body>
</html>
3.1.2 HTML的颜色表示方法
HTML语言中对于颜色不限于上面和附录中所列出的有限种类，它可以用如下的方法来表示：颜色名称：也就是我们介绍过的，red，black等等。
#RRGGBB方式：使用两位十六进制数字表示颜色中的红，绿，蓝含量。R是Red的简称，G是Green的简称，B是Blue的简称。比如我想表示红色（red），那么用这种方法就是#FF0000。F是十六进制中最大的数，表示最多的程度，0是十六进制中最小的数，表示没有。我们知道，每一种颜色都是由三元色（红色、绿色、蓝色）按照一定比例互相调和而来的，那么在红色的方面最多，而其它的两种颜色都没有，这自然就是代表红色了。其他的颜色同样可以这样表示。绿色就是#00FF00，蓝色就是#0000FF。如果一种颜色不是那么红，也不是那么绿，也不是那么蓝，那么就是按照各自的比例形成色号，比如#CA2712。
RGB（rrr,ggg,bbb）：这种表示颜色的方法在网页制作中实际是比较少用的，倒是编程的时候用的多些，实际上它和第二种方法是一样的，不过是将代表每一种三原色的两位十六进制数字变成了十进制数字进行表示。为了方便起见，表3-1列出了十六进制数字和十进制数字的转换表。
RGB（rrr%,ggg%,bbb%）：这种表示颜色的方式实际上是对第三种方法的进一步变化，rrr%代表了红色占整个颜色的百分比。比如RGB（50%,0,50%）则相当于RGB（128,0,128）。
3.1.3 如何获取屏幕颜色
我们在某个网页上看到一种颜色很喜欢，那么如何得到它的色号呢？我们可以用这样一款免费的软件 --- 颜色采集器。
颜色采集器v1.0的安装和使用方法都很简单：运行即可。
如果我们想自己寻找一种合适的颜色，则可以通过系统的调色板或者软件来获取。下面介绍一下这两种方法：
（1）用系统的调色板察看颜色的方法。
我们单击开始--程序--附件，选择画图程序（我们也可以通过开始--运行--输入mspaint直接打开画图程序）。在界面的菜单中选择颜色--编辑颜色，就会看到Windows系统的颜色对话框。
（2）用Fireworks或者Photoshop等图像处理软件来察看颜色的方法。这里举Fireworks为例。这种方法只能取得当前已经用图像处理软件打开文件中某点的色号。
3.1.4 网页文件的路径
前面介绍网页背景可以是颜色，也可以是图片。那么，该如何浏览器背景图片的位置呢？
文件属性中的物理路径
3.1.5 控制页面上的文字
有关网页的背景和颜色前面已经介绍的不少了。网页由内容和格式组成，下面就来学习一下网页最重要却又最容易被忽视的一部分—文字。
控制页面上的文字显示效果主要是通过控制文字的字体，大小，风格，颜色这几个方面。那么,在网页中常用的字体有哪些呢？
3.1.6 给文字增加更多效果
在代码3-5中，我们做到了在页面上显示一定大小，一定颜色的文字，如果只能做到这一点，那还是非常不够的。文字效果还可以更加丰富，比如：
粗体。
斜体。
添加下划线。
添加删除线。
所谓粗体，就是指文字的每一比划比标准的要粗。粗体文字主要用来表示段落的题目，章节的开始等重要内容，笔划加粗是为了吸引读者的注意力。我们如果使用过Word的话，可以看到在工具栏中有图的按钮。
Word中对文字进行加粗，倾斜和添加装饰线的工具栏
[1] [2] [3] [4] 下一页
|
用户登录 
新用户注册 
网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！） 
