IT技术江湖   操作系统   安全技术   平面设计   Web开发   数据库   互联网   搜索引擎   网络广告   
引擎技术江湖  BLOG  合作联系
本站
Google
IT技术江湖
首页>Web开发>DIV+CSS重构> CSS让网页更容易设计与维护
  • IT技术江湖
  • CSS让网页更容易设计与维护
    http://www.hack1st.com 来源: 2008-03-20 阅读: 评论

     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。

    上一页12 下一页

    上一篇:CSS的学习应该注意学习方法  
    下一篇:Web 的内容(Content)、结构(Structure)与表现(Presentation) 漫谈

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与本站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·网页制作基础知识:为什么我的设置的div最
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
    最新更新
    • ·从四个方面谈谈Web标准的价值所在
      ·CSS编写中灵活运行注释的意义
      ·用CSS制作的很不错的简洁的网页导航下拉菜
      ·一个用纯CSS制作的网页下拉菜单
      ·Div + CSS高度自适应解决方案
      ·简单了解学习CSS的伪类
      ·CSS 中的行为 —— expression
      ·CSS样式表技巧总结
      ·DIV和CSS排版中制作细线条的几种方法
      ·运用 CSS 的 absolute 与 relative 制作的
    文章关注度排行
    ·Div + CSS高度自适应解决方案
    ·一个用纯CSS制作的网页下拉菜单
    ·用CSS制作的很不错的简洁的网页导航下拉菜
    ·DIV和CSS排版中制作细线条的几种方法
    ·控制网页文件大小通过精简CSS实现
    ·CSS的学习应该注意学习方法
    ·CSS让网页更容易设计与维护
    ·CSS实战:利用CSS相对定位进行多行多列布局
    热点推荐
    频道推荐
    • ·CSS的学习应该注意学习方法
    • ·CSS让网页更容易设计与维护
    • ·CSS设计符合Web标准的网页表单的几个技巧
    • ·巧妙运用CSS样式表立刻改变鼠标的样式
    • ·纯CSS制作的新闻网站中的文章列表
    • ·CSS布局实例:上中下三行,中间自适应
    • ·Web 的内容(Content)、结构(Structure)
    本站精华
    • ·巧妙运用CSS样式表立刻改变鼠
    • ·Web 的内容(Content)、结构
    • ·CSS让网页更容易设计与维护
    • ·CSS的学习应该注意学习方法
    • ·CSS布局实例:上中下三行,中间
    • ·纯CSS制作的新闻网站中的文章
    • | 网站导航 | 联系QQ | 编辑邮箱 | RSS订阅 | 友情链接 | 官方blog
    • 版权所有:IT技术江湖 @2007-2008
    • powered by www.hack1st.com online services. all rights reserved.京ICP备07005766号