我想网 » CSS

精选15个国外最流行的CSS框架

seasun — Wed, 22 Dec 2010 15:18:50 +0000

CSS框架通常指的是一些CSS文件的集合，这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。虽然对于小的WEB开发项目来说，CSS框架并不一定适用，但是对于规模较大的团队开发项目而言，CSS框架不仅能加快设计开发速度，而且还能有效解决网站改版中带来的诸多麻烦和问题。这里推荐的15款CSS框架是现在国外最流行的CSS框架，希望能对你的开发有所帮助！

例如：

typography.css 基本排版规则
grid.css 基于网格的布局
layout.css 通常的布局
form.css for 表单样式
general.css 更多通用规则

1 . Elements CSS Frameworks

CSS Frameworks

Elements 是一个实用的CSS框架。它是为了帮助设计师更快更高效的来写CSS而建立。Elements 已经超越了仅仅作为一个框架，它有自己的项目工作流。它拥有你完成项目所需的所有东西，这也让你和你的浏览者感到愉悦。阅读概述了解更多。

2 . YUI Grids CSS

CSS Frameworks

YUI Grids基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4 卷的区块的功能。这个4KB的文件可提供超过1000中页面布局组合。更多信息

3 . YAML CSS Framework

CSS Frameworks

Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。YAML基于网页标准并支持所有现代浏览器。所有的 Internet Explorer的主要渲染漏洞都被解决。YAML 完全支持从5.x到7.0的所有的IE版本。

4 . Blueprint CSS

CSS Frameworks

Blueprint 是一个CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

5 . Schema Web Design Framework

CSS Frameworks

Schema 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。与为每一个新的网站项目从零开始创建HTMl/CSS不同，Schema提供必要的基础来开始并立马让你的设计跑起来。

6 . CleverCSS

CSS Frameworks

CleverCSS是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。

7 . Tripoli CSS Framework

CSS Frameworks

Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。

8 . ESWAT Web Project Framework

CSS Frameworks

ESWAT正在重新整理。如果你是冲着我的网站框架来的，那么你就可以在这里下载。也许你也想看看我的其他项目gmachina、AppleSeed。

9 . Boilerplate CSS Framework

CSS Frameworks

作为BluePrint CSS的原作者之一，我决定把我的思想重新整理到一个赤裸裸的框架，它提供最基本的要素来开始任何项目。这个框架将是较小的而且力求不使用非语义的命名习惯。你就是设计者而且你的技术很重要。

10 . WYMstyle CSS Framework

CSS Frameworks

WYMstyle是一组CSS文件，你可以很容易的组合这些文件来快速的创建你的网站的布局。通过提供可靠的、经过良好测试的CSS模块，WYMstyle 力求让每个网站防止枯燥的跨浏览器兼容性测试。

11 . Content with Style Framework

CSS Frameworks

Content with Style下一个逻辑步骤就是将这个扩展为CSS框架，允许使用写好并通过测试的组件来快速开发网站。实际上所需的是搞定一套命名习惯和一个灵活的基本模板。

12 . Logicss Framework

CSS Frameworks

Logicss 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和 PHP程序组成的集合。通常跨浏览器表现行为(不是Meyer的reset文件或是用“*”)，排版支持文本字体大小调整(使用EMs) 和垂直居中，符合可定义的灵活的布局网格利用css 代码生成工具。

13 . That Standards Guy CSS Framework

CSS Frameworks

That Standards Guy只能调用单个样式文件，主样式需要取得 CSS认证(WCAG 1.0)；跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac； IE Hacks使用独立文件；快速创建模板；框架中提供少量注释/实例演示，可以节省时间来理解。

14 . 960 Grid System

CSS Frameworks

960 Grid System是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果，基于960像素的页面宽度。它有两种类型，12和16列，他们可以独立使用或是协同使用。

15 . Emastic CSS Framework

CSS Frameworks

Emastic 是一个CSS框架，它有连续的任务：探索陌生的新世界，寻找新生活和新的网站空间，大胆的去CSS框架尚未到达的领域。它是轻量的、在页面宽度上比较人性化，在网格中使用固定和不固定的列宽。 Elastic 用“em”布局。

Feed enhanced by Better Feed from Ozh

30个必记的选择器

seasun — Mon, 06 Dec 2010 14:39:06 +0000

久没翻译。英语水平本就不高，不敢乱译。博客不能再荒芜下去了，只能硬上。还好这篇我感兴趣，又对CSS有一些了解，有错大家多多指正。
—————————————————————–正文———————————————–
了解基本的id选择器，类选择器和子选择器，如果就此收手，那你会错失很多灵活方法。虽然本文提及的部分选择器属于CSS3范围内，只在一些时新的浏览器有效，不过还是有必要记得这些选择器。

1. *

* {
 margin: 0;
 padding: 0;
}

在提到更先进的选择器之前，为初学者之便，先把常见的选择器解决掉。
星号符会选择页面每个元素。很多开发者用它把所有margin和padding归零。这当然是快捷测试方法。不过我建议你不使用它，它给浏览器带来太多的负担，这不必要。
通配选择器也可以用到子选择器上。

#container * {
 border: 1px solid black;
}

它会选择#container层中的子元素。不过，也不需要经常用这个技巧。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

2. #X

#container {
   width: 960px;
   margin: auto;
}

把哈希符号前缀于选择器就成了ID选择器。这是很普通的方法。不过使用之也需要谨慎。先问自己：为了定位元素就绝对需要赋予id？僵硬刻板的id选择器不能重复使用。如果可能，先试使用标签方法，如html5元素，或者伪类。（不过id选择器的渲染速度是最快的，有得有失，译者注）。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

3. .X

.error {
  color: red;
}

这是类选择器。ID选择器与类选择器的差别是，后者可以用于多个元素。使用类选择器可以把同样的样式赋予一群元素，相反，id选择器只能作用于特定的单一元素。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

4. X Y

li a {
  text-decoration: none;
}

后代选择器是使用很多的选择器。它作用处于X元素内的所有的y元素。不过如果你的选择器像X Y Z A B.error，那你的方法就错了。这开销太大了。（后代选择器的渲染速率不快，特别是在有很长的前缀元素时，译者注）

兼容性

IE6+
Firefox
Chrome
Safari
Opera

5. X

a { color: red; }
ul { margin-left: 0; }

类型选择器会选择页面中同一类型的标签。比如说ul{…}会选择页面中所有的ul。

兼容性

IE6+
Firefox
Chrome
Safari
Opera

6. X:visited and X:link

a:link { color: red; }
a:visted { color: purple; }

:link作用于没有访问过的链接，:visited作用于访问过的链接。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

7. X + Y

ul + p {
   color: red;
}

相信选择器只作用于同一父级元素下的第一个元素。例子中的只有紧邻ul中的第一个p的字体会是红色的。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

8. X > Y

div#container > ul {
  border: 1px solid black;
}

X Y和X>Y不同的地方后者只选择X的第一级子元素。例如下面

   
      
          List Item
           
               Child 
           
         
          List Item 
          List Item 
          List Item

选择器#container>ul只选择直接位于#container层下的ul,不会作用于li中的ul。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

9. X ~ Y

ul ~ p {
   color: red;
}

这个相邻选择器与X+Y相似，不同的是，ul+p只选择与ul相邻的第一个p,而x~Y选择所有与ul相邻的P。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

10. X[title]

a[title] {
   color: green;
}

一种属性选择器。上例中，只选择带有title属性的链接标签。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

11. X[href="foo"]

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

T上例中样式只会作用于链接到http://net.tutsplus.com的a标签。其他没有链到这个网址的a标签不会变成绿色。

这个很有用，不过有点死板，也许我想把所有的nettuts.com链接都变成绿色。在这种情况下，可以使用一些表达式。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

12. X[href*="nettuts"]

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

对了，就是这个。href后面加上星号(通配符)使网址出现nettuts的所有链接都变成绿色。比如说 nettuts.com,tutsplus.com。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

13. X[href^="http"]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

