《很好的学习总结--CSS+DIV》.pdf

Generated by Foxit PDF Creator © Foxit Software For evaluation only. WEB 开发 CSS+DIV CSS标准 CSS(cascadingstylesheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。 CSS 是1996 由W3C 审核通过，并且推荐使用的。CSS 的引入就是为了使HTML 语言更好的适应页面的美工设 计。它以HTML 语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者 可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和PDA 等）来设置不同的样式风格。CSS 的引入引发了网页设计一个又一个的新高潮。使用CSS设计的优秀页面层出不穷。 和HTML类似，CSS 也是由W3C 组织负责制定和发布的。1996年12月发布了CSS1. 规范，1998年发5 月布 了2. 规范。目前的有两个新版本正处于工作状态，即2.1 版和3. 版。 然而，W3C 只是一个民间技术组织，并没有任何强制力要求软件厂商的产品必须符合规范，因此目前流行的浏 览器都没有完全符合CSS2. 的规范，这也为设计师设计网页带来了不便。 传统HTML 的缺点在CSS 没有引入页面之前，传统的HTML 语言要实现页面美工设计是十分麻烦的。例如在 一个网页中加一个h2标签定义的标题，如果要把它设为蓝色，并对字体进行相应的设置，则需要引入font 标 签，如下： h2fontcolor=”# ff”face=”黑体”CSS 标签1/font/h2 看上去这样的修改并不是很麻烦，但是当页面的内容不仅仅只有一段，而是整个页面时，情况就变的很复杂了。 首先观察如下HTML代码，(01.html) html head tilte演示/title /head body h2fontcolor=# ffface=幼圆这是标题文本/font/h2 p这里是正文内容/p h2fontcolor=# ffface=幼圆这是标题文本/font/h2 p这里是正文内容/p h2fontcolor=# ffface=幼圆这是标题文本/font/h2 p这里是正文内容/p /body /html 这段代码在浏览器中的显示效果是，3个标题都是蓝色黑体字，这时如果要将这4 个标题改成红色，在这种传统 的HTML 语言中就需要对每个标题的font标签都进行修改，如果是一个规模很大的网站，并且需要对整个网站 进行修改的话，那工作量将会是巨大的，甚至无法实现。 其实传统的HTML 的缺陷远不止上例中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现的劣 势主要有以下几点： 1. 维护困难，为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期维护的成本 很高。 2. 标签不足，HTML 本身的标签很少，很多标签都是为网页内容服务的，而关于美工样式的标记，如文字间距、 段落缩进等标签在HTML 找不到。 3. 网页过于臃肿，由于没有统一对各种风格样式进行控制，因此HTML 的页面往往体积过大，解析很慢。 4. 定位困难 在整体布局页面时，HTML 对各个模块的位置调整显得捉襟见肘，过多的标签同样导致页面的复 杂和维护的困难。 CSS 的引入 对于上面的页面，如果引入CSS 对其中的h2标签进行控制，那么情况将完全不同，代码如下，（02.html） html 第 1 页 共 64 页 Generated by Foxit PDF Creator © Foxit Software For evaluation only. WEB 开发 head tilte演示/title style h2{ font-family:幼圆; color:blue; } /style /head body h