网页中“CSS”的使用

为了提高网页在视觉上可以有更多元的表现，W3C在1996年推出CSS第一版，提供解决之道。不过由于CSS有赖于浏览器的支持，因此长久以来CSS的推展情况一直不佳，一直到IE 6、Firefox等主流浏览器支持CSS，才渐渐改善。

CSS语法立意让网页内容与视觉呈现分离，一方面使得页面维护工作更容易，不会因内容或视觉效果改变影响到另一方，这样的页面设计，也对搜寻引擎更 为友善，更容易搜寻到页面内容。其次，CSS也可以增加页面在不同媒介的呈现效果。同一份页面，可依据用途不同，例如在屏幕显示或打印，而自动切换不同的 CSS语法，让呈现最Selector 选取器 。

要透过CSS为HTML的元素套用样式效果，首先须指向特定元素，像是标题、段落或超链接等而这个指定的方法，就称为选取器。

最基本的选取器，是指定HTML卷标元素的名称，另外还有ID选取器、类别选取器、虚拟类别、子系、旁系等，不过这些CSS的选取方法，每种浏览器的支持不一，像IE6就不支援子系或旁系的选取器。

Quirk Mode 怪癖模式

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

浏览器会依网页宣告的DOCTYPE与DTD，决定页面呈现将依照标准模式或怪癖模式。 佳化。也由于读取页面的媒介越来越多元(如手机、PDA)，CSS可以弹性调整呈现方式，都更加彰显CSS在网页上的优势。

Divist 滥用DIV标签的设计人员

事实上，善用CSS串接与继承的特性，就能创造出精准、丰富的视觉效果。但是并非仅靠CSS，滥用语法的情况就能改善。

过去盛行巢状表格排版，导致Web原始码难以阅读与维护。不过CSS设计人员如不善用串接与继承，而以大量DIV区块语法作页面排版，将使页面原始 码充斥DIV标签，这往往和使用巢状表格一样，难以阅读，这种设计人员便称为「Divist」。CSS并非万灵丹，须靠设计人员正确运用，才能达到效果。

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便不支持)，造成使用的人很有限。

Cascade Rule 串接规则

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

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

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

float 飘浮，文绕图

CSS的文绕图的功能是透过指定「float」属性值，就能让区块「飘浮」起来，并透过指定左、右位置，移到定点。

文绕图虽然是用在图、文关系上，不过在设计实务中，更大量应用在版面定位上。另一个常用来定位版本的功能是「position」，它可以精确地用像素指定任意位置。利用「float」或「position」，便可以取代过去透过巢状表格才能达到的精准定位。

Inheritance 继承

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

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

本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！

本文标题：网页中“CSS”的使用
文章源于：https://www.cdcxhl.com/news48/310548.html

成都网站建设公司_创新互联，为您提供自适应网站、Google、移动网站建设、App设计、网站制作、关键词优化

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联