有些网站用这个方法在某些链接上加一些图标说明这些链接到其他网站。它经常用于表达式中显示字符串的开始。如果我们想选择那样带有http的a标签链接，我们可以使用类似上面的CSS。(这不是搜索http://,这不必要，对https://没起作用)。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

14. X[href$=".jpg"]

a[href$=".jpg"] {
   color: red;
}

又一次，我们使用了一个表达式的符号，$,查找字符串的尾部。这个例子中，我们查找所有链接到图片的链接，或许说以.jpg结尾的链接。这当然不对 gif和png格式的起作用。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

15. X[data-*="foo"]

a[data-filetype="image"] {
   color: red;
}

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

回到第8个（？感觉第8个和这个有点风马牛不相及）；我们怎么补偿不同图片格式：png,jpeg,jpg,gif? 我们可以使用多重选择器，比如：

 Image Link

在适当的地方加上钩后，我们就可以使用一个标准的属性选择器选择这些标签。

a[data-filetype="image"] {
   color: red;
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

16. X[foo~="bar"]

 a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

这是一个让人印象深刻的选择器。了解这个技巧的人不多。~符号允许我们选择带有有空白间隔属性的标签。

就像第15个选择器一样，这里，我们可以使用能用间隔符列出需要瓢东东的data-info属性。举例来说，我们给外链些记号吧。

" Click Me, Fool

在适当地方使用标记，然后就可以选择任何带有这些属性的标签。

/* Target data-info attr that contains the value "external" */
a[data-info~="external"] {
   color: red;
}

/* And which contain the value "image" */
a[data-info~="image"] {
  border: 1px solid black;
}

兼容性

IE7+
Firefox
Chrome
Safari
Opera

17. X:checked

input[type=radio]:checked {
   border: 1px solid black;
}

这个伪类选择器只会作用于被选中的用户界面元素(user interface element)，比如说单选按钮，或者复选框。

兼容性

IE9+
Firefox
Chrome
Safari
Opera

18. X:after

这个伪类和:before一样，主要是用来清除浮动的。不过现在人们都能在它们身上找到新的用法。

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }

.clearfix {
   *display: inline-block;
   _height: 1%;
}

兼容性

IE8+
Firefox
Chrome
Safari
Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

这是一个动态伪类。当元素有鼠标移在其上面时样式就会起作用。一般用于链接。比如a:hover{border-bottom:1px solid black;}(border-bottom:1px solid black;效果比text-decoration:underline;好)。

a:hover {
 border-bottom: 1px solid black;
}

兼容性

IE6+ (In IE6, :hover must be applied to an anchor element)
Firefox
Chrome
Safari
Opera

20. X:not(selector)

div:not(#container) {
   color: blue;
}

这个否定伪类非常有用。比如要选择除#container层外的所有层。上面的代码就非常有效。
又比如我要选择除了段落标签外的所有元素(不建议这样做)，可以这样做：

*:not(p) {
  color: green;
}

兼容性

IE9+
Firefox
Chrome
Safari
Opera

21. X::pseudoElement

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

使用这类伪类(用::指定)可以设计一个元素的一片断，比如说第一行，或者第一个字。需要记住的事，这伪类只能作用于块元素。

选择段落的第一个字符

p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

这代码片断先提取页面中的所有段落，然后再查找段落中的第一个字。
这方法经常用于制作报纸风格的页面。

选择段落的第一行

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

兼容性

IE6+
Firefox
Chrome
Safari
Opera

22. X:nth-child(n)

li:nth-child(3) {
   color: red;
}

过去我们无法从一堆元素中选择具体的几个。nth-child伪类可以解决这种问题。
nth-child接受整数参数，不过它不是基于零开始，如果你要选择列表中的第二个，就使用li:nth-child(2)。
我们还可以使用这个伪类选择几个子类。比如，用li:nth-child(4n)来选择4倍数的列表。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

23. X:nth-last-child(n)

li:nth-last-child(2) {
   color: red;
}

如果列表项非常多，但只是需要选择倒数第三个。使用li:nth-child(397)不如使用nth-last-child方便。
和上面的用法不一样，nth-last-child是从后面倒着数。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24. X:nth-of-type(n)

ul:nth-of-type(3) {
   border: 1px solid black;
}

选择子类也许不如根据类型选择元素更方便。比如说现在有5个无序列表，但只需选择第三个，这时可以使用ul:nth-of-type(3)。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

对了，我们也可以使用nth-last-of-type选择倒数第几个元素。

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26. X:first-child

ul li:first-child {
   border-top: none;
}

这个结构性伪类选择父级元素的第一个子对象。这个经常用于移除列表的第一个和最后一个元素的边框。

兼容性

IE7+
Firefox
Chrome
Safari
Opera

27. X:last-child

ul > li:last-child {
   color: green;
}

这个伪类选择父级元素的最后一个对象。

例子

用一个简单的例子来说明这样选择器，首先，我们制作一个列表。

CSS

ul {
 width: 200px;
 background: #292929;
 color: white;
 list-style: none;
 padding-left: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid black;
 border-top: 1px solid #3c3c3c;
}

设置好背景，去掉ul默认的内边距，再给每个li加上边。

就像图片中显示的一样，我们需要去掉第一个和最后一个的边。这时就可以使用:first-child和:last-child。

li:first-child {
    border-top: none;
}

li:last-child {
   border-bottom: none;
}

兼容性

IE9+
Firefox
Chrome
Safari
Opera

Yep – IE8 supported :first-child, but not :last-child. Go figure.

28. X:only-child

div p:only-child {
   color: red;
}

确实，这个你可能很少用。不过这个真的很有用。
在下面的例子，只有第一层中的p标签会变色。父级元素下的子类多于一个时这个伪类效果就停止了。

 My paragraph here. 

    Two paragraphs total. 
    Two paragraphs total.

兼容性

IE9+
Firefox
Chrome
Safari
Opera

29. X:only-of-type

li:only-of-type {
   font-weight: bold;
}

和28个结构性伪类相似，这个伪类只会在父级元素下只有一个子级元素X的情况下起作用。这种情况，你也可以使用ul li，不过这样就会选择所有列表项了。

ul > li:only-of-type {
   font-weight: bold;
}

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30. X:first-of-type

first-of-type允许我们选择同级元素的第一个。

一个测试

为便于理解，做个测试。复制下面的标签


    My paragraph here. 
   
       List Item 1 
       List Item 2 
   

   
       List Item 3 
       List Item 4

现在，尝试去选择list Item 2,当你找到方法或者放弃时，请接着看一下。

办法1

有几种的不同的方法。我们评审其中几个。首先用first-of-type

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

这个代码的意思是，在页面中找到第一个无序列表，然后再找到其直接的子级元素(也就是li)，最后找到第二个li。

方法2

p + ul li:last-child {
   font-weight: bold;
}

在这个例子，先查找与p标签直接相邻的ul标签，然后再找倒数第一个li(也就是第二个li)。

方法3

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

兼容性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

Feed enhanced by Better Feed from Ozh

HTML, JavaScript,CSS简述

seasun — Wed, 01 Dec 2010 13:39:16 +0000

HTML, JavaScript,CSS 等等，这可不是你妈口中的AJAX

众所周知，网页是用超文本标记语言（HTML）编写的，这种网页编程语言告诉浏览器怎样在网页中输出并展现内容。换句话说，HTML就是网页这个建筑的一砖一瓦。长期以来，这些“砖瓦“都相当简单而且是静态的：仅有几行文字，或一些链接，或几张图片。

而今，网页中远不止文本，链接和图片了。我们期望能够在线下象棋时，每走一步不必等待网页重新加载，或者查看一下我们周边的地图时，每拖到一下网页也不用重新刷新。

这些动态网页的创意开始与于脚本语言JavaScript的出现。主要的网页浏览器都支持JavaScript，这就意味着网页能够加入一些更有意义的实时互动。例如，当你在线填一些表格时，点击“提交“按钮，网页可以调用 JavaScript代码来实时检查表格是否填错，如果有错误，网页马上就能提示你。

但今天我们所熟知的动态网页，是当XHR(XML Http Request)引入到JavaScript后才生机焕发，也是首次应用在像微软网页版Outlook，Gmail和Google地图这样的网页程序中。 XHR可以单独改变网页中的独立元素而无需重新加载整个网页，像网页中的游戏，地图，视频，或是个小调查。因此，网络应用程序运行地更快，更及时。

CSS（层叠样式表）的应用也使得网页显示更为生动。CSS给网页程序员提供了一个简单，有效的方式来定义网页的布局，可以使用颜色，圆角，渐变和动画等设计元素来美化网页。

网页程序员通常把JavaScript, XHR, CSS 和其他诸如AJAX （异步JavaScript和XML）等网页技术结合，形成一个强有力的组合。随着增加的更多功能和改进整合在一起，HTML 也继续发展出一个新的标准版本。

今天，网页在全体技术专家，思想家，程序员和一些组织的不懈努力下不断发展，这些组织不但创造了网页技术，而且要确保这些技术能被诸如 IE，Firefox, Safari和Google Chrome等浏览器中支持。网页技术专家和浏览器之间的相互关系，对网页开发者来说，使得网页成为既开放又友好的制作平台，他们给我们的生活带来更多有用而且有趣的网页应用程序。

Feed enhanced by Better Feed from Ozh

CSS：Webkit核心Chrome和Safari的独有Hack

seasun — Sun, 21 Nov 2010 07:20:16 +0000

IE内核有着自己独立的一个hack:*，再调试IE的时候常会用到。
同样Webkit内核也有着自己独立的一个hack，是只针对Chrome和Safari才起作用:

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /* Webkit内核兼容CSS*/
}

