awesome-css-learning 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
awesome-css-learning 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
awesome-css-learning 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 View license
开发语言 HTML/CSS
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 不详
投 递 者 首席测试
适用人群 未知
收录时间 2021-12-24

软件简介

Awesome CSS Learning Awesome CSS Logo

An awesome list limited to the best CSS learning resources

This list is mainly about CSS – the language and the modules. Not about naming conventions, architecture paradigms, frameworks, pre-processors, post-processors, CSS-in-JS or other aspects of todays CSS ecosystem.

Please read the contribution guidelines before contributing.

Contents


CSS References

  • codrops - An extensive CSS reference offering way more content than MDN.
  • Can I use - Interactive browser support tables for CSS (and HTML5).

CSS in a nutshell

  • Introduction to CSS - This Screencast series will teach you the basics of CSS in about one hour.

Fundamental concepts

  • The cascade - This article explains what the cascade is and how this affects you.
  • Specificity and inheritance - Understanding specificity and inheritance is important to master CSS. This article will help.
  • CSS Box Model - An article explaining the foundation of layout on the web.
    • Also have a look at the detailed information about the box-sizing property.

CSS units

Selectors

  • Basic CSS Selectors - An introducing to the very basic CSS selectors you need to know.
  • Advanced CSS Selectors - Level up your knowledge. From attribute selectors to CSS3 pseudo classes.
  • CSS Dinner - Learn how to use CSS selectors with this fun little game.

Custom properties (aka CSS variables)

Layout

Classic layouting

  • Floats - In depth information about how to use (and clear) floats.
  • Positioning Types - A closer look at a few little-known things related to the CSS positioning layout method.
  • inline-block - Shows in which cases it makes sense to use the display property inline-block for layouting.

Flexbox

  • Flexbox playground - Play with Flexbox examples on CodePen.
  • Flexbox Defense - A tower defense game in the browser to learn about Flexbox with fun.
  • Flexbox Froggy - Learn all the basics of Flexbox with a fun game involving frogs and lily pads.
  • Flexbugs - Community-curated list of flexbox issues and cross-browser workarounds for them.
  • Flexbox Zombies - A training course driven by a storyline where you use Flexbox and a crossbow to hunt zombies.
  • What the Flexbox? - A simple, free 20 video course that will help you master CSS Flexbox!

Grid

  • A Complete Guide to Grid - All you need to know about CSS Grid Layout on one page.
  • Grid by Example - Besides examples of how to use Grid this site also has additional useful learning resources.
  • Designing with Grid - Talk about the new layout possibilities CSS Grid is offering.
  • Grid Garden - Lovely game where you write CSS code to grow your carrot garden.
  • GridBugs - Community-curated list of Grid interop issues and workarounds for them.
  • Grid Critters - Learn CSS grid layout by mastering an adventure game.

Animation


Related

Awesome JavaScript Learning - A tiny list limited to the best JavaScript learning resources.

License

CC0

To the extent possible under law, Michael Kühnel has waived all copyright and related or neighboring rights to this work.

展开阅读全文

代码

评论

点击引领话题📣
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
0 评论
0 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部
返回顶部
顶部