1. 盒子模型的幻灯片

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

　2. CSS Diner

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

　3. CSS Selectors 交互

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

　4. 前端Web开发考查

　　CSS 属性有大小写之分吗？

　5. The Magic of CSS

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

　6. Enjoy CSS

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

　7. CSS Guidelines

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

　8. CSS Triggers…

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

　9. mdo贡献的代码指南

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

　10. Flexplorer

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

　11. CSS Selectors: Targeting HTML Like a Pro

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

　总结

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

　　via:gbtags

11个实用的CSS学习工具[转载收藏]的更多相关文章

  1. 11个实用的CSS学习工具

    1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner 通过一个简单的小游戏让你学习CSS selector,输入正确的 ...

  2. 几篇不错的基础css博客转载

    CSS 巧用 :before和:after:http://web.jobbole.com/85083/ css清除元素间距:http://ouvens.github.io/frontend-css/2 ...

  3. 干货！IT小伙伴们实用的网站及工具大集合！持续更新！

    1.Git 还在担心自己辛辛苦苦写的代码被误删了吗?还在担心自己改错了代码不能挽回吗?还在苦恼于多人开发合作找不到一个好的工具吗?那么用Git就对 了,Git是一个开源的分布式版本控制系统,用以有效. ...

  4. 35款加速网站开发的 CSS 开发工具

    网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS ...

  5. 2015年最佳的12个 CSS 开发工具推荐

    CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...

  6. HTML与CSS学习记录

    title: HTML与CSS学习记录 toc: true date: 2018-09-10 14:04:59 <HTML与CSS进阶教程读书笔记> HTML基础知识 HTML与XHTML ...

  7. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  8. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  9. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

随机推荐

  1. 上传插件（WebUploader）

    官网:http://fex.baidu.com/webuploader/插件下载:https://github.com/fex-team/webuploader/releases/download/0 ...

  2. DRBD 实验

    跨主机的块设备镜像系统,工作在内核中完成 drbd工作原理:客户端发起一个写操作的系统调用给文件系统,写请求再到达内核缓冲区,最到达DRBD模块,此时drbd会复制写入磁盘的数据,且进行两步操作,第一 ...

  3. Beta阶段敏捷冲刺③

    1.提供当天站立式会议照片一张. 每个人的工作 (有work item 的ID),并将其记录在码云项目管理中: 1.1昨天已完成的工作. 姓名 昨天已完成的工作 徐璐琳 完善设置界面的功能 祁泽文 研 ...

  4. VMWare之——宿主机与虚拟机互相ping通，宿主机ping通另一台机器的虚拟机

    版权声明:本文为博主原创文章,未经博主允许不得转载. 转载请注明出处:http://blog.csdn.NET/l1028386804/article/details/52267554 今天给大家带来 ...

  5. git使用教程推荐

    Git使用教程 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是 ...

  6. ESXi服务器遇到 IPMI_SI_DRV 的解决, 感谢原作者 以及今天 解决问题.

    ESXI 服务器断电之后一直 LOADING MODULE IPMI_SI_DRV 的解决办法 今日家中忽然断电,之后 ESXi 服务器就一直疯狂转,连接显示器,发现原来一直没有启动.停留在ESXi  ...

  7. [转帖]Cgroups 与 Systemd

    Cgroups 与 Systemd 大神的文章很牛B .. https://www.cnblogs.com/sparkdev/p/9523194.html 看不太懂 , 转帖一下 自己留着好好看呢. ...

  8. ubuntu 16.04 部署 pypy+nginx+uwsgi+django(详细)

    1.nginx                                                                                             ...

  9. MT【158】只在此山中，云深不知处

    求证:方程$3ax^2+2bx-(a+b)=0(b\ne0)$在$(0,1)$内至少有一个实数根. 提示:$f(0)=-(a+b),f(\dfrac{2}{3})=\dfrac{1}{3}(a+b)$ ...

  10. [BJOI2017]树的难题 点分治 线段树

    题面 [BJOI2017]树的难题 题解 考虑点分治. 对于每个点,将所有边按照颜色排序. 那么只需要考虑如何合并2条链. 有2种情况. 合并路径的接口处2条路径颜色不同 合并路径的接口处2条路径颜色 ...