DEMO:http://www.iwanna.cn/examples/css/hack/webkit_hack.html

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .webkit_color{color:#f00}
	 .webkit_border{border:1px solid #f00;}
	 .webkit_background{background:#f00;}
}

IE、FF都将不会识别定义的颜色、描边、背景。
测试结果如图：

扩展阅读：《CSS HACK：IE6、IE7、Firefox之间的区别及兼容写法》

Feed enhanced by Better Feed from Ozh

CSS HACK：IE6、IE7、Firefox之间的区别及兼容写法

seasun — Sun, 21 Nov 2010 07:12:23 +0000

IE6、IE7、Firefox之间的区别
区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green !important;background:blue;

区别IE7与FF：

background:orange; *background:green;

区别FF，IE7，IE6：

background:orange;*background:green;_background:blue;
background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
浏览器优先级别:FF

兼容写法一：
IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;
根据上述表达，同一类/ID下的CSS 　hack可写为：

.searchInput {
background-color:#333;/*三者皆可*/
*background-color:#666　!important; /*仅IE7*/
*background-color:#999; /*仅IE6及IE6以下*/
}

一般三者的书写顺序为：FF、IE7、IE6.

兼容写法二：
IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：

.searchInput {
background-color:#333;/*通用*/
_background-color:#666;/*仅IE6可识别*/
}

兼容写法三：
*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}/*仅IE6*/
*+html .searchInput {background-color:#555;}/*仅IE7*/

屏蔽IE浏览器：
select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。

*:lang(zh) select {font:12px  !important;} /*FF的专用*/
select:empty {font:12px  !important;} /*safari可见*/

IE6可识别：
这里主要是通过CSS注释分开一个属性与值，注释在冒号前。

select { display /*IE6不识别*/:none;}

Feed enhanced by Better Feed from Ozh

如何更好的写你的CSS代码

seasun — Sun, 14 Nov 2010 07:22:47 +0000

CSS是并不是一门很难学习和使用的语言,尽管它可能难以精通.如果你在你的项目中使用到了CSS,特别是在一个比较大的项目中,如果你没有用到一些技巧来帮助你更好的管理CSS代码,那将给你带来一定的困难.通过一定的技巧来更好的写你的CSS代码,你可以让你在programing时更轻松,并同时改善你的项目.当涉及到CSS,代码中的一些小的调整就可以带来很大的改进,使你的工作更有效,并带来很好的结果.今天,我在这里将提到19种技巧, 希望可以帮助你在你的项目中写出更好的CSS代码.

用有意义的名字

在CSS中,其实是任何一门语言中,使用有意义的或是描述性的名字来定义你的变量,都是很重要的.它提高你代码中的可读性和可维护性.这时举一个经典的使用不好的命名规则的例子:有两列的布局,其中左边包含菜单的列命名为”leftcol”,另一个右边的是包含内容的列叫”rightcol”.这样是可以的,你有没有想过,如果这时你的客户要求改成不同的样式,怎么办呢?假如他想改变两个列的位置,那么,这样的这两个列命名含义就有错误了.

最好的办法是确定哪个是主要的内容,哪一个是次要的.主要内容可以被命名为”maincotent”,次要的内容可以命名为”secondarycontent”.这就可以解决交换列的问题,并提高了代码的可维护性.

没有ID的,多使用类

一个比较常见的错误,就是有一些web开发人员非常喜欢使用ID为每个标签命名,如果你在写JavaScript时这样做那是很高效的,因为这个可以很快的找到那个元素.然而,在CSS中,过渡的使用ID,只能降低代码的重用性.举个例子:

#formExample1{
     border:1px solid gray;
    padding:20px;
}
#formExample2{
     border:1px solid gray;
     padding:20px;
}

这样我们就没有用到代码的重用性,因为我们为不同的ID定义的相同的样式.使开发时间大大浪费,还写了很少不必要的代码.我们可以有class来这样写,举个例子:

.form{
     border:1px solid gray;
    padding:20px;
}

另一个降低了可重用性的例子是,使用复杂的选择器来写一个简单的标记.举个例子:

div.error-message{
     color:red;
}

为了方便维护的目的,这里我们最好重写这个选择器,只是.error-message.而且现在我们可以在我们想要的所有元素用这个样式.

正确的使用继承

大多数的时候,人们会忘记一些元素会继承它们父元素一些样式.而去创建一些不必要的class来为那些元素写样式.举个例子,这里写一个斑马表格, 普遍的这样:

.odd{
     background-color:#E9EBEB;
}
.even{
     background-color:#9EB0EE;
}

同时table的HTML代码则是:


  
    Lorem Ipsu
    Lorem Ipsu
    Lorem Ipsu
    Lorem Ipsu

而最好的解决方案是为table的body一个背景色, 或者找到偶数行或奇数,并为它写样式.这样会节省很多时间,少写很多代码.例如,我们这样写:

table tbody{
  background-color:#E9EBEB;
}
.even{
     background-color:#9EB0EE;
}


      
         Lorem Ipsu
         Lorem Ipsu
         Lorem Ipsu
         Lorem Ipsu

当然我们还有CSS to select the even and odd elements这个方法,但如果我们的浏览器不支持呢.

命名空间

命名空间是一个很好的使用层叠并有效的避免对所有元素都使用class的方法.举个例子,想像我们要创建一个widget并且widget的 title我们要用一个H3标签.我们可以为widget建一个类名,并通过这个类关联到这个类里的任何东西.

.widget{
	width:300px;
        height:200px;
       border:1px solid gray;
}
.widget > h3{
	 color:white;
         background:black;
         padding:10px;
}


    Weather Details

优化统一不同的浏览器

其中最困难的就是如何让CSS代码在众多主浏览器中正常的工作,有些开发者想要让每一个像素都能在所有浏览器中看起来一样,这是一个很大的错误.因为这样,我们必须要采用大量的hack和样式,来为一个不支持某种效果的浏览器,让它能够让网页看起来一样.一个例子就是圆角框,如果圆角框只是为了达到一个统一美观的目的,为什么不放弃那些真正支持这个的浏览器,为什么要为用户大多数时间都不会在意的地方而特意创建一个圆角的图片来.

当有人问我是否要统一所有浏览器的效果时,我告诉他这个网站地址Do websites need to look exactly the same in every browser?而且我知道,很快他也会给出和我相同的答案.

更好的使用标记,避免滥用Div

我们仍就可以看到很大一部分网站过多的使用spam和div标记.经常可以看到像这样,在用于菜单的ul套一个div.


    
          Home
          Products
          Services
          About Us

其实这个菜单完全可以避免这个父DIV,像这样;

 
          Home
          Products
          Services
          About Us

这样我们不仅简化我们的HTML代码, 同时我们也简化了CSS.因为这样我就可以直接找到目标来写样式,而不用再通过父标签.

避免内嵌样式

所有人都知道内嵌样式是一个不好的习惯,最好不要去使用.内嵌样式降低了代码的可重用性和可移植性,此外还加大了代码维护的难度.

避免Hacking你的代码

每个浏览器的每个版本都有bug,而且都用不同的方法定向样式表.一个最主要的例子是Internet Explorer,它是在开发者想要跨浏览器设计时最痛苦的一部分.当我说关于避免Hacking你的代码时,指的是增加In-CSS hack来代替条件注释.我宁愿保持代码的可读性和整洁,用一个额外的样式文件来为那个特定版本的Internet Explorer.所以如果另一个设计人员要修改这个代码,他就不需要头痛,不知道In-CSS代码是什么了.

Reset你的CSS

用一个Reset文件,可以不必烦恼浏览器的差异.此外,还可以创建一个基本的框架,来保证我们的样式在所用的浏览器都正常的工作.你可以在你的项目中用Eric Meyer’s CSS Reset或者YUI 3: CSS Reset.

选择一个框架

不久以前,我一直认为CSS框架并没有多大的用途,并且如果你了解CSS并准备好去做,就不需要其他的东西.但是当我看到YUI 和 960,我改变了我的想法.用这些框架,我可以更轻松的创建想要的布局.同时这些代码可以提高重用性,和保持一个良好的代码风格.

还有一些其他的框架Blueprint, Elastic, 和 YAML.

注释你的代码

注释是保持你代码的重用和维护的最好方法.如果你没有有条理的注释你的代码,你将会耗费很长时间来理解你几个星期前所写的代码.注释也可以帮助其他人来了解你的代码.

简写你的代码

这种是被建议使用的方法.我们将会减少写代码的时间,同时更优化你的CSS,因为它也减少了样式表文件的尺寸.例如:

.example {
	width:200px;
	height:100px;
	background-color:#CCCC66;
	border-top-color:#333333;
	border-top-style:solid;
	border-top-width:1px;
	border-bottom-color:#333333;
	border-bottom-style:solid;
	border-bottom-width:1px;
	border-right-color:#333333;
	border-right-style:solid;
	border-right-width:1px;
	border-left-color:#333333;
	border-left-style:solid;
	border-left-width:1px;
}

这个例子会被写能这样

.example {
	width:200px;
	height:100px;
	background:#CCCC66;
	border:1px solid #333333;
}

明显的这大大降低了你的网页读取时的负荷,它更小更简练.

保持你的风格

每个人都有自己的编程风格,在CSS中也不例外.有些人喜欢在每一行都加一个声明,有些人喜欢把声明都放在一行上.有些则喜欢按字母来排序.我建议选择一种风格,或者是一个混合,并保持下去.此外要选择一个适合你的,让你用起来更舒服.要记住,让它为你工作而不浪费你的时间.

寻找重复的代码

在你完成了你的项目时,你最好去找一找是否有相同的代码或部分,并把它们转换到一个类里.举个例子,在项目中,用相同的背景和颜色的不同部分,最好的方法是把他们放到一个类里并重用他们,这将避免你的重复的代码,面可以更好的维护他们.

使用Sprites

当服务器被请求调入每个图片时,如果我们用Sprites(图片整合技术),将极大的减少服务器的压力.从而加快页面加载速度。

面向对象的CSS

这是由Nicole Sullivan提出的关于OO CSS的一种的方法,其重点是代码的可重用性,和构建更小的CSS组件.是个很值得关注的话题.

多向大师学习

网上有很多的教程,我们可以直接去他们的主页去理解他们的CSS.这里建议一些不错的选择.Chris Coyier, Eric Meyer, Stu Nicholls, Nicole Sullivan, Andy Budd, Alen Grakalic, 和 a bunch of sites

验证你的CSS

为了确保你的CSS可以在所有的浏览器上正常的工作,这是一个很好的办法.当我们验证我们的代码时,可以找到一些在开发阶段的错误.

压缩你的CSS

在你准备正式使用的时候,你可以去压缩你的CSS.删掉空格和注释,这将有助于减少40%样式文件的大小.最大程度的提高用户的体验,减少服务器的负荷.

Feed enhanced by Better Feed from Ozh

提高编写CSS代码效率的10个习惯

