在 HTML 的學習中，我們多次提起 CSS，早已期待在網(wǎng)頁中應(yīng)用它了，它到底有什么神奇功效呢？

CSS 就如同我們生活中的化妝師，給一張張普通的面龐，涂抹上各種化妝品，這樣看起來更加的光鮮亮麗、賞心悅目，這就是 CSS 的美妝功效。

CSS 是 Cascading Style Sheets 的縮寫，譯為層疊樣式表，是用來設(shè)計網(wǎng)頁樣式的語言。它描述了 HTML 元素在屏幕、紙張或其他媒體上的顯示方式。它為我們節(jié)省了大量的工作，可以一次控制多個網(wǎng)頁的布局，也可以通過CSS文件存儲外部樣式表。

我們來看個例子，這里展示了一個有四個不同樣式表的HTML頁面。點擊下面的 "樣式表1"、"樣式表2"、"樣式表3"、"樣式表4 "鏈接，可以看到不同的樣式。也可以點擊 "沒有樣式 "，這就是我們之前學過的沒有添加CSS樣式的 HTML基本布局了。

了解了 CSS 的作用后，你是不是迫不及待的想在網(wǎng)頁里應(yīng)用它。接下來，我們先得學習一下 CSS 的基本語法。

通常，我們把 CSS 語法也稱作 CSS 規(guī)則。一個CSS規(guī)則由一個選擇器和一個聲明塊組成。

選擇器指的是你要定義樣式的HTML元素。聲明塊包含一個或多個聲明。每個聲明包括一個CSS屬性名稱和一個值，中間用冒號隔開。多個CSS聲明要用分號隔開，聲明塊要用大括號包裹起來。

注意，選擇器和花括號之間，花括號和屬性名之間，冒號前后，分號前后都可以添加任何多個空格和換行。所以大家編寫樣式不用太小心翼翼。但是屬性名和屬性值是一個整體，中間不能有空格和換行！

我們來實戰(zhàn)一下。打開VSCode，新建一個文件夾 001-try-css，在文件夾里創(chuàng)建一個 syntax.html 文件，創(chuàng)建基本代碼。定義兩個 p 元素，編寫一些文本。

接下來可以給 p 元素添加樣式了！但問題來了，樣式的代碼放到哪里呢？我們先劇透一個知識點，后面我們還會詳細的介紹。在 head 元素末尾，添加一個 style 元素，在這個元素內(nèi)部添加樣式。

定義一個選擇器 p，它指向了我們要定義樣式的HTML元素：<p> 元素，并且同時指向了兩個P元素。接下來編寫一對花括號。

定義 color 顏色屬性，值為顏色名稱 red。

再定義 text-align 屬性，值為 center。保存文件。

在瀏覽器預(yù)覽前，你可以暫停一下視頻，猜一下是什么效果，在彈幕里告訴我。

我們來看一下，兩個 p 元素的文本都變成了紅色，并且水平居中對齊了，你想對了嗎？

返回編輯器，將 p 元素的 color 顏色值改為 purple，保存。

回到瀏覽器，刷新，段落文字變成了紫色。

在學習HTML時，你可能早就發(fā)現(xiàn)，每次修改頁面保存，都得在瀏覽器上刷新一下，能否修改完代碼，瀏覽器自動刷新呢？可以的！

我們安裝一個插件就可以實現(xiàn)了。點擊擴展按鈕，搜索 Live Server，安裝。

返回要預(yù)覽的頁面，鼠標右鍵，點擊 Open with Live Server。

接下來我們修改一下 color 顏色值改為 blue，保存。

回到瀏覽器，我們看，段落文本自動變?yōu)榱怂{色。