页面布局(CSS).docVIP

页面布局(CSS).txt你站在那不要动！等我飞奔过去！　　雨停了 天晴了 女人你慢慢扫屋 我为你去扫天下了 　　 你是我的听说现在结婚很便宜，民政局9块钱搞定，我请你吧你个笨蛋啊遇到这种事要站在我后面！　　跟我走总有一天你的名字会出现在我家的户口本上。　　专题：从零开始学html 第11课：页面布局（CSS） 发布时间： 2009-6-11 0:35:51 被阅览数： 76 次 来源： 网页设计与制作 如果能为页面实现理想的布局，岂不妙哉？ 是啊，但如何实现呢？ 你可以使用级联样式表（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(/logo.png); 你可以试一下将这些示例代码插入自己的网页中，你可以采用两种方法：（1）使用style属性；（2）把CSS放在文档的头部（head）。 CSS仅仅用于设置颜色和字体吗？ CSS除了用于设置颜色与字体等布局之外，还可以控制页面设置与表现形式(边距，漂浮，对齐，宽度，高度等）。通过为不同元素设置不同的CSS，你可以令页面布局精密而美观。 例3： p style=padding:25px;border:1px solid red;我爱CSS/p 该例在浏览器中将显示如下： 我爱CSS float属性用以定义元素的漂浮方式：靠左还是靠右。下例展示了该属性的用法： 例4： img src=bill.jpg alt=Bill Gates style= float:left; / pLorem ipsum dolor sit amet, cons