到昨天（Day 5）為止，我們的任務清單網站已經能夠：新增任務、勾選完成、刪除任務，功能雖然齊全，但畫面還是很陽春。就像是一間剛裝潢好的房子，家具雖然都有，但沒有整理和裝飾，看上去不夠舒服。今天 Day 6，我們要幫網站「穿衣服」，用 CSS 讓整體排版、字體、間距更整齊。
為了達成這樣的目的我們先需要新增全域樣式檔，先在在 src/assets/ 新加一個 style.css，並裡面寫下基礎樣式，將背景顏色、字體、卡片樣式，把輸入框與按鈕排版在同一行，還有在完成任務時，出現灰色文字跟刪除線等等。
大致長這樣：

接下來，我們需要在 main.js 引入 CSS，打開 src/main.js，在最上方新增：

這樣一來，整個專案就會自動套用我們的 CSS！
關於刪除線，在 Day 5，我們已經有在 TaskList.vue 裡寫了：

所以就沒又用到今天所寫的地方來特別再寫。
今天最終結果長這樣：

可以看到，背景是淡灰色的，在任務清單像卡片周圍，都有一樣有圓角和陰影，「新增」的這個按鈕是藍色的，滑鼠移上去會變深藍的這個小細節，在已經完成的任務項目上，會自動顯示刪除線，來作為標記！今天的進度就像整理房子一樣，昨天功能已經齊備（桌子椅子都在），而今天我們把家具排整齊、鋪了地毯、加了燈光，不只是發揮原本的設計作用，更是讓整體變得更舒適了！