seasun — Sun, 31 Oct 2010 13:46:30 +0000

1、保持一贯性。
就像其它的任何事一样，值得一直保持一贯性。保持连贯性，而不是想到什么就给id和class命名什么。

CSS的级联样式有利于加深你的记忆，而且充分利用样式的继承去设置样式表。

首先声明通用的部分的样式，然后继续声明不通用的。这样当你需要的时候更容易的去覆盖一个特定的样式。因为样式更易于阅读和更具逻辑性，你会发现编写CSS更迅速。

使用一种最是适合你的方式。
复位和覆盖
链接和类型
主要布局
二次布局结构
表单元素
杂项

2、注释标题，日期和签名

当样式被重写的时候遇到问题，可以很方便的找到是原始样式的编写者。当设计模板或者主题的时候这也是一个很好的习惯。

稍等…什么是swatch colors（色板颜色）？根据多年的经验，我发现在样式表中添加通用颜色的列表注释，在开始编写代码和以后的维护代码都是好非常有帮助的。

节省了你打开photoshop来取色的或者打开网站的风格指南文档的步骤。当你需要指定的蓝色，滚动到顶端的注释找到相关颜色代码复制即可。

3、整理出一套模板库

一旦你决定使用一种结构，删除不是多余的部分留下主框架并且保存一个通用样式模板以备以后使用。

同时你可以保存多种版本的模板已适应不同结构的网站。

如：2列布局、博客布局、等等…。Coda(苹果系统下的编辑器)http://www.panic.com/coda/ 有很强的编辑功能，让你的编写代码更加容易。其它的编辑器也有类试的功能，只要使用相同的批处理文件，就会工作很nicely。

如果每次都从头，尤其每次以相同的习惯和方法写一遍样式，会让人很抓狂。

4、使用有用的命名规则

尤其在我声明一个列的id同时将它们命名为col-alpha和col-beta的地方注意一下。为什么不叫col-left和col- right?

时常需要想想将来的编辑。

明年你可以需要重新设计你的网站并移动左右边栏。你不应该因为仅仅改变了位置而去重名你的html元素并重命名你的样式id。

当然，你只需要重新定义元素的左右列的位置并保持这id仍然为#col-left,但是就会产生让人困惑的问题？如果是叫left,不要指望它一直是实现居左的。这样在移动元素以后，不会给你太多的空间的命名方式。

CSS的优点之一就是让内容现实不同风格能力。你重构网站的时候，完全可以只是修改CSS而不去修改HTML。

因此，不要让因为CSS的名字而局限。通过使用更通用的命名约定并保持一致性。

给位置或者样式以固定的命名方式。如命名一个叫.link-blue的class将会让你麻烦不断，当客户要求你讲链接的蓝色改成橘色的时候将会让你的样式变的很凌乱不堪。

因此命名的规则建立在他们是什么，而不是他们看起来像什么。例如，

通用方面：.comment-deta > .comment-blue
约束方面：.post-title > .post-largefont
.comment-deta更通用，.post-title约束更少。

5、使用连字符而不使用下划线

有些比较老的浏览器对取得带下划线的CSS会出现问题，或就是不支持下划线。

因此为了让代码拥有更好的向后兼容性，培养使用连字符成为一个习惯。使用#col-alpha 而别使用 #col_alpha。

6、避免重复定义

重复的属性尽可能避免重复定义，而需要分组定义元素的属性。如果您的h1和h2元素都是使用相同的字体大小、颜色、和边框等，他们完全和可以合并成组定义。

同时尽可能使用样式的简写方式。时常对一些相同定义的元素进行合并和定义使用简写。

详细写法：

简单写法：

你了解CSS解释中的顺时针上、下、左、右简写方式，这是相当重要。
另外，如果你的顶部和底部，或者左边和右边的属性是相同的，你只需要两个命名。
例子中意思是距离顶部和底部都是1em，距离左右都是0em。

7、优化使样式轻量化。

使用好上边的提示，你才会真正的减少你的样式表的大小。越小越容易加载，越小越容易维护及更新。
尽可能采用分组，删除不需要的样式。

另一种CSS常用简写：当值为零的时候，你可以不指定度量单位。如果边距设置为0，你不用定义成0px或者0em。无论测量单位是什么0都是0，同时CSS是可以识别的。

8、代码基于火狐编写，然后针对webkit内核浏览器和IE浏览器进行调整

首先解决CSS在火狐浏览器下的一些让人头疼的问题。如果CSS在火狐下都有问题，其它浏览器下更可能出现问题。

9、进行验证

请使用W3C的CSS验证器进行验证。如果你坚持认为你的布局没有什么可以修改的时候，你可以使用CSS验证器对找出错误会有很大帮助。

10、保持页面的整洁性

支持单独的浏览器使用单独的CSS独立的样式表，同时javascript需要的样式、服务器端需要的样式、评论的样式。这样就可以避免一些不必要的ie的hack。只有这样才会保证样式的整洁性和可管理性。

Feed enhanced by Better Feed from Ozh

14个可以节省你时间的CSS工具

seasun — Thu, 21 Oct 2010 15:21:10 +0000

作为一个网站设计/开发人员，你必须不断寻找方法来减少设计/开发过程中所花费的时间。这对于提高你的工作效率并最大化你的利润是非常重要的。下面介绍的按功能分类的css工具可以有效地节省你设计网站的时间。

优化/格式化类

CSSTidy – css Tidy是一个开源的css分析和优化工具；
CleanCSS - CleanCSS是一个基于CSS Tidy的强大的CSS优化和格式化工具。
CSS Optimizer - CSS Optimizer可以通过优化压缩CSS样式文件大小。
CSS Analyzer – CSS Analyzer可以帮助你检查你的CSS样式是否符合W3C的认证。

字体类

Em Calculator – EM Calculator可以帮助你计算px与em之间的转换。
CSS Font and Text Style Wizard – 这个小工具可以很方便地将你的CSS样式呈现出来。

表格类

CSS Form Code Maker – 很方便地生成“五颜六色的BOX布局”的表格。
JotForm – JotForm是一个“所见即所得”的表格生成器。

导航/按钮类

CSS Buttons – CSS按钮和文本在线生成工具。
CSS Menu Generator – CSS Menu Generator可以同时生成基于CSS和html代码的漂亮的按钮。

生成器

CSS Creator – Css Creator是一个可以创建自适应宽度或者是固定宽度的浮动布局生成器，可以生成带有Header和Footer的三栏布局。
QrONE CSS Designer – QrONE是一个CSS在线生成与编辑器。
Web 2.0 Generator – Web 2.0 Generator可以利用html和CSS生成一个完整的网站布局。
CSS Mate – CSS Mate是一个在线CSS编辑器。

除了上面译文中的14个小工具外，还有如下几款小工具，它们也是非常棒的，你可以打开下面的文章看它们的详细介绍：

CSS Menu Maker - 在线生成丰富多样的CSS导航按钮。
CSS Type Set – 在线轻松调试CSS文本样式。
CSS Frame Generator – 写好DIV架构之后，使用这个在线工具可以很快生成CSS样式结构表。

Feed enhanced by Better Feed from Ozh

12 个便于web设计及开发的在线工具

seasun — Tue, 12 Oct 2010 18:33:57 +0000

请不要低估这些小工具，他们极其的方便并且能节省很多的时间和工作，下面就是这些在线工具的列表，挑几款来试试吧。

我还是比较喜欢Ajax Load和Web 20 Badges Generator的，你们呢？

Favico

一个图标制作工具，很是方便。

SpiffyBox

一个纯css圆角解决方案，不需要任何js和图片。这个在线工具可以选择前景色背景色，宽和高等。css3正在被越来越多的浏览器所支持，所以你可以坚持使用这种解决方法。

Ajax Load

该网站提供近50种 loading、进度条可选样式，可自定义背景色、前景色和透明背景，操作简单，在页面下方就可预览效果，最终可生成.gif格式的图标。本博客在加载过程中的loading图标就是在该网站上直接生成的。做网站前端设计和朋友可以大胆地尝试一下这项服务。

Web 20 Badges Generator

看到一些博客上敲着一个web2.0的徽章是不是很羡慕？Web 2.0 Badges 可惜很方便的为你实现这个梦想。虽然Web 2.0 Badges提供的款式不一定是最多的，但我觉得他出生正统，要挂就挂个正宗的徽章！

Buttonator

如果你正在寻找一个按钮（不是浏览器默认那种），并且如果你不是非常挑剔的话，这里有很多的按钮共您选择，你可以使用这个工具在线制作一个按钮，当然，其中还是有很多漂亮的样式。

Load Info

又是一个Ajax loading 图标在线生成工具，这里有各种各样的样式供您选择。

Stripe Generator

一个 web2.0条纹制作工具，只需简单的个性化设置，就能作出花样百出的背景条纹。

Bg Patterns

一个背景图案在线制作工具，用法很简单，效果也很不错。

Adobe Kuler

一个在线创建配色方案的东西，是Adobe推出的一个设计师的配色参考站点，如今推出了Air桌面版。每天会更新最新的配色方案，可以搜索最受好评的~最新的~最流行的等等配色。右键点击颜色可以选择复制主题颜色值和单个的颜色值，左键可以把颜色框拖出界面。很漂亮又实用的东东。

CSS Typeset

CSSTypeSet是一款非常适合对css不熟悉的朋友的在线工具，使用这个工具可以轻松地写出具备字体、文本颜色大小位置、字符间距、单词间距等属性的css样式。

Blind Text Generator

