这些资源让你成为CSS专家 (一)

迄今为止,已经收集了100多个精通CSS的资源,它们能让你更好地掌握CSS技巧,使你的布局设计脱颖而出。因为资源太多了,今天先分享50个,里面都是英文的网站内容,大家可以一边学习别人的网页布局风格和代码风格,里面还有教程,真的很棒,一边学前端技术,一边学英语,一举多得。

CSS3 资源

01、20个学习CSS3的有用资源

http://sixrevisions.com/css/20-useful-resources-for-learning-about-css3/


02、CSS3 风暴 — 提示, 诀窍 和 技巧

http://www.w3avenue.com/2009/06/22/css3-unleashed-tips-tricks-and-techniques/


03、20个非常有用的CSS3教程

https://speckyboy.com/2008/04/22/20-very-useful-css3-tutorials/


04、令人激动的CSS3函数与特性: 30多个有用教程

http://www.noupe.com/essentials/freebies-tools-templates/css3-exciting-functions-and-features-30-useful-tutorials.html


参考资源与备忘录

05、CSS属性指引 —— 一份清单,按字母表顺序列出了每个CSS属性。

http://www.blooberry.com/indexdot/css/propindex/all.htm

111.png

06、层叠样式表二修订版1 — 这是W3C对CSS 2.1 作出的官方说明。

https://www.w3.org/TR/CSS2/


07、CSS简写指引 — 覆盖了基础的CSS缩写形式。

http://www.dustindiaz.com/css-shorthand/


08、CSS速查表 — 两份表来自About.com — 一份关于CSS基础特性,一份关于CSS布局。

http://webdesign.about.com/od/css/a/css_cheat_sheet.htm


09、列表速建 — 该网站提供了大量的例子,告诉你如何使用CSS创建各种不同风格的列表。

http://css.maxdesign.com.au/listamatic/


10、经验丰富的CSS设计师给初学者的指南 — 这里有大量的资源适用于CSS初学者。

http://www.cameronmoll.com/archives/001211.html


11、组合CSS的5点提示 — 这篇文章提供了5个真正有效的方法,让你更好地组织你的样式表(而且,有助于以后的编辑修改)。

http://erraticwisdom.com/2006/01/18/5-tips-for-organizing-your-css


12、我的5个CSS提示 — 收集了5个用于更好地创建CSS的例子。


13、惯用模式与严格模式 - 在现代浏览器里面惯用模式与严格模式指南。

http://www.quirksmode.org/css/quirksmode.html


14、CSS速查表(V2) — 一份单页的CSS参考书,列出了所有CSS 2.1的选择器。

http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/


15、核心CSS: 第一篇 — 一份来自Refcardz的基础CSS参考指南.

https://dzone.com/refcardz/corecss-part1


16、CSS 简写速查表 (PDF) — CSS简写形式参考书.

http://www.eddiewelker.com/wp-content/uploads/2007/09/csscheatsheet.pdf


17、使用 CSS (层叠样式表) — 基础CSS指南,包含使用CSS的好处介绍.

https://dzone.com/refcardz/corecss-part1


18、5个方法快速写成高质量的CSS — 写出高效CSS的一些提示。

http://code.tutsplus.com/tutorials/5-ways-to-instantly-write-better-css–net-3003


19、使用CSS优化网页打印效果 — 创建适用于打印的样式表指南.

https://davidwalsh.name/optimizing-structure-print-css


20、打印样式表 — 创建打印样式表的另一份指南.

http://css-discuss.incutio.com/?page=PrintStylesheets


21、CSS 排版: 反差技巧、教程和CSS最佳实践 — 收集了大量的CSS印刷资源。

http://www.noupe.com/essentials/freebies-tools-templates/css-typography-contrast-techniques-tutorials-and-best-practices.html


22、高效编码必备的CSS技巧 — 为了更好地编写CSS而收集的CSS 技巧、意见和解决方案。

https://www.smashingmagazine.com/2008/02/powerful-css-techniques-for-effective-coding/

112.png

23、用CSS Reset来重置CSS样式 — 一份重置样式的完整指南。

http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/


24、CSS结构化命名惯例 — 一篇关于元素命名的文章,这里讲述基于元素本身的命名,而不是基于它们的位置或外观。

http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/


25、用CSS风格指南提高代码的可读性 — 文章涵盖5大技巧,让你的代码更加易于维护和管理。

