CSS教程,让网页对搜索引擎更友好

2020-05-10 13:27:46易采站长站整理

Quirk Mode 怪癖模式
浏览器改版时,通常都会加强对网页标准语法的支持,不过这也意味着,依照过去浏览器特性写出来的页面,在呈现上会有问题,为了保持向前兼容,浏览器通常会设计标准模式与「怪癖」模式,确保一些旧网站能用较宽松、容错率较高的语法解译方式呈现。

浏览器会依网页宣告的DOCTYPE与DTD,决定页面呈现将依照标准模式或怪癖模式。

Cascade Rule 串接规则
CSS具备串接的规则和明确度,用来处理样式冲突的情况。串接规则会依重要性排序,决定采用哪一种样式。

在串接规则中,重要性最高的是标示有「!import」的使用者样式,其次是同样标有「!import」的作者样式表。

在没有标「!import」时,作者样式表的重要性高于使用者。透过重要性规定,浏览器就能决定呈现哪一种样式,而如果重要性一致时,则后出的规则会覆写较早的规则。

Specificity 明确度
由于CSS具有可串接、继承的特性,某一个元素有可能被指定不同的样式。发生这种情况时,浏览器就会依明确度来决定呈现那一种样式。

明确度规定每一种选取器都具有一个计数值,例如ID选取器的明确度是「0,1,0,0」,而类别选取器的明确度是「0,0,1,0」,当某个元素同时套用两者,而且部分样式又有冲突时,因为ID选取器的明确度较高,就会以它的值为主。

CSS Hack CSS小技巧
CSS在浏览器支持与实作的方式不同,甚至存在bug,都让设计人员在跨浏览器的页面设计遇到挑战。为了解决这些难题而发展出的技巧,便称为CSS Hack。

例如IE 5在Width这个语法实作,与W3C制定的标准有所不同,造成它与其它浏览器会呈现不同的结果。为了解决这个问题,而有所谓「Box Model Hack」的技巧,让IE 5也能和其它浏览器呈现相同的结果。

Pseudo Class 虚拟类别
最常见的虚拟类别是应用在超级链接语法上。例如超级链接指定连结颜色(a:link)、造访过颜色(a:visit)、以及鼠标经过(a:hover)等。

事实上虚拟类别不只能用在超级链接上,例如表格或窗体输入字段等,CSS都能选取并指定多种状态,但是由于IE 6以前的浏览器只支持少数虚拟类别语法,即使最常见的超级链接也支持不完整(a:focus便不支持),造成使用的人很有限。

Inheritance 继承
继承是CSS在设计上相当具有效率的原则,能精简设计上的复杂性。例如在「body」选取器指定字型与大小之后,包含在「body」底下的所有元素,都会自动继承这个样式,不需要一一为子系的元素再指定样式。

继承而来的属性,也可以透过指定值进行复写,因此如果区块需要不同的字型,只需要重新指定新值给这个区块,就可以采用新字型。透过这种方式,可以大为减少选取器的数量。