CSS样式表创建美妙绝伦的网站 -pc6资讯

您的位置：首页 → 网页设计 → HTML/CSS → CSS样式表创建美妙绝伦的网站

CSS样式表创建美妙绝伦的网站 时间：2011/5/21 15:00:01来源：飓风整理作者：不详我要评论(0)

CSS Menu Generator 网页菜单制作V4.0: 授权：免费软件大小：2.5M 语言：简体中文

织选择及声明

　　要一直一直的保持你的css有规则，有组织性。最好把你的选择符进行归类。

　　• reset styles
　　• typography styles
　　• layout styles (header, content, footer, etc.)
　　• module or widget styles
　　• etc.

　　然后，在每一个组里面，通过dom层组织选择符。

　　• any parent styles (containing elements, working outside-in)
　　• block-level element styles (paragraphs, lists, etc.)
　　• inline element styles (links, abbreviations, etc.)
　　• etc.

　　其次在这里面，根据元素的类型工作：

　　• paragraphs
　　• blockquotes
　　• addresses
　　• lists
　　• forms
　　• tables
　　• etc.

　　最后，把css的声明也按上述进行归类。

　　• positioning (with coordinates) styles
　　• float/clear styles
　　• display/visibility styles
　　• spacing (margin, padding, border) styles
　　• dimensions (width, height) styles
　　• typography-related (line-height, color, etc.) styles
　　• miscellaneous (list-style, cursors, etc.) styles

　　有些人喜欢按照字母顺序来组织。这对我没有任何用处，但是可能会对你有帮助。不管你选择什么样的方法，一定要坚持下去。

　　创建一个架构。

　　当你开始创建css样式表的时候，如果你发现你总是不断重复做同一件事情，那就考虑建一个库或者框架结构吧。一个框架就像是网站骨架一样，而且这回节省你建立网站的时间。你可能会在你的框架中发现以下比较典型的样式表：

　　• screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following:
　　o reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility.
　　o typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color.
　　o grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up).
　　• print.css - A print CSS file would include your styles you want to be used when the page is printed.

　　构建框架其中一个范例就是，由0olav bjørkøy整理的框架蓝图（另外作者还包括杰夫豆和埃里克迈耶）。另外一个很流行的框架就是雅虎的用户界面库。很多开发者都感到这个预建立的框架包含臃肿的标记和css，而且也包含着直接的类名称。

　　注意：当我还在起草这篇文章的时候，Jeff Croft已经发布了怎能不爱上css框架的书。在书的注释中他提到的，别人告诉他我强烈反对框架的存在，我不确定这种评论从哪里来的，但是我要声明，事实根本不是那样子，相反我非常喜欢框架。为取得最佳效果，我还是建议你创建自己的框架结构，它能更好的为您或您的工作服务。

　　确保样式表的可读性和优化性之间的平衡。

　　风格格式化因人而异。有的开发者首先创建能够具有可读性的样式表风格，然后在文档还没有完全建好的同时就进行优化（去除评论，位，标签，运输效益等）。这是我想要推荐的一个好技术。然而，如果你不知道在什么情况下去做这些事，就尝试去找一种可以平衡样式表可读性跟优化性的一种风格。Steve Smith在这里有一个很好的建议就可以提供这个技术。

　　此外，考虑到用连字符来代替下划线。Microformats用连字符作为分隔标准，某些旧的浏览器不兼容这种连字符。你可以在Underscores in class and ID Names.读到更多关于这方面的知识。

　　掌握你的文本编辑器。

　　就像艺术家熟知他们的专业工具一样，对于一个设计者或者开发者去熟悉他们需要的工具也同样重要。对于css，你再用的时候，你就是个编辑者。

　　这有很多文字编辑器可供挑选：TextMate, Coda, BB Edit, TextPad, DreamWeaver,我在这里不是要告诉你要采用哪一种；他们各有利弊，一个好的编辑者会选择适合自己的。然而，一旦你决定使用一种文字编辑器，就要去学习关于这个编辑器的所有知识。找到捷径，然后学习所有的你能学到的技巧和窍门。

　　掌握好编辑器能够快速提高你创建样式表的时间，帮助你更有效的完成工作。

　使用版本控制

　　顺畅的可维护性也是创建精美样式表很重要的一部分。这就是为什么版本控制也会成为你的左臂右膀。这不仅对团队很有帮助，而且也是单独设计师或者开发者的救生员。

　　有些应用软件是内置软件，所以在资源方面就被控制了。DreamWeaver用的是一种check-in/check-out同步进行的系统（这可以帮助一个开发者在确定已经正确编辑中没有编辑一个文档）。这虽然很便利，但是在某些地方是被限制的。

　　Subversion (SVN) or Concurrent Versions System (CVS)是一个不错的工具，他用来管理包括添加选择权，回复，察看修改（这对团队很有帮助---你可以查到谁添加，编辑，或修改了密码，什么时间做的）和解决冲突。Jonathan Snook写了一片很好的文章叫“Hosted Subversion”，你可以通过阅读这篇文章得到更多关于如何更快更简单的创建样式表的信息。

　　创造和保持一种风格规范.

　　在一些情况下，一种风格规范是一个作者关于语法规则和写作的标准。他也可以用来作为设计，发展和内容的大纲标准。一种风格规范是一本可以很好地阐明排版，表格，色彩，图片大小等的参考手册。

　　当你创建了一种风格规范，它会在标记和css上起到有效的作用。这种参考可以作为手册用在发展团队和将来的开发人员。它可以包括界定的布局，其中你可以列出不同的版面设计，并提供相关的标记和风格。

　　最后，你也为其他的开发者留下了规范的步骤（比如如核对验证和无障碍环境），来确保更高的质量。

　　结论

　　作为一个css大师，拥有先进的css技巧还是远远不够的。（即：充分认识层叠，箱模式，浏览器如何工作）。我鼓励你去思考一些你能够不断的持续不变的提高可维护性和功效的方法。想想超越怎样设计文本，甚至这就是你一直需要提高的。要是你的样式表即美观又智能，掌握规整完美的工作流程是必不可少。

相关视频

没有数据

文章评论

查看所有0条评论>>

热门文章 没有查询到任何记录。