http://www.smashingmagazine.com/2008/05/02/improving-code-readability-with-css-styleguides/


26、写好CSS的70个专业意见 — 搜集了一些关于写好CSS的专业提示。

https://hackhands.com/70-Expert-Ideas-For-Better-CSS-Coding/


27、你必须知道的CSS浮动 — 一份帮你理解CSS浮动的指南.

https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/


28、完整的CSS指引 — 大量的资源,涵盖了CSS的方方面面.

http://www.westciv.com/style_master/academy/css_tutorial/


29、创建排印样式对比的七个基本方法 — 文章列出了一些基本要素,关于在CSS里面使用充分的排版对比来营造优秀的样式风格。

http://webdesignerwall.com/tutorials/typographic-contrast-flow


30、如何用CSS处理文本的大小 — 一篇关于处理CSS文本大小的透彻指南。

http://alistapart.com/article/howtosizetextincss


31、CSS速查 — 一份非常完整的网页CSS速查表.

http://lesliefranke.com/files/reference/csscheatsheet.html

113.png

32、每个人都应该知道的13条CSS训练原则 — 列出了你应在注意的一些基本的CSS惯例.

http://designreviver.com/tips/13-training-principles-of-css-everyone-should-know/


33、资源指引 — 这是来自CSS Zen Garden的CSS资源指引。

http://www.mezzoblue.com/zengarden/resources/


34、CSS美化 — 该网站提供了一些CSS消息、资源和画廊.

http://www.cssbeauty.com/

114.png

35、使用CSS简写 — 一些CSS缩写的参考指南。

http://www.tech-evangelist.com/2008/08/23/css-shortcuts/


36、网页开发者手册 — This is a massive collection of CSS and other resources, including showcases, tools, and more.搜集了CSS以及一些其他的资源,如示例、工具等。

http://www.alvit.de/handbook/


37、100个免费的CSS资源 — 大量CSS资源,包括相关的文章、教程、布局等等。

http://www.softwaredeveloper.com/features/designing-on-a-dime-060407/

115.png

38、15个你可能从未用过的CSS属性 (但或许要知道) — 文章覆盖了15个经常被忽视的CSS属性,许多开发者可能都不知道它们的存在。

https://moz.com/blog/css-properties-you-probably-never-use


39、CSS专家的10条原则 — 搜集了一些CSS大牛的重要原则和指南.

http://code.tutsplus.com/tutorials/10-principles-of-the-css-masters–net-541


40、你应该知道的CSS特性 — 一份CSS权重特殊性指南,css权重是CSS里面最难掌握的知识点之一。

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/


41、解决5个普遍的CSS难题 — 告诉你如何处理一些CSS难题,如 IE6 里面双层外边框的bug,以及无效样式等。

http://code.tutsplus.com/tutorials/solving-5-common-css-headaches–net-58


教程与技巧

42、从零开始学CSS — 这是一个非常基础的教程,让你从零开始学习CSS并用它创建第一个基础网页。该教程对于那些对网页构建不了解的初学者来说,是很好的资源。

http://www.coffeecup.com/

116.png

43、53个生存必备的CSS技巧 — 这里收集了大量的CSS技巧,从菜单到表单再到样式表打印,都有相关介绍。

https://www.smashingmagazine.com/2007/01/53-css-techniques-you-couldnt-live-without/


44、CSS 阴影效果 — 一个关于如何用CSS给图片加阴影的教程。

http://alistapart.com/article/cssdropshadows


45、CSS 选择器教程 — CSS选择器的基本介绍以及它们是如何工作的。

http://css.maxdesign.com.au/selectutorial/index.htm


46、CSS 导航技巧 — 搜集了37个不同的CSS导航设计。

http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php

117.png

47、我一直使用的CSS技巧 — A collection of CSS techniques Christian Montoya finds extremely valuable.

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/


48、CSS技巧综述 — 20个CSS提示与诀窍 — 收集了关于CSS圆角和弹窗的一些技巧。

http://www.petefreitag.com/item/475.cfm


49、CSS提示与小窍门 — 有效基础的CSS技巧.

http://www.blogherald.com/2006/09/08/css-tips-and-tricks/


50、精通样式表: 最有用的CSS技巧 — 用于清除和重置浏览器默认的样式。

https://www.crucialhosting.com/knowledgebase