Posts tagged css
浅谈CSS Sprites技术以及图片优化
1实际上现在很多网站在设计中都采用了CSS Sprites技术，也就是将小图片整合到一张大的图片上，然后根据具体图标在大图上的位置，给背景定位。类似于这样在css中调用：background-position:-8px -95px;
关于CSS Sprites技术的优化我们能做到多少，能减多少的请求数量。这并且不是单方面能做到的，一切取决于XHTML、CSS、CSS Sprites图片之间的配合。现时为止没有绝对优化的做法，这也是我在项目中经常衡量CSS Sprites图片与XHTML关系，如:《一张背景实现自适应九宫格》，以下总结了图片切割术与图象优化的一些方法。 (more…)
优化CSS文件改善代码可读性
6原英文地址：http://woork.blogspot.com/
一些读者曾问我如何以更好的方式组织CSS文件来改善代码的可读性并简化其的管理。一般情况下，我只采用几个简单的规则，但我认为很有用，在你不得不去管理一个有着复杂设计的页面/站点的CSS文件时，它可以避免让你抓狂。 (more…)
编写规范结构的CSS文件
13这是一篇关于如何编写具有良好结构的CSS文件的帖子。
以我的经验，项目流程中如果缺乏“顺序”或一个关于项目的清晰视图是非常不利的而且你还得冒风险去添加，更改，删除class及其属性，如此在你的最终产品中得到的将只有混乱的代码和大量未使用的元素。
我建议在你直接编写CSS代码之前，先把你的网站的所有区块都在草稿里画出来。然后依照下面的简单规制优化你的工作：
- 简洁的
- 以“优雅的代码”为导向
- 有条理的
CSS标准和最佳示例
12本文系统地论述了一个标准化的CSS文件具备的元素，列举了常用的技巧和有说服力的例子。推荐对CSS感兴趣和想成为网站设计师、Web标准化工程师的同学阅读。
css是用来定义网站的用户界面或将显示和内容区分开来的。
由于css被广泛地使用在几乎所有网站上，所以让我们花些时间来创建样式表并确保它符合良好的标准。下面的技巧会极大地在开发过程中帮助CSS初学者。
索引
本处的定义将帮助你和其他开发者了解网站和css文件，还将帮助你们了解CSS文件中的内容。索引部分知识一个格式化了的css注释段落。
- 给出css文件的作者信息
- 定义网站的设计（列数，静态/动态）[columns, static/liquid]
- 持续跟踪文件版本（当文件有多个作者或未来需要有升级更新的时候非常有用）
5种方法立刻写出更好的CSS代码
6
很多人不太懂CSS的，这些基础很容易掌握呵！原文地址
1.重置
首先，很认真的告诉你，总是要重置某些分类。无论你是使用 Eric Meyer Reset、YUI Reset或者你自己编写的重置代码，只要使用就对了。
它能很简单的移除所有元素的填充（padding）和边距（margin）：
1. html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
2. pre, form, fieldset, table, th, td { margin: 0; padding: 0; }
Eric Meyer Reset和YUI Reset都是非常强大的，但是对于我而言，它们走的太远了。我觉得你最终需要重置一切，然后重新定义所有元素的属性。这就是为什么Eric Meyer推荐更有效的使用（重置样式表），而你不要只是使用他的重置样式表，将它拖放到你的项目中。调整它（的重置样式表），建立属于自己的重置样式表。
噢，请停止使用：
* { margin: 0; padding: 0; }
花更多的时间去制作它，当你移除了填充（padding）你认为单选按钮会发生什么变化？表单元素有时能够做些时髦的事情，所以最有效的方式就是将他们独立。
Recent Comments