公告

更新

 

互联网 JS控件 按钮 黑色 灰色 白色 蓝色 绿色 黄色 橙色

> Css > Css新闻

CSS 让网页更容易设计与维护
0
作者:vip_260     来源:未知     日期:2009/10/30 14:03:54     人气:      标签:
  文绕图虽然是用在图、文关系上,不过在设计实务中,更大量应用在版面定位上。另一个常用来定位版本的功能是「 posit 」,可以精确地用像素指定任意位置。利用「 float 」或「 posit 」,便可以取代过去透过巢状表格才能达到精准定位。
  语法立意让网页内容与视觉呈现分离,一方面使得页面维护工作更容易,不会因内容或视觉效果改变影响到另一方,这样的页面设计,也对搜寻引擎更为友善,更容易搜寻到页面内容。
  串接样式表,网页外观的控制语法
  最早是以文件的概念组成,希望透过网页与超链接,让文件与知识更容易连接援引。从 HTML 语法大量使用文件概念的标签(例如代表标题的< H1 >,代表段落的< P >)就不难看出 WWW 这个特质。
  然而 WWW 比起早期其它网络媒介更迷人的地方,于它能直接在页面嵌入并呈现图片,这个改变让 WWW 发展迅速,也让页面视觉装饰大为盛行。但网页先天的文件性格,让图像排版设计难以施展手脚,于是像利用巢状表格与图像拼组而成的页面开始盛行,以求达到精准元素定位与更精美的视觉效果。这个潘多拉盒子一开,造成了许多失控的乱象,让页面原始码难以阅读与维护。
  为了提高网页在视觉上可以有更多元的表示, W3C 1996 年推出 CSS 第一版,提供解决之道。不过由于 CSS 有赖于浏览器的支持,因此耐久以来 CSS 推展情况一直不佳,一直到 IE 6 Firefox 等主流浏览器支持 CSS 才渐渐改善。
  语法立意让网页内容与视觉呈现分离,一方面使得页面维护工作更容易,不会因内容或视觉效果改变影响到另一方,这样的页面设计,也对搜寻引擎更为友善,更容易搜寻到页面内容。其次, CSS 也可以增加页面在不同媒介的呈现效果。同一份页面,可依据用途不同,例如在屏幕显示或打印,而自动切换不同的 CSS 语法,让呈现最佳化。也由于读取页面的媒介越来越多元(如手机、 PDA CSS 可以弹性调整呈现方式,都更加彰显 CSS 网页上的优势。文⊙黄天赐
  选取器
  要透过 CSS 为 HTML 元素套用样式效果,首先须指向特定元素,像是标题、段落或超链接等,而这个指定的方法,就称为选取器。
  最基本的选取器,指定 HTML 卷标元素的名称,另外还有 ID 选取器、类别选取器、虚拟类别、子系、旁系等,不过这些 CSS 选取方法,每种浏览器的支持不一,像 IE 6 就不支援子系或旁系的选取器。
  滥用 P 标签的设计人员
  事实上,善用 CSS 串接与继承的特性,就能创造出精准、丰富的视觉效果。但是并非仅靠 CSS 滥用语法的情况就能改善。
  过去盛行巢状表格排版,导致 Web 原始码难以阅读与维护。不过 CSS 设计人员如不善用串接与继承,而以大量 P 区块语法作页面排版,将使页面原始码充斥 P 标签,这往往和使用巢状表格一样,难以阅读,这种设计人员便称为「 Divist 」。 CSS 并非万灵丹,须靠设计人员正确运用,才干达到效果。
  怪癖模式
  浏览器改版时,通常都会加强对网页标准语法的支持,不过这也意味着,依照过去浏览器特性写出来的页面,呈现上会有问题,为了坚持向前兼容,浏览器通常会设计规范模式与「怪癖」模式,确保一些旧网站能用较宽松、容错率较高的语法解译方式呈现。
  浏览器会依网页宣告的 DOCTYPE 与 DTD 决定页面呈现将依照规范模式或怪癖模式。
  串接规则
  具备串接的规则和明确度,用来处理样式冲突的情况。串接规则会依重要性排序,决定采用哪一种样式。
  串接规则中,重要性最高的标示有「 !import 」的使用者样式,其次是同样标有「 !import 」的作者样式表。
  没有标「 !import 」时,作者样式表的重要性高于使用者。透过重要性规定,浏览器就能决定呈现哪一种样式,而如果重要性一致时,则后出的规则会覆写较早的规则。
  明确度
  由于 CSS 具有可串接、继承的特性,某一个元素有可能被指定不同的样式。发生这种情况时,浏览器就会依明确度来决定呈现那一种样式。
  明确度规定每一种选取器都具有一个计数值,例如 ID 选取器的明确度是「 0 1 0 0 」,而类别选取器的明确度是「 0 0 1 0 」,当某个元素同时套用两者,而且局部样式又有冲突时,因为 ID 选取器的明确度较高,就会以它值为主。
  小技巧
  浏览器支持与实作的方式不同,甚至存在 bug 都让设计人员在跨浏览器的页面设计遇到挑战。为了解决这些难题而发展出的技巧,便称为
  例如 IE 5 Width 这个语法实作,与 W3C 制定的规范有所不同,造成它与其它浏览器会呈现不同的结果。为了解决这个问题,而有所谓「 Box Model Hack 」的技巧,让 IE 5 也能和其它浏览器呈现相同的结果。
  虚拟类别
  最常见的虚拟类别是应用在超级链接语法上。例如超级链接指定连结颜色( a:link 造访过颜色( a:visit 以及鼠标经过( a:hov 等。
  事实上虚拟类别不只能用在超级链接上,例如表格或窗体输入字段等, CSS 都能选取并指定多种状态,但是由于 IE 6 以前的浏览器只支持少数虚拟类别语法,即使最常见的超级链接也支持不完整( a:focu 便不支持)造成使用的人很有限。
  继承
  继承是 CSS 设计上相当具有效率的原则,能精简设计上的复杂性。例如在「 bodi 」选取器指定字型与大小之后,包括在「 bodi 」底下的所有元素,都会自动继承这个样式,不需要一一为子系的元素再指定样式。
  继承而来的属性,也可以透过指定值进行复写,因此如果区块需要不同的字型,只需要重新指定新值给这个区块,就可以采用新字型。透过这种方式,可以大为减少选取器的数量。
  飘浮,文绕图
  文绕图的功能是透过指定「 float 」属性值,就能让区块「飘浮」起来,并透过指定左、右位置,移到定点。
Copyright 2008 网站频道 All Rights Resverved.
提供:网页特效 JS广告 网站截图 酷站推荐 交流群:3506863
     页面执行时间0.0781秒 查询数据库8次