1. 中国网页设计首页
  2. 教程
  3. 网页制作

第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>
<body style="background-image:url('http://www.html.net/logo.png');">

你可以试一下将这些示例代码插入自己的网页中。

CSS仅仅用于设置颜色和字体吗?

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

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

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

我爱CSS

例4:

<img src="wp-content/uploads/2018/01/125jz.png" alt="125建站网" style="position:absolute;bottom:50px;right:10px;" />

在该例中,图像被放置在浏览器中位于距底端50象素、距右边界10象素的位置。这里只是一个例子,实际上你可以把它放在你所期望的任何位置上。试一试吧!挺容易,而且很酷,是吧?

当然,你不可能在十分钟内学会CSS。正如前面所提到的,这一课只对CSS作简要的介绍。以后,你可以从我们提供的CSS教程中学到更多CSS知识。
现在,让我们先把精力集中于HTML,继续学习下一课吧!

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/465.html