多功能的在线文本编辑工具，帮助设计者进行排版和打印。

Reflection Maker

这里不需要你有任何的图片处理知识，就可以轻松的制作出倒影效果，支持上传上限为200KB的图片和直接加载网络图片，可以对倒影背景和倒影大小进行配置。对于要求不太高的图片制作来说，这个在线工具足以应付大部分情况。

Feed enhanced by Better Feed from Ozh

20个学习CSS的绝佳网站-让你从入门到精通

seasun — Sat, 02 Oct 2010 06:55:55 +0000

CSS（层叠样式表）是一种简单的设计语言，能够将页面变漂亮这回事儿变的简单化。在HTML和XHTML中设定页面的样式，这是最常用的应用。但也可以应用于 XML类的文档，包括SVG和XUL。他负责管理网页的设计和外观。使用CSS，你可以控制文字的颜色、字体、段落间距、分栏的数目大小布局、背景图片颜色，以及其他很多种的效果。接下来才是要说的是学习并掌握CSS的20个绝佳站点。这里收集到的CSS站点能使你从初学者到高级人员。这些能协助你开发和改进网站。恩，随便看看吧。
Csstutorial

这个站点全部是关于CSS的。万一你不熟悉CSS：CSS是HTML的一种姐妹技术，可以设计你的页面。这些细节都在教程里面，不过现在我就可以说Css 可以让你页面看起来更好！
Visit Site
cssbasics

这个网站中，你可以从每段内容里学到单独的样式，覆盖了Css所有的基础知识。
Visit Site
w3schools

在这个站点里，你会学到如何使用Css来控制多种页面的样式和布局。
Visit Site
htmlgoodies

用网站里面的这些超多的效果来设置你的页面效果吧。
Visit Site
cssdog

Css很容易理解和学习，还为HTML的外观提供强大的控制力。多数情况下，Css和HTML和XHTML捆绑在一起使用。
Visit Site
htmldog

这个手册的目的是看到本质—已经足够开始了。The CSS Intermediate Tutorial and CSS Advanced Tutoria这两个教程有很多关于CSS的深度信息。
Visit Site
lesliefranke

这个网站里面有很多 CSS cheats可以帮助你写Css。
Visit Site
richinstyle

学习Css、样式等信息，以及如何应用他，都可以在这里找到。
Visit Site
csseasy

不用在整本书书里找到复杂的步骤，在这个网站里面可以学到很多现代的CSS的方式
Visit Site
blooberry

这个网站用字母序提供了Css所有的属性可供检索。
Visit Site
css-tricks

这个网站学到更多CSS tricks ，可能会对你的网站有用哦。
Visit Site
www.css3.com

一个常用的CSS3的指南、教程、blog网站。
Visit Site
alistapart

这个网站教给你一些关于CSS的技术、技巧等更多关于CSS的知识。
Visit Site
456bereastreet

CSS用来定义网站的外观布局。Css是怎么工作的问题一直不太明了，这个网站里面很多文章解释了关于CSS的方方面面。
Visit Site
echoecho

CSS对HTML来说是一个很好的补充。
Visit Site
css-discuss.incutio

这个维基百科致力于Css应用的实际情况（理想状态和浏览器效果）
Visit Site
tizag

是时候让你的CSS页面设计技能提高一个层次了。有很多方法让你的HTML在一个有效的管理之下，观感得到更有效的控制。
Visit Site
barelyfitz

这个教程可以检查CSS中不同的布局属性： position:static, position:relative, position:absolute, and float.
Visit Site
meyerweb

这里收集了很多先进的Css驱动的设计Demo，是作者自己写的，仅作为一个展示跟你说明在某个浏览器内你可以用CSS来实现他。
Visit Site
cssdocs

通过这个页面搜索任何关于CSS的信息。
Visit Site

Feed enhanced by Better Feed from Ozh

10款令人难以相信的CSS3绘图效果

seasun — Wed, 29 Sep 2010 04:43:01 +0000

有越来越多的人使用CSS3作出了非常酷的实验，以下是一些例子，从下面的这些按钮上你可以看出CSS3的强大，它真得没有使用任何图片，完全用CSS样式实现，非常之神奇，别的就不多说了，看内容吧。

1. Sweet CSS3 Buttons

我非常喜欢这些可爱的按钮，它们看起来确实非常漂亮！

2. CSS Olympic Logo

不错的奥运五环，压盖效果不错。

3. CSS Logo

4. Color Wheel

5. CSS3 Ads

6. CSS Dragon

7. CSS Monster

相当可爱！

8. Reddit Alien

9. CSS3 Checkboxes

10. CSS 3D

简单但很有创意。

Feed enhanced by Better Feed from Ozh

15个CSS Reset写法

seasun — Wed, 29 Sep 2010 04:35:20 +0000

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS 定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

下面总结收集了15套CSS重设实例，您可以在前端开发工作中进行参考和使用，有些是很简化的CSS Reset，有些则是非常复杂非常全面的CSS Reset，至于使用哪套，全看您的爱好或需要。

一.最简化的CSS Reset(重设) :

* {
          padding: 0;
          margin: 0;
    }

这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

* {
           padding: 0;
           margin: 0;
           border: 0;
    }

这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

    * {
           outline: 0;
           padding: 0;
           margin: 0;
           border: 0;
    }

在前两个的基础上添加了outline属性的重设，防止一些冲突。

二.浓缩实用型CSS Reset(重设):

    * {
           vertical-align: baseline;
           font-weight: inherit;
           font-family: inherit;
           font-style: inherit;
           font-size: 100%;
           outline: 0;
           padding: 0;
           margin: 0;
           border: 0;
    }

该CSS重设方法出自Perishable Press，这是他常用的方法。

三.Poor Man 的CSS Reset:

html, body {
           padding: 0;
           margin: 0;
    }
    html {
           font-size:1em;
    }
    body {
           font-size:100%;
    }
    a img, :link img, :visited img {
           border:0px;
    }

这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

