首页 | 站长免费中心 | 新手上路 | 网站运营 | 网页制作 | 图片设计 | 动画设计 | 网页编程 | 网页特效 | 本站专题 | 虚拟主机 | 域名注册 | 网站建设 | 程序下载
       免费空间资源 | 新闻咨询 | 免费域名 | 免费网盘 | 网站推广 | 网站策划 | 建站经验 | 网站优化 | 网页代码 | 源码下载 | 音乐小偷 | 网络赚钱 | 论坛交流
网站建设
网站建设
虚拟主机
虚拟主机
域名注册
域名注册
711网络首页
站长工具
站长工具
网站源码
网站源码
站长论坛
站长论坛

 711网络 网页制作HTML/Xhtml

CSS教程:检验CSS书写是否标准合理

来源: 互联网    日期:2009-7-22
 

简介:CSS用来定义网站的用户界面,并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到,下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。

CSS用来定义网站的用户界面,并实现页面展现与内容的分离。CSS在几乎所有的网站都会用到,下面让我们花些精力来确保你的CSS书写的是否标准、合理。这些提示对CSS初学者同样会有很大的帮助。

  1. 样式表索引

    样式表头部索引定义可以帮助你和其它人弄清楚该样式表文件的相关信息,它一般是一段格式化的CSS注释文本。

    • 给出该css文件作者的相关信息
    • 定义站点的布局(几栏,静态布局/动态布局)
    • 记录文件版本号(利于多作者协作及将来更新)
    样式表索引

    样式表索引

  2. 命名锚点

    命名锚点是用来规划整个CSS文件结构的(就好像书签一样),从而使整个CSS文件获得良好的组织。

    命名锚点一般也是书写在样式表头部的索引注释中。CSS本身没有内部的锚点系统,所以我一般采用下面的小技巧来完成。在头部索引拷贝你想找到的锚点,并在整个文档中查找,从而获取该CSS节。(描述的可能不清晰,看下面图应该就明白了)

    命名锚点定义及查找

    命名锚点定义及查找

  3. 避免多余Class定义

    很多人(尤其是新手)在书写CSS中会定义不必要的Class来样式化一些元素。

    其实CSS的一个优雅之处在于它的上下文选择符(即子选择器和相邻同胞选择器),如下:

     

    避免多余Class定义

    避免多余Class定义

  4. 合适的命名

    为class定义一个准确清晰的类名十分关键,它有助于你更好更快的理解CSS定义,不至于混淆。

     

    合适的命名

    合适的命名

  5. 缩写

    在CSS中经常会利用缩写把多个相同类型的属性定义指定为一个。

    CSS缩写会使CSS文档更加干净、简洁。下面是几个例子:

     

    CSS缩写

    CSS缩写

  6. CSS图像拼合(即CSS Sprites技术)

    CSS Sprites技术:将用到的所有背景图片合并为一张图片,使用css背景属性,来控制图片的显示位置和方式。

    CSS Sprites技术的应用可以大大减少HTTP请求的次数,减轻服务器压力,同时缩短了悬停加载图片所需要的时间延迟,使效果更流畅,不会停顿。

    苹果官方网站的菜单设计是CSS Sprites技术应用非常好的案例:

     

    CSS Sprites

    CSS Sprites

  7. 特殊性

    即使在不太复杂的样式表中,也可能有两个或更多规则寻找同一元素,CSS通过选择符特殊性来决定规则的次序。

    简而言之,每个CSS选择符都会分配一个权重。将规则的每个选择器的值加在一起,就可以计算出规则的特殊性。CSS特殊性的使用在大型CSS文件中会很有帮助。

    CSS特殊性在CSS中是比较大的一块内容,很难用几句话描述清楚,下面是几个示例:

     

    CSS 特殊性

    CSS 特殊性

  8. CSS Reset(CSS重置,偶个人叫它CSS初始化)

    CSS Reset用于确保网站在不同浏览器中能够获得相同的展示效果。不同的浏览器有一套自己的初始默认设置,最终导致不同的UI展现。CSS重置就是用来解决这个问题,使你能在不同浏览器展现一致的基础上构建站点。

    我们可能不会要求你一定去使用某个CSS框架,但是希望能书写CSS Reset。我们可以在网上找到不少书写好的CSS Reset样例。

     

    CSS Reset

    CSS Reset

  9. CSS Hacks

    可以说再完美的CSS也无法在所有浏览器中获得一致的展现,这是因为不同的浏览器给予你的CSS不同的解释。如果想要网站在不同的浏览器显示一致,你不得不使用CSS Hacks。

     

    CSS Hacks

    CSS Hacks

    不过使用CSS Hack往往会导致CSS验证出现错误,一个替代的解决方案是为不同的浏览器书写不同的CSS,然后在html中使用条件语句引用它们。

  10. CSS验证

    当你书写完一个CSS文件,对它进行验证是十分必要的。它可以确保书写的CSS没有错误,并且在所有浏览器中正确的展示。

    W3C网站验证是用来验证CSS的常用工具。

     

    CSS验证

    CSS验证

注:

  • 本文原文地址:http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices


更多的CSS教程:检验CSS书写是否标准合理请到论坛查看: http://BBS.TC711.COM



【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】 来源: 互联网    日期:2009-7-22   

发 表 评 论
查看评论

  您的大名:
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
认证编码: 刷新验证码
点评内容: 字数0
  精品推荐  
  本月推荐  
  友情赞助  

关于我们 | 联系我们 | 广告投放 | 留言反馈 | 免费程序 | 虚拟主机 | 网站建设 |  网站推广 |  google_sitemap baidu_sitemap RSS订阅
本站所有资源均来自互联网,如有侵犯您的版权或其他问题,请通知管理员,我们会在最短的时间回复您
Copyright © 2005-2015 Tc711.Com All Rights Reserved 版权所有·711网络   蜀ICP备05021915号
110网监备案 信息产业备案 不良信息举报