HTML 5 Reset Stylesheet
这份css reset是在Eric Meyers的 CSS reset基础上修改出来的，特别针对HTML5调整了相应标签的初始化样式。
Archive for the ‘css’ Category
2009.
08.
8
HTML5 CSS reset
2009.
06.
20
10个最常用的CSS className
很多做前端开发的在为页面元素定class的时候经常会拿不定主意，导致随意使用class，一个好的class要能够描述出某个特定元素的表现，在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格，下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。
1.class=”fixed”
fixed这个class几乎出现在没个样式文件中，用在为包含浮动子元素的容器元素清除浮动，样式如下
.fixed:after{
content:”.”;
display:block;
height:0;
clear:both;
visibility:hidden;
}
.fixed{
display:block;
}
/* \*/
.fixed{
min-height:1%;
}
* html .fixed{
height:1%;
}
这个样式就可以用在下面的情形，每个li都是浮动的：
…
2.class=”alt”
alt是”alternative”（交替）的简称，这个class用在有一组样式一样的元素，需要为其中的某几个设定特别的样式，比如一组向左浮动的图片中需要有一张是向右浮动,可以这样：
#content img{
float:left;
display:inline;
margin-right:10px;
border:1px solid #ccc;
padding:1em 0;
background:#fff;
}
#content img.alt{
float:right;
margin-right:0;
margin-left:10px;
}
3.class=”selected”
这个最经常用的，用来处理mouseover或选中元素的效果。
About Us
4.class=”first”, class=”last”
直到99.9% 的浏览器支持:first-child和:last-child这两个伪类之前，class=”first”, class=”last”用的地方还是很多的。
5.class=”image”
平常选择图片元素一般用类似(#container img)这样的标签选择器，但是我这里的class=”image”是用在包含图片的容器元素，假如你正在做一个新闻列表，需要在新闻标题下面加一行带图片和说明文字，并且向右浮动，可以这样做：
This is me trying to look cool!
The rest of the content here
…
6. class=”inner”
inner也是经常使用的class，而且大部分上是用来制造视觉上的额外效果，用来给嵌套在容器里的子容器定义样式（比如制作双背景图片效果）：
7.class=”link”
link跟image类似，我用来嵌套一个A标签，最经常用来制作”Read More”链接：
Read more…
8.class=”one”, class=”two”, class=”three”…
这些class用在需要区别每个子元素的列表项，比如用移动背景图片来制作导航菜单：
Home
About
…
9.class=”even”, class=”odd”
用来实现隔行换样式，一般用在表格和列表：
Content
Content
Content
Content
10.class=”section”
一般用在为指定内容中特定部分添加特定的样式：
content here…
原文：My Top 10 Most Used CSS Class Names
译文：http://jsssc.cn/top-10-most-used-css-class-names/
本站所有文章，除特别标明外，皆为原创。如需转载，请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:10个最常用的CSS className| 路可
2009.
06.
9
25个时髦的表单设计
表单是用户和网站交互的主要途径，不管是用户注册、发表博客、发表评论还是用web客户端发送email（比如gmail），表单始终是现代网站和web应用的主要产物。
在下面的展廊，你可以欣赏到一些设计精妙和构建良好的web表单设计，相信可以为你设计迷人而有效的表单提供一些灵感。
1. Alexandru Cohaniuc
2. Tea Round App
3. Grooveshark
4. Substrakt
5. Matt
6. Pixelight Creative
7. Ballpark
8. MAQUINA studio
9. nclud
10. MonAssoc
11. Komodo Media
12. AllDevJobs.com
13. Connect
14. TVI
15. Webgrapes
16. Headscape
17. Digg
18. Graphik.fi
19. CollabFinder
20. Digitalmash
21. Kontain
22. SocialSnack
23. Mint
24. BBC
25. Media Temple
原文：25 Stylish Examples of Web Forms
本站所有文章，除特别标明外，皆为原创。如需转载，请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:25个时髦的表单设计| 路可
2009.
06.
4
09年5月CSS酷站精选
原文：http://cssbuilt.com/2009/06/best-of-css-design-may-2009/
本文是每月CSS酷站精选集的一部分，今天我精心挑选了20个9年5月份出炉的CSS站点，排名不分先后。
如果你有什么更好的站点可以在评论里提交，如果确实是不错的站点我会把它加到本文末尾。
Ma.tt
Getmiro.com
Blueflavor.com
Jameslaicreative.com
Owltastic.com
Base6design.com
Duchyoriginals.com
Simpleflame.com
Reviveafrica.com
Incognitoincorporated.com
Graphik.fi
Onehub.com
Douglasmenezes.com
Pulseapp.com
Ruadebaixo.com
Marcsdesign.com
Fishingcactus.com
Lebloe.com
Newism.com.au
Rareview.com
本站所有文章，除特别标明外，皆为原创。如需转载，请保留本说明文字并以链接的形式保留本文链接和出处:
转载自:09年5月CSS酷站精选| 路可
2009.
06.
1
HTML标签10宗罪
你最好小心为是，因为**巡查员们对你每行HTML代码虎视眈眈，他们不会放过你那些html代码中让他们无法纵容的错误。为了避免这样那样的错误，我手边的正好有一张包含10条关于你平常的coding中最容易犯的错误的清单可供参考，并且提供了一些关于书写能通过验证的代码、语义化、和避免使用被弃用的标签的技巧。
译者注：这些只是作者提出的建议，大部分的技巧没有为什么可讨论的，如果你有什么更好的想法可以联系作者line25,本站（jsssc.cn）没有解释的权利，还有这些罗列的是罪状，你要做的是避免这样做，而不是尽力去实现它。
这篇文章比较适合初学和观光者。
罪1.block元素嵌在inline元素里
div、p……这些是Block元素（块级），主要用来组织文档的结构;span、a……等属于inline元素，相对而言这些元素应该使用在块级元素里面跟着文档流走，所以尽可能的让内联元素出现在块级元素里面。
罪2.img没有添加alt属性
alt属性是每张图片都必须添加的属性，它可以让浏览者快速的了解图片信息，所以alt属性应该确切的说明图片的真实信息，而不是很潇洒地写上“image”，如果图片只是用作装饰用的，写个alt=“”也就够了。
罪3.打死不用列表
ul、ol、dl这些列表除了dl，在展示内面上的很多东西上使用得非常广泛，要善于利用有序和无序列表来展示各种列表信息，所以永远不要使用N个<br />换行来列出一个清单。
罪4.还在使用<b><i>
<b><i>是用来让文本显示成黑体和斜体，从语义上分析的话这个两标签都是表现类的标签，因此这样的标签都可以通过CSS来展示，要强调文本可以用<strong><em>来代替<b><i>。
罪5无节制使用<br />
<br />一般用于一个段落把中某个特定字符顶到下一行，不应该用<br />在html元素之间制造间隙，你可以用多个段落(<p>)来组织文本,或者用css来调整元素间隔。
罪6.滥用删除线
同4，<s><strike>也是过渡元素，不建议使用，可以用<del><ins>来代替。
罪7.使用内联样式
语义化html的重点是要保持结构和样式的分离，所以在html里面大写样式代码是毫无意义的，应该把样式独立出来写到css文件中，这样也方便代码维护。
罪8.为元素设置边框
同样的，为了语义化你的html，像border这样的表现型的属性也应该放到css里面声明，虽然有时候它只是用来去除一些没必要出现的图片边框。
罪9.不懂得利用标题标签
<h1>-<h6>配合<p>可以很方面地组织出带标题的文字段落，根据整个文档结构组织的需要，可以适当的使用标题标签替换掉那些蹩脚的<strong>.
罪10.<blink><marquee>……
这些标签根本就不是w3c html标准里面的标签。
本站文章如无特殊说明均为原创，转载的朋友请保留文章链接、出处和本说明文字：
本文链接：http://jsssc.cn/10-html-tag-crimes/
出处：路可
2009.
05.
31
纯CSS鱼眼菜单
纯css鱼眼菜单的灵感来自于 Mac OSX Dock , 效果是让带小图标的菜单在鼠标滑过、停留时有放大的效果，鼠标停放的菜单两边的小图片也有一定比例的变化，具体效果可以猛点此处看DEMO。
实现图标向下放大效果：
1.HTML代码：
路可
2.CSS代码:
下载 [...]
2009.
05.
27
10个值得关注的优秀CSS框架
大多数做过网页设计的都知道“CSS框架”，而且肯定有很多设计师已经开始在作品中使用CSS框架。
就像其他编程语言一样，CSS也可以把一些重复使用的代码整合起来，这样可以减轻很多的工作量。
恰当地利用CSS框架可以缩短开发时间，不过话说回来，如果选错了CSS框架胡乱用于实际开发中，必然会适得其反。
下面介绍的是一些值得深入研究的开源CSS框架，你可以通过搜索轻易地获取源代码。
1.Blueprint:
Bluepring 包含了方便实现浏览器兼容的reset css。另外，它还包含了在网页开发中经常用到的很多外部工具和模板。
2.960 Grid System
又一个值得深入研究的CSS框架，提供的源文件包含了Firework、Photoshop、Inkscape等等的模板，可以拿来随手即用，PSD文件中已经预置了参考线，可以为设计师节省不少时间。
3.Tripoli Framework
Tripoli可以支持几乎现有的所有浏览器，甚至是IE5，包含了一些基础css库，和一些封装过的CSS插件，比如：Layout、Visual、Type、Negative。
4.YAML – Yet Another Multicolumn Layout
YAML是一款开发文档齐全、非常可靠的框架，参照它给出的PDF文档和官方网站上的示例可以很轻松地上手，它也提供很多开发中可以利用的工具，比如李咏YAML Builder可以构造一个机遇YAML的CSS布局实例。
5.YUI Grid CSS
YUI Grid CSS不仅支持固定宽度的布局实现还支持不定宽度的布局，这也是它比其他框架更为灵活的地方，你可以下载YUI的cheat sheet和官方网站的YUI Grids Builder来快速上手使用YUI Grids CSS。
6.BlueTrip
Blue Trip区别与其他框架的特点是它非常有特色而且十分美观，它的官方网站上有完整的开发文档和demo。
7.Content With Style
Conten With Style是一款固定宽度布局的CSS框架，包含了一系列的布局示例比如，一列垂直导航、两列垂直导航等等。
8.Elastic CSS Framework
Elastic提供了用声明式语言来定义布局结构和行为，这个框架还刚刚起步，最好的Demo就是它的官网本身。
9.Molio CSS/HTML Templates
Mollio的开发始于IE7暴露出很多渲染的问题，它可以作为网站布局的参考，特别适合CSS初学者。
10.SenCSS
Sen并没有提供布局方面实例，但是有一些类似baseline, fonts, paddings, margins的css可利用，它包含了一个开发版本和一个发布版本。
其他的一些CSS框架，可能你也会喜欢：
WYMstyle
CSS-boilerplate
Typogridphy
CleverCSS
Logicss
选择一框合适的CSS框架不管对学习CSS还是实际开发都是非常有用的，熟悉更多的框架就可以通晓这些框架设计和实现的可鉴之处，提高CSS框架设计水平之日可待。
本站文章如无特殊说明均为原创，转载的朋友请保留文章链接和出处：
本文链接：http://jsssc.cn/10-promising-css-framework-that-worth-a-look/
出处：路可
2009.
05.
26
几个CSSReset的方法
正在使用CSS的你，用过CSS Reset吗？当然，或许你用了，却不知道正在用，比如你可能经常用到：
程序代码
* { padding: 0; margin: 0; border: 0; }
这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。下面是Yahoo的CSS重设代码，也是受最多人喜爱的CSS Reset方法，YUI选择的方法是：
程序代码
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;
}
2009.
05.
26
清理浮动的全家
来源：http://www.twinsenliang.net/skill/20090413.html
早段时间特别的忙，忙到站点一直没有更新；但是这段时间也是偷偷的做了一些的工作，比如对站点的JS进行了压缩，构思labs分站以及聚合分站。
而此段时间最烦的是森林群里面的一群人每天上班都在吵，然后我就每次都装嫩的在里面问：“各位高手，劳烦请问一下；清除浮动怎么弄？”
清除浮动一个凡是做页面的人都会遇到的一个东西，但是是否大家都能够清楚的知道，全方位的了解呢？于是一闲下来了马上写了这样的一篇文章，不能讲面面俱到，然而基本能将我所知道的倾囊相授了。
我们粗略的一起来看看清除浮动的办法一共有多少个。对应的DEMO
1. 采用伪类:after进行后续空制的高度位零的伪类层清除
2. 采用CSS overflow:auto的方式撑高
3. 采用CSS overflow:hidden的方式产生怪异适应
4. 采用display:table将对象变成table形式
5. 采用div标签，以及css的clear属性
6. 采用br标签，以及css的clear属性
7. 采用br标签，以及其自身HTML的clear属性
粗略的看，他们都能将问题解决；然而他们另外一方面又有着各自的利弊。（一一对应）
1. 优点结构语义化完全正确，不会产生其余的怪异问题。
缺点复用方式不当容易造成代码量急剧增大。
建议最外层轻浮动时使用，或清晰模块化复用方式的人使用。
2. 优点结构语义化完全正确，代码量极少。
缺点多个嵌套后，点击最外层的轻浮动框会遭成最外层至最内层内容全选（FF）；或者在mouseover造成宽度改变时会出现最外层模块有滚动条（IE）。
建议内个模块使用，请勿嵌套。
3. 优点结构语义化完全正确，代码量极少。
缺点内容增多时候极易不会自动换行而内容被隐藏掉。
建议宽度固定时使用，请勿嵌套。
4. 优点结构语义化完全正确，代码量极少。
缺点盒模型属性已经改变，可想而知奇异事件自然多得你数都数不到。
建议如果你不想改Bug改死你的话，最好不要使用；不过可以作为alpha版本当中临时性的忽悠下测试。
5. 优点代码量极少，复用性极高。
缺点完全不能完美的适应语义化，不利于改版以及需求变更。
建议初学者使用，可以让你快速的解决浮动问题。
6. 优点语义化程度比第5种情况要更优；代码量极少，复用性极高。
缺点语义化依旧不完美，不利于改版以及需求变更。
建议初学者使用，可以让你快速的解决浮动问题。
7. 优点语义化程度比第5、6种情况要更优；代码量最少，复用性极高。
缺点语义化依旧不完美，不利于改版以及需求变更。
建议引导初学者思维升级时使用，让其明白与其用classname来控制一种表现，倒不如回归到WEB1.0的时代的网页直接用html属性来控制表现，毕竟后者的代码量更少。
2009.
05.
24
10个提高CSS代码质量最佳实践
回头去看自己写的CSS代码，你很容易就可以发现那些代码都乱成一团了，可能是因为你还没有规划好就开始马马虎虎虎地乱写一通，或者是你的代码夹杂了太多的Hack代码，还可能是因为那些代码改动太过频繁了。
不管出于是什么原因，我们都应该认真考虑怎么写好CSS代码，让那些代码能够更加简洁、易于控制、易于维护。
参考下面这10点心得去实践可以让你不会再那么头痛CSS代码该怎么写。
1.保持代码井井有条
永远不要随随便便地想到一个id、class就一股脑把代码写下去，这样写出来的代码非常难维护也不好扩展，所以应该先考虑如何组织结构更加清晰的CSS代码，以便更好地利用CSS继承的特性。
记住，最常见的元素一定要先声明，再声明具体的某个元素。这样可以让让具体某个元素继承那些已经声明过的属性，也可以让你在需要的时候修改特定的属性。这种结构的CSS代码易于阅读，更符合逻辑结构。
结构化编写CSS代码可以让自己以后能够轻松维护那些代码（或者让替你擦屁股的人松一口气）。可以参考下面这样的结构：
reset
链接、预定义类型
总体布局
二级布局
表单
各种其他元素……
2.标注代码作者、日期、其他重要信息
在css代码的头部写明是谁写了这些代码，在什么时候，怎么联系上作者，特别是在制作模板和主题的时候。像这样的信息：
注意图片中的示例颜色代码，多年来我发现列出一份CSS中用到的颜色示例代码并说明大概是什么颜色，在不管是最初编写颜色样式的时候还是以后可能会进行的改进都是极其有效地，至少可以再你打开取色器输入那些16进制颜色代码的之前可以让你有个大概的印象，或者可以在需要改变颜色的时候提供快速的参考。
3.制作样式库
一旦你的CSS代码保持相对良好的结构的时候，你可以把那些最经常使用的代码独立出来作为一个库来不断复用。
你可以为不同的用途制作相应的版本，比如一个两栏布局的样式，一个博客主题、用来打印的样式等等。
如果你要为每个相同或者类似样式规则的页面重新编写各自的CSS代码，你肯定会疯掉。
4.使用通用的命名规范
你可能注意到可第一点提到的CSS代码中的声明了两个ID：col-alpha、col-beta，为什么不把他们命名成：col-left、col-right？我们要考虑将来可能的需求变更。
明年你可能就需要把现在网站中的左边那一块放到右边去，你不需要为重命名HTML中的相关元素，也不需要为了变换一个元素的位置去改变样式表中的那个对应的id。
你也可以把左边的元素移到右边，然后保留它原来的id：col-left，但是问题出在哪里？如果这个id的样式让元素呆在左边，有人希望它就应该一直呆在左边，这样就不没给你太多的空间去改变它的位置。
css的一个主要的有点就是能把样式和内容分离，重新设计站点的时候你只需要稍微修改一下你的样式代码而无须去修改html代码，所以不要在css中使用有特定环境限制的命名方式，应该始终如一地使用更为通用的命名规则。
不要在CSS中使用那些有特定表意命名（比如位置,颜色之类的），用.link-blue来标示蓝色的连接或许不错，但是当客户要你把链接颜色改为橙色的时候，你要去修改链接的class呢还是把.link-blue里的color改为orange？不要让自己的命名规范把自己的手脚束缚了。
语义化命名，而不是为表现命名 ，举个例子.comment-blue 来的比.comment-beta不通用，.post-largefont也比 .post-title使用起来更受限制。
5.使用连接符而不是下划线
因为有的一些老的浏览器不支持下划线，为了某种意义上的向后兼容，改掉你使用下划线（_）的习惯，用连接符(-)来代替.
6.不要重复造轮子
把有相同属性的元素归为一组，以便可以重复利用那些相同属性。比如h1 和h2的都有相同的字体、颜色、margin，你就应该这么写：
特别主要想margin、padding等属性都有相应的简写形式。
当然你要理解这样写代表样式属性顺序。
7.优化CSS代码
掌握了上面的原则已经可以减少CSS代码的大小，代码量越少载入速度就越快，也越方便维护。
把那些不需要的代码通通切掉，能归为一组的都写在一起，使用别人封装的CSS库时特别要注意，因为你可能在自己的代码中继承了很多根本用不着的属性。还有一点，不用为0px,0em等加上单位。
8.先编写Gecko下的基本样式，再去考虑兼容webket和IE
为了解决最然让人头痛的浏览器问题，你可以先在firefox下编写调试出最基础的样式代码，然后在其他核心的浏览器（比如webket、IE）做一点修改即可，因为在firefox下运行良好的代码一般在其他浏览器下是不会有太大问题的。
9.验证你的CSS
要充分利用W3C’s free CSS validator.如果在遇到问题的时候（比如你写的布局代码没有效果）一片茫然的时候，这东西可以帮你大忙。
10.保持代码整洁
通过javascript、后台控制、条件注释等手段把那些为了实现特定浏览器效果而编写的CSS独立出来，就避免了那些可恶的hack代码，这样就可以让最基本的CSS保持整洁，便于管理。
原文：10 Best CSS Practices to Improve Your Code
本站文章除特别说明，均为原创，转载的朋友请保留文章链接和出处：
转载自 10个提高CSS代码质量最佳实践 | 路可