* {
        vertical-align: baseline;
        font-family: inherit;
        font-style: inherit;
        font-size: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }
    body {
        padding: 5px;
    }
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
        margin: 20px 0;
    }
    li, dd, blockquote {
        margin-left: 40px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

五.Shaun Inman’s Global Reset

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {
        padding: 0;
        margin: 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
        fieldset, img, abbr {
        border: 0;
    }
    address, caption, cite, code, dfn, em,
    h1, h2, h3, h4, h5, h6, strong, th, var {
        font-weight: normal;
        font-style: normal;
    }
    ul {
        list-style: none;
    }
    caption, th {
        text-align: left;
    }
    h1, h2, h3, h4, h5, h6 {
        font-size: 1.0em;
    }
    q:before, q:after {
        content: ”;
    }
    a, ins {
        text-decoration: none;
    }

六.Yahoo(YUI) CSS Reset:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
    form,fieldset,input,textarea,p,blockquote,th,td {
        padding: 0;
        margin: 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    fieldset,img {
        border: 0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
        font-weight: normal;
        font-style: normal;
    }
    ol,ul {
        list-style: none;
    }
    caption,th {
        text-align: left;
    }
    h1,h2,h3,h4,h5,h6 {
        font-weight: normal;
        font-size: 100%;
    }
    q:before,q:after {
        content:”;
    }
    abbr,acronym {
        border: 0;
    }

七.Eric Meyer’s CSS Reset

html, body, div, span, applet, object, iframe, table, caption,
    tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
    kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
    acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend {
        vertical-align: baseline;
        font-family: inherit;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        outline: 0;
        padding: 0;
        margin: 0;
        border: 0;
    }
    :focus {
        outline: 0;
    }
    body {
        background: white;
        line-height: 1;
        color: black;
    }
    ol, ul {
        list-style: none;
    }
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    caption, th, td {
        font-weight: normal;
        text-align: left;
    }
    blockquote:before, blockquote:after, q:before, q:after {
        content: “”;
    }
    blockquote, q {
        quotes: “” “”;
    }

八.Condensed Meyer Reset:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
    pre, form, fieldset, input, textarea, p, blockquote, th, td {
        padding: 0;
        margin: 0;
    }
        fieldset, img {
        border: 0;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    ol, ul {
        list-style: none;
    }
    address, caption, cite, code, dfn, em, strong, th, var {
        font-weight: normal;
        font-style: normal;
    }
    caption, th {
        text-align: left;
    }
    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        font-size: 100%;
    }
    q:before, q:after {
        content: ”;
    }
    abbr, acronym {
        border: 0;
    }

九.Ateneu Popular CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
    h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
    address, big, cite, code, del, dfn, em, font, img, ins,
    kbd, q, s, samp, small, strike, strong, sub, sup, tt,
    var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }
    :focus {
        outline: 0;
    }
    a, a:link, a:visited, a:hover, a:active{
        text-decoration:none
    }
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    th, td {
        text-align: left;
        font-weight: normal;
    }
    img, iframe {
        border: none;
        text-decoration:none;
    }
    ol, ul {
        list-style: none;
    }
    input, textarea, select, button {
        font-size: 100%;
        font-family: inherit;
    }
    select {
        margin: inherit;
    }
    hr {
        margin: 0;
        padding: 0;
        border: 0;
        color: #000;
        background-color: #000;
        height: 1px
    }

十.Chris Poteet’s Reset CSS

* {
        vertical-align: baseline;
        font-family: inherit;
        font-style: inherit;
        font-size: 100%;
        border: none;
        padding: 0;
        margin: 0;
    }
    body {
        padding: 5px;
    }
    h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
        margin: 20px 0;
    }
    li, dd, blockquote {
        margin-left: 40px;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

十一.Tantek Celik Reset CSS

:link,:visited { text-decoration:none }
    ul,ol { list-style:none }
    h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
    ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
    { margin:0; padding:0 }
    a img,:link img,:visited img { border:none }
    address { font-style:normal }

十二.Christian Montoya Reset CSS

html, body, form, fieldset {
        margin: 0;
        padding: 0;
        font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
    }
    h1, h2, h3, h4, h5, h6, p, pre,
    blockquote, ul, ol, dl, address {
        margin: 1em 0;
        padding: 0;
    }
    li, dd, blockquote {
        margin-left: 1em;
    }
    form label {
        cursor: pointer;
    }
    fieldset {
        border: none;
    }
    input, select, textarea {
        font-size: 100%;
        font-family: inherit;
    }

十三.Rudeworks Reset CSS

* {
        margin: 0;
        padding: 0;
        border: none;
    }
    html {
        font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
        text-shadow: #000 0px 0px 0px;
    }
    ul {
        list-style: none;
        list-style-type: none;
    }
    h1, h2, h3, h4, h5, h6, p, pre,
    blockquote, ul, ol, dl, address {
        font-weight: normal;
        margin: 0 0 1em 0;
    }
    cite, em, dfn {
        font-style: italic;
    }
    sup {
        position: relative;
        bottom: 0.3em;
        vertical-align: baseline;
    }
    sub {
        position: relative;
        bottom: -0.2em;
        vertical-align: baseline;
    }
    li, dd, blockquote {
        margin-left: 1em;
    }
    code, kbd, samp, pre, tt, var, input[type='text'], textarea {
        font-size: 100%;
        font-family: monaco, “Lucida Console”, courier, mono-space;
    }
    del {
        text-decoration: line-through;
    }
    ins, dfn {
        border-bottom: 1px solid #ccc;
    }
    small, sup, sub {
        font-size: 85%;
    }
    abbr, acronym {
        text-transform: uppercase;
        font-size: 85%;
        letter-spacing: .1em;
        border-bottom-style: dotted;
        border-bottom-width: 1px;
    }
    a abbr, a acronym {
        border: none;
    }
    sup {
        vertical-align: super;
    }
    sub {
        vertical-align: sub;
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.8em;
    }
    h3 {
        font-size: 1.6em;
    }
    h4 {
        font-size: 1.4em;
    }
    h5 {
        font-size: 1.2em;
    }
    h6 {
        font-size: 1em;
    }
    a, a:link, a:visited, a:hover, a:active {
        outline: 0;
        text-decoration: none;
    }
    a img {
        border: none;
        text-decoration: none;
    }
    img {
        border: none;
        text-decoration: none;
    }
    label, button {
        cursor: pointer;
    }
    input:focus, select:focus, textarea:focus {
        background-color: #FFF;
    }
    fieldset {
        border: none;
    }
    .clear {
        clear: both;
    }
    .float-left {
        float: left;
    }
    .float-right {
        float: right;
    }
    body {
        text-align: center;
    }
    #wrapper {
        margin: 0 auto;
        text-align: left;
    }

十四. Anieto2K Reset CSS

html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p,
    blockquote, pre, a, abbr, acronym, address, big,
    cite, code, del, dfn, em, font, img,
    ins, kbd, q, s, samp, small, strike,
    strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    center, u, b, i {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: normal;
        font-style: normal;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline
    }
    body {
        line-height: 1
    }
    :focus {
        outline: 0
    }
    ol, ul {
        list-style: none
    }
    table {
        border-collapse: collapse;
        border-spacing: 0
    }
    blockquote:before, blockquote:after, q:before, q:after {
        content: “”
    }
    blockquote, q {
        quotes: “” “”
    }
    input, textarea {
        margin: 0;
        padding: 0
    }
    hr {
        margin: 0;
        padding: 0;
        border: 0;
        color: #000;
        background-color: #000;
        height: 1px
    }

十五.CSSLab CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
    h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
    big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend, table, caption, tbody, tfoot,
    thead, tr, th, td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-weight: inherit;
        font-style: inherit;
        font-size: 100%;
        font-family: inherit;
        vertical-align: baseline;
    }
    :focus {
        outline: 0;
    }
    table {
        border-collapse: separate;
        border-spacing: 0;
    }
    caption, th, td {
        text-align: left;
        font-weight: normal;
    }
    a img, iframe {
        border: none;
    }
    ol, ul {
        list-style: none;
    }
    input, textarea, select, button {
        font-size: 100%;
        font-family: inherit;
    }
    select {
        margin: inherit;
    }
    /* Fixes incorrect placement of numbers in ol’s in IE6/7 */
    ol { margin-left:2em; }
    /* == clearfix == */
    .clearfix:after {
        content: “.”;
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {display: inline-block;}
    * html .clearfix {height: 1%;}
    .clearfix {display: block;}

好了，CSS重设目前先总结到这里，这15套重设方法其实都是有共同点的，也许有的实现方法不同，但大部分都是同一个目的，就是为了让更多的浏览器能显示同样的效果。有了这些CSS重设作为资料和参考，也许会对你的工作有所帮助甚至提高效率，但是，毕竟这些重设都是别人写的，你完全也可以为自己量身定制一套CSS重设。

Feed enhanced by Better Feed from Ozh

11个由很酷的CSS3 制作的图片画廊

seasun — Sun, 12 Sep 2010 14:29:55 +0000

今天要和大家一起分享的是用CSS3来制作的图片画廊，效果很好，可以用在项目中，不过不同的浏览器对这些示例的支持是不一样的，见意用高版本的啊。

Polaroid from Tutorialzine

Polaroid from 3site

Polaroid from Zurb

Polaroid from 23 Ways

Polaroid from h3ne25

Gallery

Snowstack

Image Gallery

Sexy Image Hover Effects

Fancy Image Gallery

Beautiful Photo Stack Gallery

Feed enhanced by Better Feed from Ozh

CSS实现图片按固定大小等比例缩放

seasun — Sun, 12 Sep 2010 13:58:41 +0000

例如：设置图片最大高度和宽度分别为120px，75px，即当图片宽大于120或者高大于75时则等比例缩放。

.imglist_3 img{margin-right:10px;max-width:120px;max-height:75px;font:bold 12px/28px normal;}
* html .imglist_3 img{width: expression(this.width > 120 && this.width > this.height ? “120px” :auto); height:expression(this.height >75 ? “75px”:auto);}/* for IE6 */

Feed enhanced by Better Feed from Ozh

实用HTML，CSS和JavaScript速查表

seasun — Sat, 11 Sep 2010 16:12:07 +0000

速查表是帮你记住东西的有效工具。Web设计师和开发者经常使用的快捷键简表会使他们在网上的工作效率大大提高。

事实上，速查表就是来帮助我们把日常中最常用到的信息聚集起来，方便使用，使我们做工作时更有效率。有了它们，免去了你的大脑花额外时间去记忆它们的烦恼——你只需要打开简表，马上能查到你想要的信息。

这篇文章里，你可以看到最实用的HTML，CSS，JavaScript速查表，它们可以当作参考资料，备忘录，能帮助你以最快的速度找到想要的信息。

看看这些简表是不是你想要的，请在文章下面留下你的建议，谢谢！

HTML

HTML帮助手册

HTML速查手册

HTML 特殊字符速查表

Dreamweaver

Dreamweaver 快速参考指导

CSS

CSS 3 速查表

Blueprint CSS

YUI Grid CSS

CSS 速记简表

CSS速查表 (V2)

CSS速记表

CSS2参考指导(V2)

实用CSS速查表

Javascript

jQuery 1.4.2 直观速查表

JavaScript 速查表

JavaScript 参考单

JavaScript 真经

常用 DOM方法

JavaScript 快速参考单

Mootools 1.2速查表

jQuery速查表

Prototype速查表

希望你能喜欢我收集到的这些速查表，并请分享给你的做开发工作的朋友们。

Feed enhanced by Better Feed from Ozh

高效整洁CSS代码原则

seasun — Tue, 31 Aug 2010 14:14:27 +0000

CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：

1. 使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局 Reset：

*{ margin:0; padding:0; }

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。我跟Eric Meyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。我使用的 Reset如下:

/** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table elements 表格元素 */ img/* img elements 图片元素 */{ border:medium none; margin: 0; padding: 0; } /** 设置默认字体 **/ body,button, input, select, textarea { font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } em{font-style:normal;} /** 重置列表元素 **/ ul, ol { list-style: none; } /** 重置超链接元素 **/ a { text-decoration: none; color:#333;} a:hover { text-decoration: underline; color:#F40; } /** 重置图片元素 **/ img{ border:0px;} /** 重置表格元素 **/ table { border-collapse: collapse; border-spacing: 0; }

2. 良好的命名习惯

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。就像这样的代码：

.aaabb{margin:2px;color:red;}

我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：

My name is Wiky

问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：

.red{color:bule;}

这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{…}，.sidebar{…}，.postwrap{…}

这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如

.alignleft{float:left;margin-right:20px;} .alignright{float:right;text-align:right;margin-left:20px;} .clear{clear:both;text-indent:-9999px;}

那么对于这样一个段落

我是一个段落！

如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为alignright就可以了。

3. 代码缩写

CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括 margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：

li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em; line-height: 1.4em; padding-top:5px; padding-bottom:10px; padding-left:5px; }

就可以缩写为：

li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px 5px; }

如果您想更了解这些属性要怎么缩写，可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf 。

4. 利用CSS继承

