第12课：页面布局（CSS）_建站学-个人建站指南,网页制作,网站设计,网站制作教程

如果能为页面实现理想的布局，岂不妙哉？

是啊，但如何实现呢？
你可以使用级联样式表（Cascading Style Sheets，简称CSS）为网站设计页面布局。本课将对CSS作简单介绍。如需从头开始全面学习CSS知识，可以使用我们提供的CSS教程。因此，请将本课当作CSS的预备课。

CSS是HTML的搭档。在编码过程中，它们发挥不同的作用：HTML负责网页的具体内容（结构），而CSS则修饰网页的表现形式（布局）。

正如第7课所讲，可以用style属性将CSS内联到网页中。例如，你可以采用下面的方法来设置文字的字体类型和大小：

例1：
<p style="font-size:20px;">这里的文字大小为20</p>
<p style="font-family:黑体;">这里的文字字体为黑体</p>
<p style="font-size:20px; font-family:黑体;">这里是文字大小为20、采用黑体的文字</p>

该例在浏览器中将显示如下：

这里的文字大小为20

这里的文字字体为黑体

这里是文字大小为20、采用黑体的文字

在上例中，我们使用了style属性来指定字体类型（font-family）和字体大小（font-size）。在最后一段中，我们同时进行了字体类型与字体大小的设置，请注意用分号将它们隔开。

页面布局似乎挺繁琐的？
CSS有一个优越的特性，即它可以对页面布局进行集中管理。也就是说，你不必在每个标签里都使用style属性；相反，你可以只声明一次，浏览器便会按相应的页面布局效果来显示文本：

例2：
<html>
<head>
<title>我的第一个CSS页面</title>
<style type="text/css">
   h1 {font-size:30px; font-family:宋体;}
   h2 {font-size:15px; font-family:黑体;}
   p {font-size:8px; font-family:"隶书";}
</style>
</head>
<body>
<h1>我的第一个CSS页面</h1>
<h2>欢迎参观我的第一个CSS页面</h2>
<p>你可以在这里了解CSS的原理</p>
</body>
</html>

显示示例
在上例中，我们在文档的头部（head）插入了CSS，它将应用于整个页面。要将CSS嵌入文档，你只需通过标签<style type="text/css">告诉浏览器该段为CSS即可。

在例2中，所有一级标题（h1）采用宋体，字体大小为30（象素）；所有二级标题（h2）采用黑体，字体大小为15（象素）；普通段落文字（p）采用隶书，字体大小为8（象素）。

另一种使用CSS的方法，是将CSS代码单独作为一个文档保存。通过把CSS文档独立出来，你就可以同时对多个页面的布局进行集中管理。如果你要对一个大型网站上的大量网页作字体类型或大小的修改，那么这个方法绝对是最佳选择。在此，我们不对CSS作更深的讨论，我们的CSS教程最就此作详细介绍。

CSS具有哪些其他功能？
CSS的作用不仅仅是指定字体类型和大小，它还可以用于许多其它方面，比如设置颜色和背景等。你可以试试下面的例子：

<p style="color:green;"
>绿色的文字</p>
<h1 style="background-color:blue;">兰色背景的标题</h1>

你可以试一下将这些示例代码插入自己的网页中，你可以采用两种方法：（1）使用style属性；（2）把CSS放在文档的头部（head）。

CSS仅仅用于设置颜色和字体吗？
CSS除了用于设置颜色与字体等布局之外，还可以控制页面设置与表现形式(边距，漂浮，对齐，宽度，高度等）。通过为不同元素设置不同的CSS，你可以令页面布局精密而美观。

例3：
<p style="padding:25px;border:1px solid red;">我爱CSS</p>

该例在浏览器中将显示如下：

我爱CSS

float属性用以定义元素的漂浮方式：靠左还是靠右。下例展示了该属性的用法：

例4：

该例在浏览器中将显示如下：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

In the example, one element (the image) floats to the left and the other element (the text) fills the hole.

With the property position, you can place an element exactly where you want it in your page:

例5：

<img src="bill.jpg" alt="Bill Gates" style="position:absolute;bottom:50px;right:10px;" />
显示示例
在该例中，图像被放置在浏览器中位于距底端50象素、距右边界10象素的位置。这里只是一个例子，实际上你可以把它放在你所期望的任何位置上。试一试吧！挺容易，而且很酷，是吧？

确实很酷。但不容易吧？
当然，你不可能在十分钟内学会CSS。正如前面所提到的，这一课只对CSS作简要的介绍。以后，你可以从我们提供的CSS教程中学到更多CSS知识。

现在，让我们先把精力集中于HTML，继续学习下一课，在那里你将学到如何在因特网上发布自己的网站，让全世界都能看到你的网站。

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat...</p>

(责任编辑：admin)

搜索

热门标签:

第12课：页面布局（CSS）