DIV+CSS应用分析.doc

第 6 页 共 6 页基于客户端的DIV+CSS应用分析郎登何 摘 要:WEB是信息时代应用最广泛的内容，DIV+CSS是WEB开发技术的重要内容，在客户端和服务器端程序设计中应用广泛。本文基于客户端程序设计对DIV+CSS应用进行了分析，提出并总结了在客户端程序设计中应用DIV+CSS的一般方法和步骤，对于WEB开发人员提高开发效率有一定借鉴意义。关键词：DIV+CSS WEB开发技术 客户端程序设计作者简介：郎登何（1974-），男，四川巴中人，重庆电子工程职业学院计算机应用系讲师，硕士，研究方向为eb开发技术、电子商务、云计算；通讯地址：重庆沙坪坝大学城 重庆电子工程职业学院 郎登何 收邮政编码：401331 电话-mail：0 引言WEB开发技术是信息技术的重要组成部分，包括服务器端开发技术和客户端开发技术两大部分，DIV+CSS是WEB开发技术的内容之一，本文从信息资源的应用出发，基于客户端程序设计，分析了DIV+CSS架构中各项内容，包括基本语法、六类选择符、四种使用方式和六大类属性，在此基础上提出了网站应用系统开发中应用DIV+CSS的一般方法和步骤。望本文为WEB开发人员提高开发效率提供参考。1 客户端程序设计概述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架构进行分析。2 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选择符或上下文选择符。样式定义中还可以加入注释来说明代码的意思，注释有利于自己或别人以后编辑和更改代码时理解代码的含义。如：h1font-family:隶书,宋体;color:#ff8800，“h1”是选择符， “font-family”、“color”是表示字体和颜色的属性，“隶书”、“#ff8800”是字体和颜色的属性值。2.2 CSS的选择符CSS中有六种选择符，分别是HTML标记、具有上下文关系的HTML标记、用户自定义类选择符、用户定义的ID选择符、虚类、虚元素。分别说明如下：（1） HTML标记类选择符直接用HTML标记或HTML元素名称作为CSS选择符，例如：TD、TABLE、TR、FORM、BODY、SELECT、INPUT、TEXTAREA、H1、A 。（2） 具有上下文关系的选择符如果定义了这样的样式规则 body color: blue，则网页中所有的文字都以蓝色显示，除非另外指定样式或格式来更改这一设定，这是因为body标记包含了所有其他的标记符和内容。如果要为位于某个元素内的元素设置特定的样式规则，则应将选择符指定为具有上下文关系的HTML标记，例如，如果只想使位于H1标记符的B标记符具有特定的属性，应使用的格式为：h1 b color: blue 。这表示只有位于h1标记内的B元素具有蓝色属性，其他任何B元素保持原有颜色。（3） 类选择符使用类选择符能够把相同的标记分类定义成不同的样式，定义类选择符时，在自定义类的名称前面加一个点号。假如想要两个不同的段落，一段落向右对齐，一个段落居中，你可以先定义两个类：这个段落向右对齐的 ，这个段落是居中排列的，再用样式p.right text-align: right和p.center text-align: center实现。（4） ID选择符用户定义的ID选择符的一般格式是：#IDname property: value; 。其中Idname为某个标记ID属性值。ID选择符的用途及概念和类选择符相似，不同之处在于同一个ID选择符样式只能在HTML文件内被应用一次，而类选择符样式则可以多次被应用，也就是说，如果有些较特别的标记需要应用较为特殊的样式，则建议使用ID选择符。在定义ID选择符的时候用“#”号开头而不是“.”号。（5） 虚类虚类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。虚类主要针对超链接A标记符，可以为超链接定义不同状态下的不同样式效果。 虚类的形式: 选择符:虚类 property: value; ，定义虚类的方法和常规类很相似，但有两点不同：一是连接符是冒号而不是句点号；二是它们有预先定义好的名称，而不能随便取名。虚类中最常见的是a虚类，a虚类可以指定超链接标记a以不同的方式显示链接，表示链接处在4种不同的状态下：link、visited、active、hover 。 （6） 虚元素在CSS中有两个特殊的选择符，用于P、div、span等块级元素的首字母和首行效果，它们是：first-letter和first-line。有些浏览器不支持这两个虚元素。格式为：选择符: first-letter property: value; 选择符: first-line property: value; 选择符.类: first-letter property: value; 选择符.类: first-line property: value; 2.3 CSS的使用方式 为网页添加样式表的方法有四种：链入外部样式表、导入外部样式表、联入样式表和内联样式。其中联入样式表和内联样式是将CSS的功能组合于HTML文件之内，而链接及导入外部样式表则是将CSS功能以个别文件的方式独立于HTML文件之外，然后再通过链接或导入的方式将HTML文件和CSS文件链接在一起。链入外部样式表是把样式表保存为一个CSS文件，在HTML的头信息标识符里添加标记链接到这个CSS文件即可使用。外部样式表不能含有任何像或这样的HTML标记，仅仅由样式规则或声明组成，并且只能以.CSS为扩展名。在制作大量相同样式页面的网站时，不仅减少了重复的工作量，而且有利于以后的修改、编辑。同时，大多数浏览器会保存外部样式表在缓冲区，从而浏览时也减少了重复下载代码，避免了在展示网页时的延迟。导入外部样式表是在HTML文件头部的 标记之间，利用CSS的import声明引入外部样式表。方法和链入样式表的方法很相似，但导入外部样式表输入方式更有优势。因为除了导入外部样式外，还可添加本页面的其他样式。利用标记将样式表联入HTML文件的头部。style元素放在文档的head部分。必须的type属性用于指出样式类别，通常取值为text/css。联入样式表的作用范围是本HTML文件。内联样式是混合在HTML标记里使用的，直接在HTML标记里加入style参数。style参数的内容就是CSS的属性和值。 内联样式会向标记中添加更多属性及内容，因此对于网页设计者来说很难维护，更难阅读。而且由于它只对局部起作用，因此必须对所有需要的标签都作设置，这样就失去了CSS在控制页面布局方面的优势。所以，内联样式主要用于样式仅适用于单个页面的的情况，应尽量减少使用内联样式，而采用其他样式。 2.4 CSS的对象属性 按照美化对象的不同，属性包括：字体属性（font-family、font-style、font-variant、font-weight、font-size），颜色和背景属性（Color、Background-color、Background-image、Background-repeat、Background-attachment、Background-position），文本属性（Word-spacing、Letter-spacing、Text-decoration、Vertical-align、Text-transform、Text-align、Text-indent、Line-height），边距属性（Margin-top、Margin-right、Margin-bottom、Margin-left），填充属性（Padding-top、Padding-right、Padding-bottom、Padding-left）以及边框属性、分级属性和鼠标属性等。3 DIV+CSS应用的一般方法和步骤站点开发中合理使用DIV+CSS对于提高网站访问效率、提升用户体验有着十分重要的意义，一般方法和步骤如下：l 根据用户需求确定站点风格用户的需求是开发团队努力的目标，用户对网站风格有什么样的要求是开发人员首要任务，如站点的基本色调、访问效率、服务对象等。l 分析页面使用元素集合和使用的属性根据需求阶段获得的信息，分析网页中用要的元素，可以用表格的形式分类反应出来。l 设计站点样式文件样式文件将作用于网站的有关页面，文件中的选择符是分析表格列举出来的，利用上阶段的元素集合和属性做好样式文件。l 应用样式文件将设计好的样式文件应用在开发的网站样测试效果。l 优化和维护CSS站点在使用过程发现的样式问题，在本阶段要进行优化和维护。将内联样式作为补充。4.结语应用DIV+CSS可以美化页页，制作出界面友好的网站系统，但要开发出高质量的、满足用户需求的应用系统，还涉及到服务端程序设计和客户端程序设计的更多技术，只有系统学习和掌握WEB开发技术的各项内容，才能达到熟练应用的目的。参考文献1 王成良.Web开发技术及其应用M北京：清华大学出版社，20072 刘丹,倪晓红.基于DIV+CSS的网页布局模式J.沧州师范学院学报.2012年第03期3 刘敏娜.探讨XHTML设计标准下CSS+DIV布局技术J.价值工程.2012年第06期4 丁海燕,邹疆,邱莎.用层叠样式表CSS技术实现网页特效J.昆明冶金高等专科学校学报.2010年03期 5 周鑫.浅谈DIV+CSS技术在网页设计中的应用J.科技信息.2011年17期另列内容：The application and analysis of DIV+CSS based on clientLang DengheAbstract:WEB content is the most widely used in the information age, DIV+CSS is WEB development technology important content, the client and server program design is applied in this paper, based on the client program design of DIV+CS