如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：

#container li{ font-family:Georgia, serif; } #container p{ font-family:Georgia, serif; } #container h1{font-family:Georgia, serif; }

就可以简写成：

#container{ font-family:Georgia, serif; }

5. 使用多重选择器

你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

可以合并为

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 适当的代码注释

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录:

/*------------------------------------ 1. Reset 2. Header 3. Content 4. SideBar 5. Footer ----------------------------------- */

如此你代码的结构就一目了然，你可以容易的查找和修改代码。

而对于代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利于团队开发:

/*** Header ***/ #header{ height:145px; position:relative; } #header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/ #content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;} #content h1{color:#F00}/* 设置字体颜色 */ #content .posts{ overflow:hidden; } #content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/ #footer{ clear:both; padding:50px 5px 0; overflow:hidden;} #footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

7. 给你的CSS代码排序

如果代码中的属性都能按照字母排序，那查找修改的时候就能更加快速:

/*** 样式属性按字母排序 ***/ div{ background-color:#3399cc; color:#666; font:1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

8. 保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

/*** 每个样式属性写一行 ***/ div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }
/*** 所有的样式属性写在同一行 ***/ div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于一些样式属性较少的选择器，我会写到一行：

/*** 选择器属性少的写在同一行 ***/ div{ background-color:#3399cc; color:#666;}

对于这个规则并非硬性规定，但无论您采用哪种写法，我的建议是始终保持代码一致。属性多的分行写，属性少于3个可以写一行。

9. 选择更优的样式属性值

CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如

区别在于border:0把border设为0px，虽然在页面上看不见，但按border默认值理解，浏览器依然对border- width/border-color进行了渲染，即已经占用了内存值。
而border:none把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。所以建议使用border:none;

同样的，display:none隐藏对象浏览器不作渲染，不占用内存。而visibility:hidden则会。

10. 使用代替@import

首先，@import不属于XHTML标签，也不是Web标准的一部分，它对于较早期的浏览器兼容也不高，并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import

11. 使用外部样式表

这个原则始终是一个很好的设计实践。不单可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随 HTML文档重新下载。所以，在实际应用中，没有必要把CSS代码内置在HTML文档中：

或

而是使用导入外部样式表：

12. 避免使用CSS表达式（Expression）

CSS表达式是动态设置CSS属性的强大（但危险）方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中，使用CSS表达式可以实现隔一个小时切换一次背景颜色：

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示，expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS 表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

如果必须使用CSS表达式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以，在非不得已，请避免使用CSS表达式。

13. 代码压缩

当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor

利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

14. 总结

在本文中，我力图更详尽的总结书写更高效的CSS代码的原则，但鉴于本人见识和精力有限，我还是希望这些原则能帮助您更好的书写和管理您的CSS代码，不知您又是如何书写CSS的，是否也有一些想要分享的技巧？给我留言吧谢谢~

参考资料：

WRITE BETTER CSS WITH BEST PRACTICES

10 Tips for Writing Better CSS

5 Ways to Instantly Write Better CSS

Feed enhanced by Better Feed from Ozh

CSS透明大汇总

seasun — Tue, 31 Aug 2010 13:15:09 +0000

近年来，CSS不透明算得上是一种相当流行的技术，但在跨浏览器支持上，对于开发者来说，可以说是一件令人头疼的事情。目前还没有一个通用方法，以确保透明度设置可以在目前使用的所有浏览器上有效。

这篇汇总主要是提供一些CSS不透明的详细介绍，代码示例和解释，以实现这项有用的CSS技术在您的项目中兼容所有浏览器。

关于CSS 透明度，有一点需要注意的是，它虽然使用了很多年，但它一直以来都不是一个标准属性。它是一种非标准技术，应该是CSS3规范的一部分。

1. 旧的Opacity设置

以下代码是Firefox和Safari旧版本所需的透明度设置:

#myElement {-khtml-opacity: .5; -moz-opacity: 0.5;}

-khtml-opacity设置是针对旧版本的Webkit渲染引擎，这种专用属性现在已经过时了，除非你还有需要兼容Safari 1.x.的用户。

第二行使用专用属性 -moz-opacity是为了兼容Mozilla渲染引擎的早期版本，以及追溯到Netscape Navigator。Firefox 0.9以后就不要求使用-moz-opacity属性，Firefox 3.5（现在使用Gecko引擎）已经不在支持这个属性。

2. 在Firefox, Safari, Chrome和Opera下的CSS透明度

以下代码是除了IE外的所有当前浏览器的最简单，最最新的不透明度设置的CSS语法：

#myElement {opacity: .7;}

上述语法将设置一个元素为70％不透明（或30%透明）。设置opacity:1将使元素不透明，而设置opacity:0将使得元素完全不可见。你只要记住“opacity”等同于“不透明”就很容易记住了，opacity值越小就越接近透明。

opacity属性可以精确地小数点后两位，所以值取“.01”和“.02”实际上是不同的，虽然可见度很难被发觉。一般情况下，精确到一位就可以了，取值如“.3”或“.7”。

3. IE下的CSS透明度

IE下照旧有别于其他浏览器，并且目前也有三个不同版本的IE在广泛使用，透明度设置是不同的，有时需要额外的CSS来控制：

#myElement {filter: alpha(opacity=40);}

上面的CSS使用专用的filter属性来设置IE6-8透明度。对于IE6和IE7需要注意：为了使得透明设置生效，元素必须是“有布局”。一个元素可以通过使用一些CSS属性来使其被布局，有如width 和 position。关于微软专有的hasLayout属性详情，以及如何触发它，参考这里。

另外一个设置IE8的CSS透明度的方法语法如下（注意注释中指出的版本）：

#myElement{filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /*第二行仅在IE8下有效 */}

第一行代码针对当前所有IE版本，第二行仅针对IE8。

注意两行代码的不同之处：在第二行代码中，在filter属性前跟着-ms-前缀，并且属性值有加引号，这些都是语法所必须的。

说实在，有了如前一个例子中用alpha(opacity=40)的语法来作用于任何版本的IE下的任何有布局的元素之后，我也不确定是否还有必要用“progid”的方法。

4. 使用JavaScript设置和改变CSS透明度

您可以使用下面的语法访问JavaScript中的CSS opacity 属性：

document.getElementById("myElement").style.opacity = ".4";  // 针对所有现代浏览器
document.getElementById("myElement").style.filter = "alpha(opacity=40)";// 针对IE

上面的代码可以使用行内循环或者其他动态函数递增修改透明度的值。当然，你必须先通过特征检测来决定使用哪一行代码。

5. 使用JQuery设置和改变CSS透明度

直接使用jQuery设置CSS透明度更直观更容易实现，因为在所有浏览器代码都一样，并且你不必担心在IE下元素是否“haslayout”：

$("#myElement").css({opacity:.4 }); // 所有浏览器有效

您也可以使用一下jQuery代码使一个元素动画透明：

$("#myElement").animate({opacity:.4}, 1000, function() { // 动画完成，所有浏览器下有效  });

不管元素的透明度在动画开始时是多少，它都会渐变到透明度为“.4”。动画的速度通过值“1000”设定，动画时间以毫秒为单位。代码中的最后一个属性是一个可选回调函数，将在动画完成后执行。

如果该元素的透明度在CSS中已经设定为“.4”，那在动画运行的时候，你将不会发觉有任何不同，所以动画开始和最终透明度要有所不同。

6. 通过 RGBA的透明度

另一个CSS3技术只支持部分新的浏览器（Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+），可通过RGBA的alpha通道的方式设定。语法如下：

#rgba { background: rgba(98, 135, 167, .4);}

在上面的定义中，通过RGB（前三个数字）给背景设定颜色，然后最后一个是alpha设置，以执行给定颜色的透明度。这个alpha设置跟 opacity 属性一样，可设定任何0到1的数字，精确得到两位小数点。数字值越大，就越接近完全不透明的颜色。

7. 通过 HSLA的透明度

类似之前的定义，CSS3还允许使用HSLA单独设置颜色和alpha值，HSLA表示Hue（色调）, Saturation（饱和度）, Lightness（亮度）, 和Alpha。以下是HSLA透明的例子：

#hsla {background: hsla(207, 38%, 47%, .4);}

更多关于HSLA颜色的解释，参考这篇来自W3.org的文章。如同RGBA透明度，最后的数字表示透明度设置，跟RGBA起同样的作用。注意 RGBA和HSLA透明度的一个重要的好处是这些透明度设置不会影响到子元素的，但通过opacity属性的方式则会。alpha设置的RGBA和 HSLA只影响背景颜色的透明度，仅此而已。

我希望我能涉及主要的跨浏览器的CSS透明度代码。如果内容有错漏，欢迎随时评论指出，我将乐意作更正或补充。谢谢~

Feed enhanced by Better Feed from Ozh

令人难以置信的纯 CSS3 图标

seasun — Tue, 24 Aug 2010 14:24:11 +0000

尽管被批评为走火入魔，CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计，如果你看到本文介绍的这些精美图标，你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标，那么微妙的色彩与纹理，真的难以置信。

奥林匹克标志

作者: Doug Neiner
基于纯 CSS，以 em 为单位，可动态调整尺寸，需要浏览器支持 border-radius 属性，目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。

jQuery 标志

作者: Doug Neiner
这是大家最钟爱的 JavaScript 框架 jQuery 的标志，使用 CSS3 的 border-radius 属性。

jQuery UI 标志

作者: Doug Neiner
这是 jQuery UI 库的标志，同样，基于 CSS3 的 border-radius 属性。

CCS 标志一宗

作者: Justin Sepulveda
全部基于纯 CSS3 的 border-radius, gradient, transform 属性。

Opera 标志

作者: David DeSandro
做得非常漂亮，大量使用了 border-radius, gradient 属性，不过在不同浏览器显示不太一致，尤其在 IE 中。

iOS icons

作者: Louis Harboe
非常伟大的作品，使用了 CSS3 的高级功能。

简单 css 图标

作者: Zander Martineau
这份作品可以教你如何使用 CSS 实现三角形，如何实现诸如 RSS 图标，心形图，三角形一类的简单图形。

基于纯 CSS 的超级玛丽 3D 动画图标

作者: Andreas Jacob
基于 CSS3 和 CSS 4D 框架，动画部分很精彩，但目前只支持 Safari 5。

纯 CSS 图标一宗

作者: Andrew Kelly
使用了 CSS3 的渐变，阴影，圆角等属性，效果很出众。

CSS3 实现的 Photoshop 标志

作者: Radu Chelariu
完全基于 CSS3，没借助任何图形。

10 个令人赞叹的 CSS 社会媒体网络标志

作者: Nicolas Gallagher
全部基于简单的，语义化 HTML 标签，没有任何空的，多余的对象，没有 JavaScript，没有图片。

一套 CSS 图标

作者: Lucian Marin
一套基于 CSS 的图标，非常精致。

基于纯 CSS3 的 Twitter 图标

作者: Giacomo Bartoli
很显示，使用了 @font-face 和少量阴影及圆角。

加拿大 Go Transit 公司标志

作者: Collin Henderson
基于 CSS3 的 border-radius 属性

IE 标志

作者: Andreas Jacob
在 Firefox 3.6+ 以及 Safari 5 上显示最佳。使用了圆角，渐变，阴影等属性。

任天堂游戏图标

作者: Drew
使用纯 CSS 实现的一些任天堂公司的游戏图标。

电影《回到未来》片名

作者: Lucas Garron
和原版惊人相似，在 Webkit 引擎的浏览器中显示最佳。

CSS 雨滴

作者: Sean Martell
右边是原始图片，左边是 CSS 生成的效果

Bahamas CSS 标志

作者: ForestMist
巴哈马群岛标志，右边是原始图，左边是 CSS 效果。

Reddit 网站的外星人标志

作者: Matthew James Taylor
使用 “O O _ ( ) ( ) O O O O / – o O O O O O O O O • • ( ) ( )” 几个字母以及文字效果。

纯 CSS 社会媒体网络标志

作者: insicdesigns
又一套 CSS3 社会网络媒体标志。

CSS3 实现的 iPhone 图片

作者: Jeff Batterton
简直疯了。

Twitter 图片

作者: Jeff Batterton
相当精彩的 CSS 图形效果。参见《纯 CSS3实现的 Twiiter 图画》

美剧《迷失》片名动画

作者: Marcos Esperon
在 Webkit 引擎的浏览器中显示最佳。

Feed enhanced by Better Feed from Ozh

关于 CSS 我们是不是已经走得太远？

seasun — Sat, 21 Aug 2010 13:20:25 +0000

CSS 是了不起的技术，我第一次用到的时候，觉得这是我做梦都想不到的东西，随着 CSS3 的引入，圆角，阴影，旋转等等技术更将 CSS 带到前所未有的高度。然而，关于 CSS，我们是不是已经走得太远，本文以一个 Web 设计师的角度对 CSS 的一些实验性应用做了另一种思考。

那些有关 CSS 的前卫实验

几个月前，作者在 Six Revisions 发表了一篇文章，介绍了 5 个有趣的 CSS 实验：

每个实验都是用了不同的方法，其中一些，如 CSS 线图，在现实中可以找到实际的应用，其它的，如 CSS 实现的 Twitter Fail Whale 图画，则纯属实验，这些实验的目的仅仅为了说明 CSS 能够实现的效果，并不意味着应当这样来做。

让我们实际一点

上图是用纯 CSS 实现的社会媒体网络标志，很神奇不是？

我最近读了 Faruk Ateş 的文章，Pure CSS Icons: Make The Madness Stop，文中对这一做法提出了质疑，作者表示，一些人开始尝试将 CSS 当作设计工具并迅速引发大量效仿，然而，这种做法有多少易用性可言？它并不容易集成到你的设计与开发当中，也不容易调整。

就像上面的完全基于 CSS 的社会网络标志，无非是一堆各式各样的线条的组合，固然令人印象深刻，也算有创意，但并不实用，因为创作这样一个标志可能需要几个小时的艰辛劳动，在 Photoshop 中画一个同样的图根本不费任何力气，而且效果更好（更细腻）。

Ateş 认为，这种方式生成的图标的可维护性也很成问题，调整一个图标原本只需要调整像素，现在却需要修改 CSS 定义，同时，上述 CSS 标志的设计者 Nicolas Gallagher 也表示，做这类事情，CSS 并非最适合。

降低 HTTP 请求？

上面这幅图中的图标全部用 CSS 生成，而且作者将它们拿出来卖，40个图标卖25美金。不得不承认，这些图标设计得非常漂亮，作者设计这些 CSS 的初衷是为那些使用的网站降低 HTTP 请求数，因为这些图标不需要额外的图片文件请求。然而，一个小小的图标文件带来的 HTTP 请求真的很值得一提吗，何况，使用 CSS Sprite 技术，这些图标完全可以放在同一个图片中，靠 CSS 定位显示，这样，只需要一个 HTTP 请求就够了。而且，我实在怀疑，这些 CSS 版的图标到底能减少多少带宽。

本着语义化的精神

必须承认，我有时候会为了实现某种视觉上的需要，而额外使用 DIV 或 SPAN 等标签，这很不语义。然而 CSS 绘图是更不语义的事，CSS 的真实使命是对网页中的内容进行修饰，而不是创建内容本身。网页中的图形本身属于内容的范畴，不应该由 CSS 创建。

Feed enhanced by Better Feed from Ozh

渐进增强：纯CSS聊天泡泡

seasun — Mon, 16 Aug 2010 16:26:27 +0000

聊天泡泡做为一种UI表现形式是广大网民群众所喜闻乐见，但许多教程实现它却总是需要上使用非语义的HTML或者JavaScript。而本教程中的各种聊天泡泡只需要使用到CSS2.1来构建，并用CSS3来增强效果。不使用图片，也不使用JavaScript和更加不使用当前语义没用到的 HTML哦。
在CSS文件中有大量对代码的注释，可以让你方便的看懂这些代码。（译者：在翻译时作者要求DEMO页面要用原先的网址，所以这些注释没有翻译，当然当你看完本文，了解清楚实现方式，哪么不看注释也是可以看懂代码。）

查看DEMO：纯 CSS聊天泡泡

纯CSS聊天泡泡
只需要简单的HTML代码：

Content

或 Content
就可以做出以下的聊天泡泡效果：

如果再添加一个子元素，例如 Quote
再可以做出这样的聊天泡泡效果：

我建议您使用伪类 :before 和（或者） :after 来创建HTML文档中没有写入的DOM并且用CSS来控制他们的表现。（译者：这里就是本文最为关键的一句话了，伪类在非IE的浏览器中竞然可以在HTML中创建一个DOM元素，并且可以用CSS来控制哦~哪么为什么伪类会表形成一个DOM元素呢，可能浏览器为了实现伪类的效果而产生的，这里则被作者发现并利用了。）
再使用CSS3中的 border-radius 和 transform 就可以来表现更为复杂的图形，更详情的说明请看《CSS typography experiment》（译者：本文未翻译）

示例代码
以下代码主要是创建一个有几个最基本的渐进增强型聊天泡泡的DEMO。更多的DEMO请看纯 CSS聊天泡泡及在相关CSS文件使用。

/* 泡泡及小三角
------------------------------------------ */

.triangle-isosceles {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;

/* 这里是用CSS3来控制圆角和渐变效果 */
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
background:-moz-linear-gradient(top, #f9d835, #f3961c);
background:linear-gradient(top, #f9d835, #f3961c);
}

/* 创建三角形（译者：请注意这里，这里就是在控制伪类所创建的DOM元素） */
.triangle-isosceles:after {
content:"0a0";
display:block; /* 针对 FF3.0 */
position:absolute;
z-index:-1;
bottom:-30px;
left:50px;
width:0;
height:0;
border-width:15px 15px;
border-style:solid;
border-color:#f3961c transparent transparent;
}

一些说明：
本方法是一个渐进增强的过程。首先是创建一个简单的层，然后是用伪类来实现泡泡的“小三角”，然后用CSS3来实现圆角及渐变背景。层、伪类、圆角、渐变背景这四个特性会根据浏览器的渲染能力而有不同的体验。
所以，不充分支持CSS2.1（如IE6和IE7）或不充分支持的CSS3（如IE8）的浏览器，他们将无法让用户体验到出最好的效果。

关于Firefox3.0的提示：
FF3.0支持的CSS2.1的伪类生成的DOM，但不支持对生成的元素的定位。DEMO中的一些例子我认为在FF3.0中是不能接受的，即FF3.0不能处理最基本的聊天泡泡。根据NetApplications公司2010年3月的统计，FF3.0浏览器目前约有2％~4％的市场份额。所以应用本技术之前，应该考虑FF3.0在你的访问者中的重要性。不过，最终它将成为一种罕见的浏览器。但对于FF3.0本文中的技术没有更好的支持方案。

Feed enhanced by Better Feed from Ozh