（一）在线学习CSS
1、Flexplorer
Flexbox能在屏幕上实时查看效果以及代码。还可以编辑文本框，并查看文本框的响应式布局代码。这种学习方式非常有趣，很适合新手。
2、Grid Garden
这个是通过互动游戏，来提示你编写CSS代码来种植胡萝卜园。这也是一个有趣的学习方式，确保新手小白以引人入胜的方式学习CSS Grid的基础知识。游戏包含28个级别，每个级别都需要你编写CSS代码段才能完成。
（二）学习制作工具
1、Patternizer和Patternify
通过这两种工具，可以在用户友好的界面中使用CSS创建出色的模式。而且它是直接用CSS编写的，可以轻松地在网站上实现使用。
2、EnjoyCSS
这个工具非常简单，是可以使用一些简单的UI设计元素，然后通过这个工具将其转换为CSS代码。EnjoyCSS极大地改变了偶的工作流程。由于易于使用，能使大家花费在创建复杂CSS样式上的时间和精力减少，很容易就能得到复杂的CSS效果。
3、CSSmatic
这个多合一的工具，它可以帮你实现生成渐变、边框半径、噪点纹理、盒子阴影等效果，所有这些都包含一个简单直观的UI。作为前端开发人员，该工具是很必要的。
4、CSS Arrow please
此工具可帮助你创建和导出带有箭头的自定义的代码提示框。尽管从头开始编写代码听起来很复杂，但该工具只需单击几下即可提供可用的代码。获得代码后，就可以复制代码并对其进行一些更改。
@ css的优先级怎么判断？
css选择器优先级怎么比较CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上，CSS选择器如果细分下来，竟然多达40多种。那他们的优先级该怎么比较呢，下面就来看看吧。
● 不同级别
1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
2. 作为style属性写在元素内的样式
3. id选择器
4. 类选择器
5. 元素选择器
6. 通配符选择器
7. 浏览器自定义或继承
总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
● 同一级别
(1) 同一级别中后写的会覆盖先写的样式
(2) 同一级别css引入方式不同，优先级不同
总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式(@import)。
对于选择器优先级，还可以通过计算权重值来比较
@ css选择器中可以匹配所有标签的是？
答案是星星选择标签。
因为星号选择器的定义是用于选择html中的所有标签，在一个页面中大家都会选择去掉html所有标签的默认样式，然后根据自己的需求添加样式，这个时候就需要使用*选择标签。
另外一个*选择标签也可以搭配到其他的标签进行使用，用来选择表示某个父元素下面的所有子元素标签。
@ 记事本的代码怎么输入颜色？
记事本的代码输入颜色方法如下
1、新建html文件和CSS文件 ①在桌面新建一个文件夹，然后新建两个text文件； ②分别将text文件重命名为index.html和css.css。 2、输入html代码 ①用记事本打开index.html文件，输入相关代码即可改变颜色。
字体颜色的不同设置方法
②用浏览器打开浏览效果。 3、标签内嵌入字体标签设置颜色。 ①编辑index.html，在
标签内输入以下代码； 字体颜色的不同设置方法 ②浏览器浏览效果。 4、标签内嵌入style样式设置颜色。 ①另起一行字体，并在标签内输入以下代码；
②在浏览器中检查效果。 5、网页内部嵌入标签选择器样式设置颜色。 ①给文字的
标签命名一个ID； ②在之间输入以下代码；③浏览器中查看效果。 6、网页内嵌入类选择器设置颜色。 ①给文字的标签命名一个Class； ②在中输入以下代码； .p1{color:#D1f3c6;/*类选择器*/} ③浏览器查看效果。 7、外部CSS样式设置颜色。 ①在网页头部输入以下连接CSS外部文件代码；②在网页中写入以下代码；
字体颜色的不同设置方法
字体颜色的不同设置方法
③用记事本方式打开css文件，输入以下代码； ④浏览器检查效果变化。
