推荐学习总结--CSS+DIV

WEB开发标准CSS(cascadingstylesheet)，层叠样式表，是用于控制网页样式并允许将样式信息与网页分离的一种标识性语言。CSS是1996由W3C审核通过，并且推荐使用的。CSS的引入就是为了使HTML语言更好的适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能，如字体、颜色、背景和整体排版等，并且网页设计者可以针对各种可视化浏览器（包括显示器、打印机、打字机、投影仪和PDA等）来设置不同的样式风格。CSS的引入引发了网页设计一个又一个的新高潮。使用CSS设计的优秀页面层出不穷。和HTML类似，CSS也是由W3C组织负责制定和发布的。1996年12月发布了CSS1.0规范，1998年发5月布了2.0规范。目前的有两个新版本正处于工作状态，即2.1版和3.0版。然而，W3C只是一个民间技术组织，并没有任何强制力要求软件厂商的产品必须符合规范，因此目前流行的浏览器都没有完全符合CSS2.0的规范，这也为设计师设计网页带来了不便。传统HTML的缺点在CSS没有引入页面之前，传统的HTML语言要实现页面美工设计是十分麻烦的。例如在一个网页中加一个h2标签定义的标题，如果要把它设为蓝色，并对字体进行相应的设置，则需要引入font标签，如下：h2fontcolor=”#0000ff”face=”黑体”CSS标签1/font/h2看上去这样的修改并不是很麻烦，但是当页面的内容不仅仅只有一段，而是整个页面时，情况就变的很复杂了。首先观察如下HTML代码，(01.html)htmlheadtilte演示/title/headbodyh2fontcolor=#0000ffface=幼圆这是标题文本/font/h2p这里是正文内容/ph2fontcolor=#0000ffface=幼圆这是标题文本/font/h2p这里是正文内容/ph2fontcolor=#0000ffface=幼圆这是标题文本/font/h2p这里是正文内容/p/body/html这段代码在浏览器中的显示效果是，3个标题都是蓝色黑体字，这时如果要将这4个标题改成红色，在这种传统的HTML语言中就需要对每个标题的font标签都进行修改，如果是一个规模很大的网站，并且需要对整个网站进行修改的话，那工作量将会是巨大的，甚至无法实现。其实传统的HTML的缺陷远不止上例中所反映的这一个方面，相比CSS为基础的页面设计方法，其所体现的劣势主要有以下几点：1.维护困难，为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期维护的成本很高。2.标签不足，HTML本身的标签很少，很多标签都是为网页内容服务的，而关于美工样式的标记，如文字间距、段落缩进等标签在HTML找不到。3.网页过于臃肿，由于没有统一对各种风格样式进行控制，因此HTML的页面往往体积过大，解析很慢。4.定位困难在整体布局页面时，HTML对各个模块的位置调整显得捉襟见肘，过多的标签同样导致页面的复杂和维护的困难。CSS的引入对于上面的页面，如果引入CSS对其中的h2标签进行控制，那么情况将完全不同，代码如下，（02.html）htmlGeneratedbyFoxitPDFCreator©FoxitSoftware演示/titlestyleh2{font-family:幼圆;color:blue;}/style/headbodyh2这是标题文本/h2p这里是正文内容/ph2这是标题文本/h2p这里是正文内容/ph2这是标题文本/h2p这里是正文内容/p/body/html其显示效果与前面的例子完全一样，可以发现在页面中的font标签全部消失了，取而代之的是最开始的style标签，以及其中对h2标签的的定义：styleh2{font-family:幼圆;color:blue;}/style对页面中所有的h2标签的样式风格都是由这段代码控制，如果希望标题的颜色变成红色，字体用幼圆，则仅仅需要修改这段代码为：styleh2{font-family:幼圆;color:red;}/style从这个简单的例子中可以看出，CSS对于网页的整体控制较单纯的HTML语言有了突破性的进展，并且后期修改和维护都十分方便。如何编辑CSSCSS文件与HTML文件一样，都是纯文本文件。因此一般的字处理软件都可以对CSS进行编辑。记事本和Ultraedit等最常用的文本编辑工具对CSS初学者都很有帮助。Dreamweaver代码模式下同样对CSS代码有着非常好的语法着色以及代码提示功能，对CSS的学习很有帮助。浏览器与CSS目前浏览器对CSS的支持不尽相同，在IE和Firefox显示有差异。但比较幸运的是，出现各个浏览器效果上的差异，主要是因为各个浏览器对CSS样式默认值的设置不同，因此可以通过对CSS文件各个细节的严格编写是各个浏览器之间达到基本相同的效果。在HTML中使用CSS的方法行内样式GeneratedbyFoxitPDFCreator©FoxitSoftware页行内样式是所有样式方法中最为直接的一种，它直接对html的标签使用style属性，然后将CSS代码直接写在其中，如下：（08.html）htmlheadtilte页面标题/title/headbodypstyle=color:#ff0000;font-size:20px;text-decoration:underline;正文内容1/ppstyle=color:#000000;font-style:italic;正文内容2/ppstyle=color:#ff00ff;font-size:25px;font-weight:bold正文内容3/p/body/html在页面中3个p标签中都使用了style属性，并且设置了不同的CSS样式，各个样式之间互不影响，分别显示了自己的样式效果。第一个p标签设置了字体为红色（color:#ff0000）,字号大小为20px（font-size:20px）；并有下划线（text-decoration:underline）。第二个p标签设置为位置的颜色为黑色、斜体，最后一个p标签设置为紫色、字号为25px的粗体字。行内样式是最为简单的css使用方法，但由于需要为每一个标签设置style属性，后期维护成本很高，网页容易臃肿。不推荐使用。内嵌式内嵌式样式表就是将CSS写在head/head之间，并且用style和/styel标签进行声明。内嵌式的方法显得略微麻烦，维护成本也高，仅适用于特殊的页面的设置单独的样式风格。链接式链接式CSS样式表是使用频率最高，也是最为实用的方法。它将html页面本身与CSS样式风格分离为两个或多个文件，实现了页面框架html代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，网站后台的技术人员与美工设计者也可以很好的分工合作。同一个CSS文件可以链接到多个html文件中，甚至可以链接到整个网站的所有页面中，使整个网站风格统一、协调，并且后期维护的工作量也大大减少。见下例（09.html）htmlheadtitle页面标题/titlelinkhref=09.cssrel=stylesheet/headbodyh2css标题/h2p这是正文内容/ph2css标题/h2p这是正文内容/p/body/html补充：rel属性rel属性--rel属性,描述了当前页面与href所指定文档的关系.rel属性通常出现在a,link标签中，具体内容见下表。（rel是relationship的英文缩写）alternate--定义交替出现的链接appendix--定义文档的附加信息chapter--当前文档的章节bookmark--书签copyright--当前文档的版权contentsGeneratedbyFoxitPDFCreator©FoxitSoftware记录文档的下一页.(浏览器可以提前加载此页)index--当前文档的索引nofollow--不被用于计算PageRankprev--记录文档的上一页.(定义浏览器的后退键)section--作为文档的一部分stylesheet--定义一个外部加载的样式表start--通知搜索引擎,文档的开始subsection--作为文档的一小部分o定义两种不同的样式,用户可以通过浏览器选择样式(ie不支持此属性)示例linkrel=stylesheettype=text/csstitle=bluehref=blue.css/linkrel=alternatestylesheettype=text/csstitle=redhref=red.css/o点亮浏览器RSS订阅图标，如下出现两个选择linkhref=/rss/myrel=alternatetitle=1.我参与的讨论、问答RSStype=application/rss+xml/linkhref=/rss/myrel=alternatetitle=2.我参与的讨论、问答RSStype=application/rss+xml/oStylesheet--定义一个外部加载的样式表，示例如下：headlinkrel=stylesheettype=text/csshref=style.css//headoStart--通知搜索引擎,文档的开始startnextprev属性值--startnextprev,全部属于LinkTypes,此值通常可以提示浏览器文章的开始,下一篇,上一篇的urllinkrel=starttype=text/htmlhref==prevtype=text/htmlhref==nexttype=text/htmlhref=然后创建09.css,h2{color:#0000ff;}p{color:#ff0000;text-decoration:underline;font-weight:bold;font-size:15px;}CSS文件链接到页面内用的是linkhref=09.csstype=text/cssrel=stylesheet这句代码实现的。链接样式表的最大优势在于CSS代码与html代码完全分离，并且同一个CSS文件可以被不同的html链接使用。因此在设计整个网站时，可以将所有页面都链接到同一个CSS文件。使用相同的样式风格。如果整个网站需要进行样式上的修改，就只需要修改这个CSS文件即可。导入式导入样式表与链接样式表的功能基本相同，只是语法和运行方式略有区别。采用import方式导入的样式表，在html初始化