CSS教程,让网页对搜索引擎更友好
日期：2014-04-14 浏览次数：21344 次
网页制造aiyiweb文章简介：CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护任务更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜索引擎更为友善，更容易搜索到页面内容。
CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护任务更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜索引擎更为友善，更容易搜索到页面内容。
CSS，Cascading Style Sheets 串接款式表，网页外观的控制语法
World Wide Web最早是以文件的概念组成，希望透过网页与超链接，让文件与知识更容易连接征引。从HTML语法大量使用文件概念的标签（例如代表标题的＜H1＞，代表段落的＜P＞），就不难看出WWW的这个特质。
然而WWW比起晚期其它网络媒介更诱人的地方，在于它能直接在页面嵌入并呈现图片，这个改变让WWW发展迅速，也让页面视觉装饰大为盛行。但网页先天的文件性情，让图像排版设计难以施展手脚，于是像利用巢状表格与图像拼组而成的页面开始盛行，以求达到精准元素定位与更精美的视觉效果。这个潘多拉盒子一开，形成了许多失控的乱象，让页面原始码难以阅读与维护。
为了提高网页在视觉上可以有更多元的表现，W3C在1996年推出CSS第一版，提供处理之道。不过由于CSS有赖于浏览器的支持，因此长久以来CSS的推展情况不断不佳，不断到IE 6、Firefox等主流浏览器支持CSS，才渐渐改善。
CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护任务更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜索引擎更为友善，更容易搜索到页面内容。其次，CSS也可以添加页面在不同媒介的呈现效果。同一份页面，可依据用途不同，例如在屏幕显示或打印，而自动切换不同的CSS语法，让呈现最佳化。也由于读取页面的媒介越来越多元（如手机、PDA），CSS可以弹性调整呈现方式，都愈加彰显CSS在网页上的优势。
Selector 选取器
要透过CSS为HTML的元素套用款式效果，首先须指向特定元素，像是标题、段落或超链接等，而这个指定的方法，就称为选取器。
最基本的选取器，是指定HTML卷标元素的名称，另外还有ID选取器、类别选取器、虚拟类别、子系、旁系等，不过这些CSS的选取方法，每种浏览器的支持不一，像IE6就不援助子系或旁系的选取器。
Divist 滥用DIV标签的设计人员
理想上，善用CSS串接与承继的特性，就能创造出精准、丰富的视觉效果。但是并非仅靠CSS，滥用语法的情况就能改善。
过去盛行巢状表格排版，导致Web原始码难以阅读与维护。不过CSS设计人员如不善用串接与承继，而以大量DIV区块语法作页面排版，将使页面原始码充斥DIV标签，这往往和使用巢状表格一样，难以阅读，这种设计人员便称为「Divist」。CSS并非万灵丹，须靠设计人员正确运用，才能达到效果。
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:vis
CSS，Cascading Style Sheets 串接款式表，网页外观的控制语法
World Wide Web最早是以文件的概念组成，希望透过网页与超链接，让文件与知识更容易连接征引。从HTML语法大量使用文件概念的标签（例如代表标题的＜H1＞，代表段落的＜P＞），就不难看出WWW的这个特质。
然而WWW比起晚期其它网络媒介更诱人的地方，在于它能直接在页面嵌入并呈现图片，这个改变让WWW发展迅速，也让页面视觉装饰大为盛行。但网页先天的文件性情，让图像排版设计难以施展手脚，于是像利用巢状表格与图像拼组而成的页面开始盛行，以求达到精准元素定位与更精美的视觉效果。这个潘多拉盒子一开，形成了许多失控的乱象，让页面原始码难以阅读与维护。
为了提高网页在视觉上可以有更多元的表现，W3C在1996年推出CSS第一版，提供处理之道。不过由于CSS有赖于浏览器的支持，因此长久以来CSS的推展情况不断不佳，不断到IE 6、Firefox等主流浏览器支持CSS，才渐渐改善。
CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护任务更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜索引擎更为友善，更容易搜索到页面内容。其次，CSS也可以添加页面在不同媒介的呈现效果。同一份页面，可依据用途不同，例如在屏幕显示或打印，而自动切换不同的CSS语法，让呈现最佳化。也由于读取页面的媒介越来越多元（如手机、PDA），CSS可以弹性调整呈现方式，都愈加彰显CSS在网页上的优势。
Selector 选取器
要透过CSS为HTML的元素套用款式效果，首先须指向特定元素，像是标题、段落或超链接等，而这个指定的方法，就称为选取器。
最基本的选取器，是指定HTML卷标元素的名称，另外还有ID选取器、类别选取器、虚拟类别、子系、旁系等，不过这些CSS的选取方法，每种浏览器的支持不一，像IE6就不援助子系或旁系的选取器。
Divist 滥用DIV标签的设计人员
理想上，善用CSS串接与承继的特性，就能创造出精准、丰富的视觉效果。但是并非仅靠CSS，滥用语法的情况就能改善。
过去盛行巢状表格排版，导致Web原始码难以阅读与维护。不过CSS设计人员如不善用串接与承继，而以大量DIV区块语法作页面排版，将使页面原始码充斥DIV标签，这往往和使用巢状表格一样，难以阅读，这种设计人员便称为「Divist」。CSS并非万灵丹，须靠设计人员正确运用，才能达到效果。
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:vis
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
