CSS是Web開發(fā)的基礎之一。但是，我們中的一些人卻感到非常困惑。這是因為我們沒有遵循適當?shù)膶W習流程，因此我們很難理解CSS的行為。

本文旨在通過兩種方式為你提供CSS的學習幫助：借助專用工具對CSS進行編碼以及通過一些交互環(huán)境學習CSS。

網(wǎng)上學習制作工具

1、 EnjoyCSS

地址：https://enjoycss.com/

這個工具非常簡單，是我們學習使用CSS時的救星。你可以使用一些簡單的UI設計元素，然后通過這個工具將其轉(zhuǎn)換為CSS代碼。

EnjoyCSS極大地改變了我的工作流程。由于易于使用，它使我花費在創(chuàng)建復雜CSS樣式上的時間和精力減少了。不需要很深的背景就可以得到復雜的CSS效果。

“ EnjoyCSS是高級CSS3生成器，可讓你擺脫常規(guī)編碼。” — EnjoyCSS

2、CSS Arrow please！

地址：http://www.cssarrowplease.com/

此工具可幫助你創(chuàng)建和導出帶有箭頭的自定義的代碼提示框。

盡管從頭開始編寫代碼聽起來很復雜，但該工具只需單擊幾下即可為你提供可用的代碼。獲得代碼后，你就可以復制代碼并對其進行一些更改，例如添加陰影效果等。

3、CSSmatic

地址：https://www.cssmatic.com/

這個多合一的工具，它可以幫你實現(xiàn)以下效果：

生成漸變：使用多種顏色和不透明度，就可獲得驚人的漸變效果。

邊框半徑：超級易于使用和超級省時。同時更改所有選定的邊框。

噪點紋理：創(chuàng)建帶有臟像素和噪點的細微背景圖案，更改顏色和值并實時預覽效果。

盒子陰影：模糊半徑變化，顏色變化和陰影大小-在單個位置創(chuàng)建出色的陰影所需的一切。

所有這些都包含一個簡單直觀的UI。作為前端開發(fā)人員，該工具是必須使用的。

4、 Patternizer和Patternify

Patternizer：https://patternizer.com/xavk

Patternify：http://www.patternify.com/

通過這兩種工具，你可以在用戶友好的界面中使用CSS創(chuàng)建出色的模式。借助這些工具，你可以創(chuàng)建很酷的模式，因為它是直接用CSS編寫的，可以輕松地在你的網(wǎng)站上實現(xiàn)使用。

在線學習CSS的工具

1、CSS Grid

地址：https://cssgrid.io/

該網(wǎng)站有一個四個小時的小型入門課程，從其基礎知識了解CSS Grid。本課程完全免費，創(chuàng)建者是著名的開發(fā)人員-Wes Bos。這門簡短的課程由25個視頻組成，可以教會你CSS Grid的所有基本知識。

入門課程地址：【YouTube】https://www.youtube.com/watch?v=T-slCsOrLcc&list=PLu8EoSxDXHP5CIFvt9-ze3IngcdAc2xKG

2、Grid Garden

地址：https://cssgridgarden.com/

這個是通過互動游戲，來提示你編寫CSS代碼來種植胡蘿卜園。這種有趣的學習方式可確保你以有趣且引人入勝的方式學習CSS Grid的基礎知識。游戲包含28個級別，每個級別都需要你編寫CSS代碼段才能完成。

3、Flexplorer

地址：https://bennettfeely.com/flexplorer/

這個簡單的應用程序，可以使用Flexbox的各種功能，并在屏幕上實時查看效果以及代碼。

你還可以編輯文本框，并查看文本框的響應式布局代碼。這種有趣的學習方式，讓CSS學習變得輕松而愉快。

4、純CSS實現(xiàn)圖像效果

地址：https://bennettfeely.com/image-effects/

多年開發(fā)老碼農(nóng)福利贈送：網(wǎng)頁制作，網(wǎng)站開發(fā)，web前端開發(fā)，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰(zhàn)【視頻＋工具＋電子書＋系統(tǒng)路線圖】都有整理，需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