| 词条 | div css |
| 释义 | § 什么是DIV+CSS DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。CSS图片效果 “DIV+CSS”是一种错误的说法，下面也会说到，DIV只是HTML中的一个标签，而CSS是一种语言，这两者也根本不能成为对等。并且，“DIV+CSS”的话法也容易引起歧义。让大家认为WEB标准就一定要用到DIV，以导致了DIV标签的滥用。并且“DIV+CSS”也不能成为“WEB标准”的代名词，因为WEB标准不是单指两个语言，而是由XHTML（结构）、CSS（样式）、DOM（行为）组合而成的一种技术规范，他所实现的是数据、结构、样式、行为的分离，方便了管理与维护。所以这里请大家记住“DIV+CSS”是一种错误的说法，可改为“HTML+CSS”或是“xHTML+CSS” § CSS 是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML等文件式样的计算机语言。 HTML语言自HTML4.01以来，不再发布新版本，原因就在于HTML语言正变得越来越复杂化、专用化。即标记越来越多，甚至各个浏览器生产商也开发出只适合于其特定浏览器的HTML标记，这显然有碍于HTML网页的兼容性。于是W3C组织进而重新从SGML中获取营养，随后，发布了XML，XML是一种比HTML更加严格的标记语言，全称是可扩展标记语言（EXtensible Markup Language http://www.seoyouhua.net/）。但是XML过于复杂，且当前的大部分浏览器都不完全支持XML。于是XHTML这种语言就派上了用场，XHTML语言就是一种可以将HTML语言标准化，用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展，适合自动数据交换，并且更加规整。说了这么多，现在该说正题了——CSS。其实CSS单独使用除了麻烦一点之外，我个人觉得并无明显的优于HTML的好处。 而关键就在于其与脚本语言（如Javascript）及XML技术的融合，即CSS+Javascript+XML（实际上有一种更好的融合：XML+XSL+Javascript）——但XSL，即可扩展样式表语言相较于CSS过于复杂，不太容易上手。自从CSS出现之后，HTML终于摆脱了杂乱无章的恶梦，开始将页面内容与样式分离。说了这么多，其实，个中真谛，还得使用过后才知道，所以，现在就开始学习使用吧。 § DIV 元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。 在可以预计的将来，table的地位依然十分重要，于是，如google之流依然会生意兴隆。但是div代表的是网络世界发展的方向。它们一个简单，一个先进，萝卜白菜，您选什么都是有可取只处的．我们都很按您的要求认真服务的！ div是html(超文本语言)中的一个元素,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的table布局,真正地达到了w3c内容与表现相分离. DIV+CSS高级布局已逐渐流行，但面对所谓DIV+CSS布局的叫法让人更为担心，不要让DIV成为Table的替代品，多层嵌套的DIV会严重影响代码的可阅读性，活用HTML为我们提供的标签吧。 § DIV+CSS的优势何在？ 1、符合W3C标准。微软等公司均为W3C支持者。这一点是最重要的，因为这保证您的网站不会因为将来网络应用的升级而被淘汰。 2、支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是IE7或者是火狐，您的网站都能很好的兼容。 3、搜索引擎更加友好。相对与传统的table, 采用DIV+CSS技术的网页，对于搜索引擎的收录更加友好。 4、样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。 现在YAHOO,MSN等国际门户网站，网易、新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。 5、CSS的极大优势表现在简洁的代码，对于一个大型网站来说，可以节省大量带宽，而且众所周知，搜索引擎喜欢清洁的代码。 6、表现和结构分离，在团队开发中更容易分工合作而减少相互关联性。 § 什么时候应该用DIV? 在http://www.020webseo.com中有详细解释。 虽然在这方面没有什么硬性的规定,但个人认为DIV更适用于大体框架的定位.例如我们要定义一块头部的区域,一般会这样定义一个DIV: 这里就是头部框架里要写的内容. 当然,可以用class来定义,但一般来讲如不是在同一页面会重复的元素,用id能更好的区别开来. 查看如下定义代码 Articles Topics About Contact Contribute Feed No. 214 定义了最上面的导航(ul部分),左边的大logo和那个圆圆的No.xxxx的标记. 他没有使用DIV来做顶部的框架,但却很好的说明了这些代码的用途,为什么?因为他活用了HTML提供的标签,以及样式名称的定义. § 其它最常用的布局标签 h1 这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了 ^_^ . ul 这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显) . b 这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择 h2 h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p。 禅意花园---顶级设计网站 § CSS放入网页的几种方式 行内套用 Image Menu 我们可以在HTML文件内直接宣告样式。 举例来说，Thisisfontsize16. 以上的HTML文件在浏览器上会显现为：Thisisfontsize16. 嵌入套用样式可以嵌入于HTML文件中(通常是在内)。 举例来说，div{div{background-color:#FF0000;}背景颜色是红色 。 以上的HTML会显现出：背景颜色是红色 外部连接套用在这种方式下，所有的CSS样式宣告都是存在另外一个档案中。 该档案通常名称为.css。 在HTML文件的 .. 之中，我们将用以下的程式码将这个.css档案连接进入： 以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。 汇入套用汇入套用外部的CSS样式也可以被汇入进HTML文件。 汇入的做法为利用@import这个指令。 @import的语法为：<@import">!--@importurl(http://www.divhome.com/#.mysite.com/style.css)> ;@importurl( @import指令最初的用意，是为了能够针对不同的浏览器而运用不同的样式。 不过，现在已经没有这个必要。现在用@import的目的，最常是要加入多个CSS样式。当多个CSS样式被@import的方式加入，而不同CSS样式互相有冲突时，後被加入的CSS样式有优先的顺位(详情请见CSS串接)。 § CSS＋DIV网站设计的问题 尽管DIV+CSS具有一定的优势，不过现阶段CSS+DIV网站建设存在的问题也比较明显，主要表现在： 第一，对于CSS的高度依赖使得网页设计变得比较复杂。相对于HTML4.0中的表格布局（table），CSS+DIV尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了，这在一定程度上影响了XHTML网站设计语言的普及应用。 第二，CSS文件异常将影响整个网站的正常浏览。CSS网站制作的设计元素通常放在几个l外部文件中，这一个或几个文件有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 第三，对于CSS网站设计的浏览器兼容性问题比较突出。基于HTML4.0的网页设计在IE4.0之后的版本中几乎不存在浏览器兼容性问题，但CSS+DIV设计的网站在IE浏览器里面正常显示的页面，到火狐浏览器（FireFox ）中却可能面目全非（这也是为什么建议网络营销人员使用火狐浏览器的原因所在 ）。CSS+DIV还有待于各个浏览器厂商的进一步支持。 第四，CSS+DIV对搜索引擎优化与否取决于网页设计的专业水平而不是CSS+DIV本身。CSS+DIV网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录和排序显然不是以是否采用表格和CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站结构、内容、相关网站链接等因素始终是网站优化最重要的指标。 § 参考资料： 1、http://www.csszengarden.com/ 禅意花园 2、http://www.w3.org/ 3、http://www.digital-web.com/ The web professional's online magazine of choice. 4、http://www.alistapart.com/ learn how traditional, research-based IA leads to better site design, and why many are abandoning traditional methods in favor of agile design. § 相关词条 HTML浏览器W3CXML WEBCSS样式表httpCSS3 |
| 随便看 |
百科全书收录594082条中文百科知识，基本涵盖了大多数领域的百科知识，是一部内容开放、自由的电子版百科全书。