11个实用的CSS学习工具

港控/mmm° 2022-08-12 01:11 110阅读 0赞

[![dd8e6013-751a-4846-82b9-a9321d874b79.jpg][]][dd8e6013-751a-4846-82b9-a9321d874b79.jpg 1]

## **[1. 盒子模型的幻灯片][1.]** ##

通过3D转换效果产生的互动的幻灯片。按向左或向右箭头键切换，全屏观看会有更好的效果。

[![eb45d979-ab16-45d9-ba6f-8a70841012fd.jpg][]][eb45d979-ab16-45d9-ba6f-8a70841012fd.jpg 1]

## **[2. CSS Diner][2._CSS_Diner]** ##

通过一个简单的小游戏让你学习CSS selector，输入正确的selector来完成每一关。你也可以通过菜单来选关。

[![0f0e3cea-dd4a-4d9d-908b-7c22bc896f2a.jpg][]][0f0e3cea-dd4a-4d9d-908b-7c22bc896f2a.jpg 1]

## **[3. CSS Selectors 交互][3._CSS_Selectors]** ##

这是一个简单可视化CSS选择器。选择左边菜单中的选择器,选择的条目就会出现在右边。

[![189898ee-2160-4ea7-aedd-54297e92cced.jpg][]][189898ee-2160-4ea7-aedd-54297e92cced.jpg 1]

## **[4. 前端Web开发考查][4._Web]** ##

CSS 属性有大小写之分吗？

[![d6f40490-a44c-40e3-9496-b0c87a30a089.jpg][]][d6f40490-a44c-40e3-9496-b0c87a30a089.jpg 1]

## **[5. The Magic of CSS][5._The_Magic_of_CSS]** ##

这里有6个章节的CSS教程，更深入的教程会慢慢开放。

[![44d5e6d7-9af9-4900-9a45-8f2fc2b07252.jpg][]][44d5e6d7-9af9-4900-9a45-8f2fc2b07252.jpg 1]

## **[6. Enjoy CSS][6._Enjoy_CSS]** ##

一个学习CSS的圣地，它专注于CSS。

[![3eda94da-8ccd-431d-92b8-7cccd9f9c0a4.jpg][]][3eda94da-8ccd-431d-92b8-7cccd9f9c0a4.jpg 1]

## **[7. CSS Guidelines][7._CSS_Guidelines]** ##

Harry Roberts 已经更新了他的开放资源。之前只是GitHub上的一个库，现在已经有了自己的域名，并且优化并更新了很多资源。

[![f4237cbc-8713-4bd1-8bcc-0c5fa435041e.jpg][]][f4237cbc-8713-4bd1-8bcc-0c5fa435041e.jpg 1]

## **[8. CSS Triggers…][8._CSS_Triggers]** ##

Chrome开发者Paul Lewis创造了一个页面解析参考,当给定的CSS属性变更时它会发挥自己的作用。例如,一些属性将触发重绘和合成,但不会引发布局。我们可以很容易地通过CSS Triggers来发现这些变化。

[![f1e2f57d-c260-49f8-b8b1-c5da984c41f0.jpg][]][f1e2f57d-c260-49f8-b8b1-c5da984c41f0.jpg 1]

## **[9. m][9._m][do贡献的代码指南][9._m]** ##

Bootstrap’s的Mark Otto 整理了他自己风格的HTML和CSS指南，这些建议包括属性的顺序，顺序的HTML属性选择器等等。

[![afcecbfc-57bf-455c-9cf7-7494a9ba5d5b.jpg][]][afcecbfc-57bf-455c-9cf7-7494a9ba5d5b.jpg 1]

## **[10. Flexplorer][10._Flexplorer]** ##

这是一个简单的应用，用来来摆弄各种flexbox特性并查看出现在页面上的实时的完整代码。它有一个很酷的特性，你还可以通过它来编辑页面上的文本框，允许您看到这些变化是如何影响其它内容的。

[![9f7607fb-7eec-41d5-b4c0-828490ed2dbe.jpg][]][9f7607fb-7eec-41d5-b4c0-828490ed2dbe.jpg 1]

## **[11. CSS Selectors: Targeting HTML Like a Pro][11._CSS_Selectors_Targeting_HTML_Like_a_Pro]** ##

Russ Weakley的新课程，是SitePoint的姐妹网站,这里有超过20个视频介绍的CSS的Selector元素。这不仅仅是一个简约的插件，而且作业是一个真正的CSS专家。所以如果你刚刚开始用CSS和还没掌握选择器,这可能是一个不错的选择。

[![ddc81fa8-962d-4324-847d-92496557be2e.jpg][]][ddc81fa8-962d-4324-847d-92496557be2e.jpg 1]

## 总结 ##

不管你的CSS水平如何，我可以保证这些东西肯定能帮到你，如果你手上有正在进行的相关项目，或是其它不错的资源可以拿出来和大家一起分享。

> 极客标签 - 专业和精准的分享，关注你感兴趣的极客，社区提供超棒的精品教程，互动授课
> 
> 了解前端技术，请访问极客[互动课程库][Link 1]和[代码录播][Link 2]

