仓酷云

标题: 来一发CSS教程:CSS挑选器功能 [打印本页]

作者: 只想知道 时间: 2015-1-15 23:40
标题: 来一发CSS教程:CSS挑选器功能
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。
网页制造poluoluo文章简介：假如你十分在乎页面的功能那万万别利用CSS3选择器。实践上，在一切扫瞄器中，用class和id来衬着，比那些利用同胞，儿女选择器，子选择器（sibling,descendantandchildselectors）对页面功能的改良更值得存眷。
一些关于CSS选择器功能的会商引发了我的乐趣。
第一个是ShaunInman写的《及格的CSS选择器（CSSQualifiedSelectors）》，实践上这篇博文并没有提到CSS功能，不外有一个来自DavidHyatt(Safari和WebKit的架构师,同时为Mozilla,Camino,Firefox事情)的批评：

假如你十分在乎页面的功能那万万别利用CSS3选择器。实践上，在一切扫瞄器中，用class和id来衬着，比那些利用同胞，儿女选择器，子选择器（sibling,descendantandchildselectors）对页面功能的改良更值得存眷。

接上去的一篇博文很奇妙。JonSykes做了一个系列的文章来测试CSS功能：第一部分,第二部分,第三部分，个中第三部分十分值得一读。这使我确信优化CSS选择器是页面功能优化的一个关头步骤。
可是，有两件事一向困扰着我。起首，大批的DOM元素和CSS划定规矩。页面包括60000个DOM元素和20000条CSS划定规矩。这使扫瞄器非一般的运转（上面将证实这点）。上面的统计表格为美国10年夜网站的对照：
网站称号CSS划定规矩DOM元素AOL22891628eBay305588Facebook28821966Google92552LiveSearch376449MSN1038886MySpace932444Wikipedia7951333Yahoo!800564YouTube821817均匀值1033923第二件困扰我的事变是测试以多年夜页面为基准？我想办理的成绩是：有效率的CSS选择器会拖慢页面吗？一切测试的5个页面包括20000个a元素（嵌套在P,DIV,DIV,DIV外部）（译注：利用一样的HTML页面），分歧的是CSS：基准（没有CSS）（译注：下图中的baseline），标签选择器（tagselector)（a标签有一条CSS划定规矩）（译注：下图中的tag），20000个class选择器（classselectors）（译注：下图中的class），20000个子选择器（childselectors）（译注：下图中的child），20000个儿女选择器（descendantselectors）（译注：下图中的descendant）。前面3个页面的巨细都凌驾了3M，而基准及标签选择器的页面则只要1.8M。
接上去调剂为：

2000个a标签和2000条CSS划定规矩（本来是20000），这实践上有6000个摆布的DOM元素，由于a嵌套在P,DIV,DIV,DIV外部
基准页面和标签选择器页面像其他页面一样有2000条CSS划定规矩，不外只要复杂的class划定规矩失效，不会影响其他含有class属性的标签

我在12个扫瞄器长进行了测试。页面出现工夫是用嵌在头部和底部的剧本来丈量（一切测试在当地运转）。测试了局以下图（我没有测试Oprea9.63，你能够下载csv格局的数据，这里是测试页面）：

功能随扫瞄器而改动；奇异的是，两个新扫瞄器IE8和Firefox3.1反而是最慢的一切测试是在统一台PC机的分歧扫瞄器，分歧PC机的分歧扫瞄器大概有分歧的功能特性。这个测试的目标不是对照各扫瞄器的功能，而是为了测试扫瞄器怎样处置渐渐庞大的CSS选择器。
【订正：更深切的对照Firefox3.0和3.1，我发明这台PC上的Firefox3.1和IE8逊于其他PC机。即便再举行测试，也会因为分歧PC的硬件差别招致分歧的了局，以是，不要用这些数据来对照扫瞄器。】
绝不不测，越庞大的页面（子选择器和儿女选择器）一般功能越差。最年夜的不测在于第四个页面竟然是最差的。一切的扫瞄器均匀慢了50毫秒，察看最年夜的(IE6&7,FF3)均匀只要20毫秒。对如今70%+的用户来讲，改善CSS选择器只能进步20毫秒。
请记着，这些测试靠近最坏的情形。20个a标签嵌在P,DIV,DIV,DIV招致统共有6000个DOM元素，这是10年夜站点中最庞大两个网站（见表一）的两倍年夜。别的，测试的页面含有2000个极度有效的CSS划定规矩，一样平常的网站约莫有三分之一（译注：网站自己的CSS划定规矩）的子选择器及儿女选择器。以Fackbook为例，2882个CSS划定规矩里只要750个极度有效的划定规矩。
为何我的测试了局和之前其别人的有些分歧？一个分歧来自于这极为极度。它成倍的缩小于我们一般所用的页面。在这类情形下，扫瞄器面临3M的页面，60000个DOM元素及20000条CSS划定规矩会有分歧的体现。我注重到，我的测试了局在IE6&7中十分分歧。我想晓得IE在处置CSS选择器时是不是某个划定规矩。为此我测试了子选择器和儿女选择器页面，从1000至20000渐渐增添a标签和CSS划定规矩的数目，了局以下图所示，IE在18000条CSS划定规矩时陡增。可是IE6&7衬着页面更靠近实践，由于在我的测试中，他们的功能居然是最高的。

基于这些测试我有以下假定：对年夜多半网站而言，优化CSS选择器活得的功能提拔很小，不值得往计算。有些共同Javascript交互的CSS划定规矩会分明的拖慢页面。这是应当存眷的核心。以是我入手下手存眷实际中影响页面功能的CSS款式相干的小成绩（offsetWidth,:hover）。
译注：

这是自己的童贞翻
并不是一字一句的直翻，准绳是只管保存有效的内容
程度无限，不免摧残了大家的作品，有疑问请自行到原文查阅

提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。

作者: 愤怒的大鸟 时间: 2015-1-17 23:40
Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

作者: 活着的死人 时间: 2015-1-21 16:11
布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

作者: 飘灵儿 时间: 2015-1-30 20:51
由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

作者: 深爱那片海 时间: 2015-2-17 00:47
您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

作者: 乐观 时间: 2015-3-5 14:47
俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。

作者: 蒙在股里 时间: 2015-3-12 08:35
HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

作者: 柔情似水 时间: 2015-3-19 19:51
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

欢迎光临仓酷云 (http://ckuyun.com/)