(使用简洁的HTML实现与CSS的对接.docVIP

CSS初探索： 使用简洁的HTML实现与CSS的对接 佟禺明 内蒙交通职业技术学院 摘要：使用HTML语言编辑网页的框架，使用CSS语言装饰网页已经是当前网页设计的主流趋势。HTML语言中很多的标签和属性在使用的CSS语言后都可以不再使用了，仅仅是框架的构建大大减少了网页建设的工作量，又能使网页快速打开。 关键词：HTML ；CSS；标签；属性 HTML语言一直使用至今，各式各样让人眼花缭乱的网页都离不开HTML语言。作为重要的网页语言，在网页技术日益进步的时代里，HRML扮演者怎样的角色？如何更有效地使用HTML语言？这一切还要从其功能说起。 HTML功能回顾 HTML语言创建之初为一群科学家所使用。HTML仅仅被科学家用来为信息提供结构。 随着网页技术的推广，当更多科学家以外的人开始使用网页，人们开始对网页的要求越来越多。Web设计师开始使用标签来替代结构信息控制展现效果，于是越来越多的标签开始涌现出来。随之而来的则是各种属性。到今天，HTML语言可以分成四个部分：结构元素、内容元素、修饰元素和扩展元素。其中结构元素和内容元素是HTML语言的基础，最常用的部分。我们学习这两部分元素来构建HTML语言的结构。最初的HTML语言可以用下面的语句简单演示： html head title/title /head body div h1/h1 p/p table/table ul/ul /div /body /html 这样的简单结构，只适合于科学家发表论文或记录文献使用。修饰元素和扩展元素则是后来为各种复杂网页结构服务所创造出来的。加入了各种属性后和HTML语言就比较复杂了。 通过对HTML语言的分析，我们得到结论：HTML语言有构建网页骨架和装饰网页两个功能。 HTML的标签属性与CSS的“冲突” 在不考虑文件的大小、编程时的复杂性等因素，仅使用HTML语言，我们也可以做出目前网页上各种繁复样式中的大多数。比如：不同颜色和大小的字体、镶嵌图片、突出的文字和链接等等。但是，HTML语言的创作目的是以为信息提供结构为主的，尽管后期添加了各种标签及属性，也不能改变HTML语言在应用上的狭隘。单单使用HTML语言编辑网页不仅会让编程的工作变得无比繁杂，而且想要展示的网页的效果也不尽如人意。尤其是在CSS诞生之后，人们越来越发现CSS的强大弥补了HTML的不足。在此反思HTML语言的功能后，发现修饰元素和扩展元素的功能和CSS语言的功能相同，而且在灵活性上大有不如。我们简单地从字体、图片和网页布局三方面来对比一下。 文字 字体大小 使用CSS我们可以很随意地设置字体的大小，比如：“font-size:1.2em;”；但是HTML语言中缺乏与之对应的字体的大小，使用font size=”4”字体显得小些，使用font size=”5”字体显得大些，使用font size=”4.5”又不被识别,也就是说，HTML语言中字体的大小不能随意设置，这在编辑网页过程中很难达到理想的效果。 字体间距 使用CSS我们可以随意设置行高，调节上下行的间距，比如“line-height: 150%”；但是HTML语言没有相应的语句进行行高的设置。对于文字较多的网页，我们无法使用HTML语言来使文字呈现多样化，清晰化的效果。 图片 图片的重复使用 使用CSS我们可以随意在横向或纵向上使用图片，使一张图片可以连续排列而无缝隙，比如：“background-repeat: repeat-x”；使用HTML则需要计算网页的宽度等，对图片进行切割使之适应页面，工作量明显比使用CSS加大了很多。 图片的插入方式 使用CSS我们可以在任何需要的地方写下“background: url…”，加入图片；HTML语言除了body background和img src=” ”以外，很少有标签允许加入图片，而这两种标签又都有其局限性，而标签的属性也没有办法完全满足复杂的网页对图片高质量和灵活的需求。 布局 Table的使用令人望而生畏 暂且不谈使用了CSS的诸多好处，只是有过编辑网页经验的人员就能知道，单单HTML语言编辑网页时，需要大量使用表格是何其的繁琐和令人恼怒无奈的选择。对于表格中有文字的每一行都得进行字体的设置，即使那么多行的设置都相同，我们依然得花费大量的时间进行重复建设。 HTML与CSS相辅相成 CSS的诞生真正解放了HTML语言，可以想象没有CSS以前的HTML就好像舞台上的演员，不仅仅要一个人扮演多种角色而且还得兼职扮演道具。 CSS语言是HTML语言的辅助，相当于人们常说的软包装。我们的网页建设