CSS 進(jìn)階知識學(xué)習(xí)

在這一節(jié)知識點(diǎn)中，我們將帶領(lǐng)大家進(jìn)一步學(xué)習(xí)CSS的相關(guān)知識。從之前的初級 CSS 知識中我們了解到了 CSS 的一般使用的幾個(gè)點(diǎn)。這一次我們來學(xué)習(xí)一些更加核心，更加重要的CSS知識點(diǎn)。

今日我們要學(xué)習(xí)的知識點(diǎn)主要包含了： CSS 樣式學(xué)習(xí)，設(shè)置ID，標(biāo)簽 CSS 樣式，復(fù)雜一點(diǎn)的復(fù)合 CSS 樣式。這一節(jié)涉及的操作可能比較多，但多數(shù)屬于比較基礎(chǔ)的操作，需要大家在學(xué)習(xí)的過程中多多練習(xí)，才有可能熟練掌握。下面就帶領(lǐng)大家一起來學(xué)習(xí)一下本節(jié)的知識點(diǎn)吧。

1. CSS 樣式學(xué)習(xí)

在這一部分中，我們主要學(xué)習(xí)如何利用 Dreamweaver CC 2018 來設(shè)置頁面中的 CSS 樣式。

首先，我們要讓CSS設(shè)計(jì)器屬性面板展示出來：鼠標(biāo)左鍵單擊菜單欄中的窗口（W），點(diǎn)擊 CSS 設(shè)計(jì)器。這個(gè)時(shí)候，我們可以看到屏幕的右側(cè)出現(xiàn)了 CSS 設(shè)計(jì)器。

我們可以把鼠標(biāo)左鍵按住CSS設(shè)計(jì)器的標(biāo)題，拖動(dòng)它，把它拖出來。像下面這張圖片一樣，大家可以看到在CSS設(shè)計(jì)器中大致包含了幾行：源，媒體，選擇器，屬性。

那么我們要如何才能修改這個(gè) CSS 文件中元素屬性的值呢？很簡單，只要我們先選中一個(gè)元素，比如圖片中的 li標(biāo)簽 。選中后可以看到下面的屬性面板中列出了一些屬性列表，我們雙擊這些屬性名，就可以在其中填寫你想要設(shè)置的屬性值了。是不是很簡單？既直觀，又方便。

這就是 Dreamweaver CC 2018 相比于傳統(tǒng)的手寫 CSS 文件而言帶給我們的便捷性。而且從程序開發(fā)的角度講，這樣設(shè)計(jì)的軟件對于程序來說也易于維護(hù)和查找。

對于使用過一段時(shí)間 Dreamweaver CC 2018 的人來說，能夠很容易地記起每一個(gè)功能大致所在的區(qū)域。長久以往，設(shè)計(jì)頁面就會(huì)變的飛快。也達(dá)到了我們使用 Dreamweaver CC 2018 的來提升頁面開發(fā)速度的初衷。

2. 設(shè)置ID

如何建立 ID CSS 樣式呢。在這一個(gè)知識點(diǎn)中，我們就將一起來了解一下如何利用 Dreamweaver CC 2018 來創(chuàng)建 ID CSS 樣式。

第一步：先建立一個(gè)空白的 HTML 頁面。關(guān)于如何建立空白 HTML 頁面同學(xué)們可以參考前面的章節(jié)。

第二步：我們要打開 CSS 設(shè)計(jì)器，如何打開 CSS 設(shè)計(jì)器請看本節(jié)第一個(gè)知識點(diǎn)。?

第三步：我們在 CSS 設(shè)計(jì)器中點(diǎn)擊源旁邊的 + 號，我們可以看到，點(diǎn)擊 + 后彈出的三個(gè)選項(xiàng)分別是：創(chuàng)建新的 CSS 文件，附加現(xiàn)有的 CSS 文件，在頁面中定義三個(gè)選項(xiàng)。我們需要選擇第三個(gè)在頁面中定義。選擇完后，我們可以對應(yīng)地看到頁面的代碼視圖中多了一組 style 標(biāo)簽。

第四步：我們在 CSS 設(shè)計(jì)器中選擇器那一行中點(diǎn)擊 +，然后輸入一個(gè) #+ 元素 id 。這里的元素 id 大家可以隨意起，總之就是你未來想要?jiǎng)?chuàng)建的 HTML 元素。在這里我們創(chuàng)建了一個(gè) #testelement 選擇器。如圖所示。創(chuàng)建完這個(gè)選擇器后我們可以看到，頁面中多了一點(diǎn)關(guān)于 #testelement 的代碼。

第五步：我們點(diǎn)擊這個(gè)剛剛創(chuàng)建好的選擇器 #testelement ，可以看到在它旁邊，彈出了屬性設(shè)置面板，我們可以參照本節(jié)第一個(gè)知識點(diǎn)中的方法，設(shè)置這個(gè)選擇器包含的屬性。我們可以在這個(gè)屬性面板中為這個(gè)選擇器設(shè)置關(guān)于布局，邊框，文本等類型的屬性。如圖所示：

