HTML学习--DIV+CSS研究总结

整理文档很辛苦,赏杯茶钱您下走!

免费阅读已结束,点击下载阅读编辑剩下 ...

阅读已结束,您可以下载文档离线阅读编辑

资源描述

UI-DIV+CSS技术研究UI-DIV+CSS技术的研究.....................................................................................................................1第一章DIV+CSS技术的基础知识....................................................................................................2第一节DIV+CSS的基本概念.........................................................................................................2第二节DIV+CSS布局的优势.........................................................................................................3第三节WEB标准的理解...............................................................................................................3第四节CSS的基本语法结构.........................................................................................................4第五节CSS优先级和继承.............................................................................................................5第二章DIV+CSS技术的常用知识..................................................................................................10第一节盒模型相关知识..............................................................................................................10第二节常用元素的用法和比较..................................................................................................13第三节DIV+CSS网页布局...........................................................................................................22第三章CSS编写和命名规范..........................................................................................................24第一节CSS样式文件的命名.......................................................................................................25第二节CSS选择符的命名...........................................................................................................25第三节图片的命名与书写..........................................................................................................26第四节CSS注释书写规范...........................................................................................................26第五节CSS布局编码标准和建议...............................................................................................27第六节常用CSS选择符命名参考..............................................................................................30第四章CSS高级应用与技巧..........................................................................................................31第一节CSS缩写语法...................................................................................................................31第二节CSS代码优化...................................................................................................................33第三节CSS圆角样式的应用.......................................................................................................36第四节CSS滑动门技术的应用...................................................................................................41第五节小提示窗口的应用..........................................................................................................44第六节折叠标签的研究的应用..................................................................................................44第五章DIV+CSS浏览器兼容研究..................................................................................................46第一节CSSHACK汇总速查一览.................................................................................................46第二节常见兼容问题整理..........................................................................................................46第一章DIV+CSS技术的基础知识第一节DIV+CSS的基本概念DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。CSS是英语CascadingStyleSheets(层叠样式表单)的缩写,它是一种用来表现HTML或XML等文件式样的计算机语言。DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者是通过使用样式表格式化这个块来进行控制。DIV是HTML(超文本语言)中的一个元素,DIV+CSS是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了W3C内容与表现相分离。W3C是英文WorldWideWebConsortium的缩写,中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者TimBerners-Lee。W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。W3C会员(大约500名会员)包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门,一起协同工作,致力在万维网发展方向上达成共识。第二节DIV+CSS布局的优势2.1符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的,因为这保证您的网站不会因为将来网络应用的升级而被淘汰。2.2支持浏览器的向后兼容,也就是无论未来的浏览器大战,胜利的是IE7或者是火狐,您的网站都能很好的兼容。2.3搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页,对于搜索引擎的收录更加友好。2.4样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。2.5CSS的极大优势表现在简洁的代码,对于一个大型网站来说,可以节省大量带宽,而且众所周知,搜索引擎喜欢清洁的代码。2.6表现和结构分离,在团队开发中更容易分工合作而减少相互关联性。第三节WEB标准的理解WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如W3CDOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(EuropeanComputerManufacturersAssociation)的ECMAScript标准。第四节CSS的基本语法结构CSS语法有三部分组成:选择符、属性和属性值。选择符分为:类型选择符指以网页中已有的标签类型作为名称的选择符如:body{}div{}span{}群组选择符除了对单个xhtml对象进行样式的指定,同样也可以对一组对象进行相同的样式指派。如:h1,h2,p,span{font-size:12px;}注:对象之间用逗号隔开。包含选择符对一个对象的子对象进行定义样式,如h1span{}注:对象之间用空格隔开。上面样式的意思是对h1的span进行样式定义。Idclass选择符id在网页中只能出现一次,适合大的定义,比如可以定义导航,头部,尾部各一个id如:divid=content/div#content{};class可以用于页面中多个元素,如:divclass=p1/divh1class=p1/h1.p1{}。标签指定选择符如果既想使用id或class也同

1 / 48
下载文档,编辑使用

©2015-2020 m.777doc.com 三七文档.

备案号:鲁ICP备2024069028号-1 客服联系 QQ:2149211541

×
保存成功