果凍公開課第二課：三分鐘了解CSS
被稱為前端三劍客的HTML、CSS、JS
HTML我們上節課已經進行了簡單的介紹，未看過的同學可以點擊傳送門：
果凍公開課：什麼是HTML
本節課，我們就來用幾分鐘快速了解下，附著在HTML骨骼上，使得頁面呈現出豐富內容的CSS層疊樣式表。
動畫視頻：
果凍公開課：三分鐘了解CSS https://www.zhihu.com/video/1033376594320027648 文字解析：
CSS，全稱為層疊樣式表。
簡單來說，就是給被HTML標記的內容加上裝飾，讓它能有所不同，不管是外觀還是內在，都有一個新的變化。
這個過程我們可以稱之為為內容增加新的屬性，賦予它更多的可能。
與HTML不同的是，它用的是花括弧{}來包裹屬性。
CSS的屬性大體可以分為5大類。
其中樣式、框模型、定位、選擇器為較為常用的四類，而其餘屬性皆歸為高級屬性。
CSS的語言規則分為兩部分：
第一部分是選擇器，顧名思義我們要告訴瀏覽器這個屬性是用在哪個或者哪幾個標籤上。
第二部分是聲明，是告訴瀏覽器具體我要為它附加什麼屬性，增加什麼變化的部分。
讓我們看看加上了屬性之後，我們的HTML有什麼變化吧~
color，改變了文字的顏色
font-size可以讓文字的大小發生變化
background-color可以添加背景顏色
border可以讓文字的外邊出現了邊框
margin和padding可以添加內外邊距，讓文字和線框，線框和塊之間出現了新的空間
float可以讓文字浮動
top給文字增加了頂部的距離
在有了內容和樣式後，我們的網頁現在是這個樣子，看起來和我們平時看到的網頁沒什麼不同。
但當你對他進行操作時，你會發現，為什麼這裡不動了，為什麼那裡沒反應了？
這是因為我們缺少激活它的語言JS，JS全稱為javascript，是一種腳本語言。
整體來說，JS在網頁中起到的作用，就像裝修好的房子，你要通電才能使用這些電器一樣，只有有了電，你才能使用這些電器。
而電器就是我們的CSS和HTML。
那麼，為什麼瀏覽器可以把這些代碼變成我們平時瀏覽的網頁呢？
這裡可以給大家舉一個很簡單的例子：
大家都知道記事本，只可以在裡面輸入的文字。
但當我們在word中輸入文字的時候，可以通過word中的各種按鈕給他增加字體、字型大小、顏色，還可以插入表格、排版等。
而這些按鈕就是前面說到的標籤和屬性，他為文字增加了很多新的東西。
而瀏覽器就相當於我們的word，可以把我們寫好的HTML文件打開，讓大家看到編輯好的內容。
網頁沒有我們想的那麼複雜，HTML和CSS也沒有我們想的那麼神秘，它只是換了一種方式的word。
我們要先用一個軟體打開和編輯我們的HTML文件，然後再用瀏覽器打開它，就能看到我們平時看到的那些網頁了。
而我們只是將編輯的過程給了編譯器，顯示的過程給了瀏覽器，各司其職而已。
好了，今天的果凍公開課就先到這裡，下期我們將向大家介紹CSS的選擇器都有哪些。
這裡是果凍公開課，一個用趣味的動畫來分享IT知識的課堂
我們將原本複雜、不易理解的編程知識，轉化為一個個有趣的動畫短視頻，為更多人提供生動有趣的IT內容/服務
無論是大咖還是小白，都可以快速學會並深度了解每一個知識點，讓IT，Q彈可口。
更多內容，歡迎加大師姐微信it_xzy，入群717415872了解課程動態、幕後花絮，還有機會參與到課程製作，成為聯合製作人記得備註來自果凍課堂喲
推薦閱讀：