阅读原文：[11个实用的CSS学习工具][11_CSS]

[dd8e6013-751a-4846-82b9-a9321d874b79.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/dd8e6013-751a-4846-82b9-a9321d874b79.jpg
[dd8e6013-751a-4846-82b9-a9321d874b79.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/dd8e6013-751a-4846-82b9-a9321d874b79.jpg
[1.]: http://www.sketchingwithcss.com/flexbox/
[eb45d979-ab16-45d9-ba6f-8a70841012fd.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/eb45d979-ab16-45d9-ba6f-8a70841012fd.jpg
[eb45d979-ab16-45d9-ba6f-8a70841012fd.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/eb45d979-ab16-45d9-ba6f-8a70841012fd.jpg
[2._CSS_Diner]: http://flukeout.github.io/
[0f0e3cea-dd4a-4d9d-908b-7c22bc896f2a.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/0f0e3cea-dd4a-4d9d-908b-7c22bc896f2a.jpg
[0f0e3cea-dd4a-4d9d-908b-7c22bc896f2a.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/0f0e3cea-dd4a-4d9d-908b-7c22bc896f2a.jpg
[3._CSS_Selectors]: http://benhowdle.im/cssselectors/
[189898ee-2160-4ea7-aedd-54297e92cced.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/189898ee-2160-4ea7-aedd-54297e92cced.jpg
[189898ee-2160-4ea7-aedd-54297e92cced.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/189898ee-2160-4ea7-aedd-54297e92cced.jpg
[4._Web]: http://davidshariff.com/quiz/
[d6f40490-a44c-40e3-9496-b0c87a30a089.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/d6f40490-a44c-40e3-9496-b0c87a30a089.jpg
[d6f40490-a44c-40e3-9496-b0c87a30a089.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/d6f40490-a44c-40e3-9496-b0c87a30a089.jpg
[5._The_Magic_of_CSS]: http://adamschwartz.co/magic-of-css/
[44d5e6d7-9af9-4900-9a45-8f2fc2b07252.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/44d5e6d7-9af9-4900-9a45-8f2fc2b07252.jpg
[44d5e6d7-9af9-4900-9a45-8f2fc2b07252.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/44d5e6d7-9af9-4900-9a45-8f2fc2b07252.jpg
[6._Enjoy_CSS]: http://enjoycss.com/
[3eda94da-8ccd-431d-92b8-7cccd9f9c0a4.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/3eda94da-8ccd-431d-92b8-7cccd9f9c0a4.jpg
[3eda94da-8ccd-431d-92b8-7cccd9f9c0a4.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/3eda94da-8ccd-431d-92b8-7cccd9f9c0a4.jpg
[7._CSS_Guidelines]: http://cssguidelin.es/
[f4237cbc-8713-4bd1-8bcc-0c5fa435041e.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/f4237cbc-8713-4bd1-8bcc-0c5fa435041e.jpg
[f4237cbc-8713-4bd1-8bcc-0c5fa435041e.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/f4237cbc-8713-4bd1-8bcc-0c5fa435041e.jpg
[8._CSS_Triggers]: http://csstriggers.com/
[f1e2f57d-c260-49f8-b8b1-c5da984c41f0.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/f1e2f57d-c260-49f8-b8b1-c5da984c41f0.jpg
[f1e2f57d-c260-49f8-b8b1-c5da984c41f0.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/f1e2f57d-c260-49f8-b8b1-c5da984c41f0.jpg
[9._m]: http://mdo.github.io/code-guide/
[afcecbfc-57bf-455c-9cf7-7494a9ba5d5b.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/afcecbfc-57bf-455c-9cf7-7494a9ba5d5b.jpg
[afcecbfc-57bf-455c-9cf7-7494a9ba5d5b.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/afcecbfc-57bf-455c-9cf7-7494a9ba5d5b.jpg
[10._Flexplorer]: http://bennettfeely.com/flexplorer/
[9f7607fb-7eec-41d5-b4c0-828490ed2dbe.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/9f7607fb-7eec-41d5-b4c0-828490ed2dbe.jpg
[9f7607fb-7eec-41d5-b4c0-828490ed2dbe.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/9f7607fb-7eec-41d5-b4c0-828490ed2dbe.jpg
[11._CSS_Selectors_Targeting_HTML_Like_a_Pro]: https://learnable.com/courses/css-selectors-targeting-html-like-a-pro-2876
[ddc81fa8-962d-4324-847d-92496557be2e.jpg]: http://www.gbtags.com/gb/networks/uploadimgthumb/ddc81fa8-962d-4324-847d-92496557be2e.jpg
[ddc81fa8-962d-4324-847d-92496557be2e.jpg 1]: http://www.gbtags.com/gb/networks/uploadimg/ddc81fa8-962d-4324-847d-92496557be2e.jpg
[Link 1]: http://www.gbtags.com/gb/gblibrary.htm
[Link 2]: http://www.gbtags.com/gb/listcodereplay.htm
[11_CSS]: http://www.gbtags.com/gb/share/3828.htm