第六步：我們在當(dāng)前的 HTML 頁面中插入一個(gè)元素，首先要把右側(cè)選項(xiàng)卡中的 CSS 設(shè)計(jì)器切換為插入，然后插入一個(gè) HTML 元素，這里我們以 div 元素為例。點(diǎn)擊 div 后，我們可以看到屏幕前彈出一個(gè)標(biāo)題為插入 Div 的對話框，如圖所示：

在這個(gè)對話框的 ID 一欄中我們點(diǎn)擊下拉箭頭，可以發(fā)現(xiàn)我們剛剛創(chuàng)建的選擇器就在里面，這時(shí)我們選中我們剛剛創(chuàng)建的 ID 選擇器 #testelement ，點(diǎn)擊確定。就可以看到頁面中出現(xiàn)了一個(gè)按照我們剛剛設(shè)置好屬性的選擇器吻合的元素了。

3. 標(biāo)簽 CSS 樣式

這里的標(biāo)簽 CSS 樣式其實(shí)和剛剛學(xué)習(xí)的設(shè)置過程基本相同。只不過剛剛的元素是 ID選 擇器，這里是對 HTML 自有的元素如 body ，h 標(biāo)簽， a 標(biāo)簽進(jìn)行設(shè)置。大致過程和上一個(gè)知識點(diǎn)是一樣的。

首先，我們要打開一個(gè)空白頁面，然后新建源，然后點(diǎn)擊選擇器三個(gè)字附近的篩選，輸入 body ，然后點(diǎn)擊這個(gè) body 的選擇器，可以看到右側(cè)出現(xiàn)了很多屬性，我們就可以通過此項(xiàng)操作，為我們當(dāng)前頁面的 body 屬性做一些布局，文本方面的設(shè)置。這就是標(biāo)簽 CSS 樣式。如圖所示：

4. 復(fù)雜一點(diǎn)的復(fù)合CSS樣式

上面講述了如何利用 Dreamweaver CC 2018 設(shè)置基本的 ID 選擇器 和標(biāo)簽選擇器，那么有沒有更復(fù)雜一點(diǎn)的選擇器呢？答案當(dāng)然是有的，實(shí)際成熟的商業(yè)網(wǎng)站中還有很多選擇器的高級用法。我們在這里做一些簡要的介紹。

4.1 什么是復(fù)合 CSS 樣式？

這就要說到，如果一個(gè)頁面中同一種選擇器有很多種，比如有很多個(gè) a 標(biāo)簽選擇器，我想要精準(zhǔn)的控制多個(gè) a 標(biāo)簽中的某一個(gè) a 標(biāo)簽選擇器的屬性該怎么控制？

如果像上面的設(shè)置方法似乎設(shè)置了整個(gè)頁面的 a 標(biāo)簽的屬性。可以想到的發(fā)放肯定是先縮小范圍，先看看 a 標(biāo)簽在哪個(gè) div 或者父元素里。然后再進(jìn)一步設(shè)置。而所謂的復(fù)合 CSS 樣式，或者叫復(fù)合 CSS 選擇器就是來解決這個(gè)問題的。

4.2 在 Dreamweaver CC 2018 中設(shè)置復(fù)合選擇器

我們可以通過下面一張圖來說明：

在這個(gè)圖片中我們可以看到左側(cè) CSS 代碼，其中就有一些復(fù)合 CSS 選擇器，我們看右邊的 CSS 設(shè)計(jì)器，在選擇器三個(gè)字所包含的列表中，有很多選擇器，紅框中框起來的，就屬于復(fù)合 CSS 選擇器。

在 Dreamweaver CC 2018 中，我們只需要按照上述幾個(gè)知識點(diǎn)中的操作一樣，點(diǎn)擊要改動(dòng)的選擇器，然后在彈出的屬性面板中修改我們想要修改的屬性就可以啦，是不是很簡單？

Tips：在這里要和同學(xué)們強(qiáng)調(diào)一下。復(fù)合 CSS 選擇器也不能夠胡亂使用，假設(shè)元素很少的情況下，我們還是推薦你使用基本的 CSS 選擇器。

5. 小結(jié)

通過本節(jié)知識點(diǎn)的學(xué)習(xí)，同學(xué)們可以學(xué)習(xí)到如何利用 Dreamweaver CC 2018 來設(shè)置基本的 CSS 樣式，設(shè)置基本的 ID 選擇器，設(shè)置 CSS 標(biāo)簽選擇器，以及一些高級的復(fù)雜的選擇器。本節(jié)涉及的操作比較多，希望大家瀏覽完之后能夠自己多多練習(xí)幾遍，只有多多練習(xí)才能達(dá)到發(fā)揮 Dreamweaver CC 2018 工具性的目的。

本節(jié)的重點(diǎn)是：學(xué)會(huì)用 Dreamweaver CC 2018 創(chuàng)建基本的 CSS 選擇器；
本節(jié)的難點(diǎn)是：靈活使用復(fù)雜的CSS樣式。