DIV+CSS应用分析.docVIP

基于客户端的DIV+CSS应用分析 郎登何 摘 要: WEB是信息时代应用最广泛的内容，DIV+CSS是WEB开发技术的重要内容，在客户端和服务器端程序设计中应用广泛。本文基于客户端程序设计对DIV+CSS应用进行了分析，提出并总结了在客户端程序设计中应用DIV+CSS的一般方法和步骤，对于WEB开发人员提高开发效率有一定借鉴意义。 关键词：DIV+CSS WEB开发技术 客户端程序设计 作者简介：郎登何（1974-），男，四川巴中人，重庆电子工程职业学院计算机应用系讲师，硕士，研究方向为Ｗeb开发技术、电子商务、云计算； 通讯地址：重庆沙坪坝大学城 重庆电子工程职业学院 郎登何 收 邮政编码：401331 电话E-mail：langdenghe@163.com 引言 WEB开发技术是信息技术的重要组成部分，包括服务器端开发技术和客户端开发技术两大部分，DIV+CSS是WEB开发技术的内容之一，本文从信息资源的应用出发，基于客户端程序设计，分析了DIV+CSS架构中各项内容，包括基本语法、六类选择符、四种使用方式和六大类属性，在此基础上提出了网站应用系统开发中应用DIV+CSS的一般方法和步骤。望本文为WEB开发人员提高开发效率提供参考。 客户端程序设计概述 WEB开发技术是信息技术的重要组成部分，包括服务器端开发技术和客户端开发技术两大部分，二者相辅相成。服务器端完成信息的存储、加工、管理和维护等工作，客户端完成信息的获取和应用，实现其价值。那么客户端如何从服务器端获取信息？在得到信息的过程中怎样才有优良的客户体验？这是客户端程序要解决的问题。 客户端程序设计包括HTML、DHTML、XML、HTML DOM等内容。HTML语言是超文本标记语言（Hyperlink Text Markup Language）的缩写。它是World Wide Web的描述语言，是一种描述文档结构的语言，而不能描述实际的表现形式。用HTML语言写的页面是普通的文本文档（ASCII），不含任何与平台和程序相关的信息，用HTML语言编写的网页文件，也称HTML页面文件，或称HTML文档，是由 HTML标记组成的描述性文本。标记可以说明文字、 图形、动画、声音、表格、链接等。DHTML使网页设计者可以动态操纵网页上的所有元素，动态地隐藏或显示内容、修改样式定义、激活元素以及为元素定位，在网页上显示外部信息，方法是将元素捆绑到外部数据源(如文件和数据库)上。所有这些功能均可用浏览器完成而无需请求Web服务器，同时也无需重新装载网页。XML的规则用来构造其他语言；XML创建了用来标记内容的基于标签的语言；XHTML是由XML创建的语言的一种，也是对HTML的重新构造；XML是基于SGML的。XML技术已成为WEB开发中很重要的一项技术。HTML文档对象模型DOM（HTML Document object Model）是一个能够让程序和脚本动态访问和更新HTML文档内容、结构和样式的语言平台。HTML DOM是一个跨平台、可适应不同程序语言的文件对象模型，它采用直观一致的方式，将HTML或XHTML文件进行模型化处理，提供存取和更新文挡内容、结构和样式的编程接口。使用DOM技术，不仅能够访问和更新页面的内容及结构，而且还能操纵文档的风格样式。 以上客户端技术在网页信息获取、在客户进行加工处理、用友好的形式向用户呈现都作了优秀的设计。如何利用它们设计出满足客户需求的网页，需要WEB开发人员作出工作，以下从DIV+CSS架构进行分析。 DIV+CSS架构 DIV+CSS包括两大部分，它们是DIV（层）和CSS（ Cascading Style Sheets，层叠样式表单）。前者是一个容器对象，可以是要处理的文字、图像、表格等；后者简称样式表，是一种设计网页样式的工具，借助CSS的强大功能，网页可千变万化，其体系结构如图1。通常一个网页由许多网页元素及控制这些元素的内容和不显示元素控制站点的内容组成。图1中DIV 图1 DIV+CSS体系结构 和CSS都是在网页中要显示的内容，作如下分析。 2.1 CSS的基本语法 一个样式表是由许多样式规则组成的，用来控制网页元素的显示方式，其规则的形式为： 选择符{属性1：值1；属性2：值2；……}? ，规则由选择符以及紧跟其后的一系列“属性：值”对组成，所有“属性：值”对用 “｛｝”包括，各“属性：值”对之间用分号“;”分隔。选择符是指要引用样式的对象，可以是一个或多个HTML标记（各标记之间用逗号分开），也可以是类选择符（如.text）、id选择符或上下文选择符。样式定义中还可以加入注释来说明代码的意思，注释有利于