如何为页面实现理想的布局？
你可以使用级联样式表（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
微信扫一扫 
支付宝扫一扫 