大学生“考研战”提前打响     北大更换两份问题试卷 研究生入学考试昨天开始     2005年硕士研究生入学英语考试英译汉原题作废     05年考研规则:开考60分钟不准交卷     北大女博士代言广告引争议 学业工作不能兼容?     北京招聘会显示:研究生招聘条件越来越苛刻     广东硕士招聘会女硕士受限制 用人单位诉说无奈     担心成为择偶障碍 九成女硕士放弃继续攻读博士     考研热绷紧谁的神经     不就业不离校 大学生缘何单恋“考研一枝花”?     考研频现文理大换行     今年考研人数不足130万     江苏两万名硕士、博士研究生冒雨赶人才大集     考研专业“冷热差”大     怀着感恩的心,谈我的考研体会与大家分享     错过考研报名可以补报     “考研承诺”=“画蛇添足”     2005年研究生考试新看点     考研大军热衷“跨专业”     考研一族的另一种生存方式     14岁“神童”北大读研 专家提出四个非智力问题     2004中国大学研究生院排名 清华北大浙大列三甲     2005考研大军正形成 明年竞争更加激烈     参加“西部计划”考研可加分     2004届大学毕业生的生存状况调查     “绿色通道”开通 国防生可带薪读研     暨南大学博士生考试 台湾地区考生增幅超过100%     大学扩招成风 应宽进严出遏制研究生“大跃进”     沪上各高校表示研究生教育收费将带动机制创新     广东研究生暂时不全额收费 穷学生照样也有书读     收藏本站  
课件  聊天  家教  图书  媒体  博客  校友录
美图  游戏  留学  教师  校长  家长  寝室录
CSS让网页更容易设计与维护-网站开发-培训资源-培训平台-中国教育网络联盟
您的位置 / 首页 / 培训平台 / 培训资源 / 网站开发 / 正文
CSS让网页更容易设计与维护
发布时间:2007-12-13 来源:网友提供
 

    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的选取方法,每种浏览器的支持不一,像IE 6就不支援子系或旁系的选取器。

  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:visit)、以及鼠标经过(a:hover)等。

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

  Inheritance

  继承

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

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

    float

  飘浮,文绕图

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

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

页面功能 【我来说两句】【查看留言】【 】【打印】【关闭
 相关文章
 高考指南 更多>>>
 大学生就业指导 更多>>>
中国教育网络
关于我们 | 网站导航 | 合作伙伴 | 广告服务 | 付款方式 | 招商合作 | 会员服务 | 招聘信息 | 客户投诉
中国教育网络联盟 版权所有 《中华人民共和国增值电信业务经营许可证》:黑ICP证020069号
地址:哈尔滨市开发区衡山路58号 邮编:150090 电话:0451-87000664 82335792 82335793 82335794
Copyright © 2000-2007 www.edu-chn.com All Rights Reserved