CSS 進階知識學習

在這一節(jié)知識點中，我們將帶領大家進一步學習CSS的相關知識。從之前的初級 CSS 知識中我們了解到了 CSS 的一般使用的幾個點。這一次我們來學習一些更加核心，更加重要的CSS知識點。

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

1. CSS 樣式學習

在這一部分中，我們主要學習如何利用 Dreamweaver CC 2018 來設置頁面中的 CSS 樣式。

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

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

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

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

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

2. 設置ID

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

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

第二步：我們要打開 CSS 設計器，如何打開 CSS 設計器請看本節(jié)第一個知識點。?

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

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

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

第六步：我們在當前的 HTML 頁面中插入一個元素，首先要把右側選項卡中的 CSS 設計器切換為插入，然后插入一個 HTML 元素，這里我們以 div 元素為例。點擊 div 后，我們可以看到屏幕前彈出一個標題為插入 Div 的對話框，如圖所示：

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

3. 標簽 CSS 樣式

這里的標簽 CSS 樣式其實和剛剛學習的設置過程基本相同。只不過剛剛的元素是 ID選 擇器，這里是對 HTML 自有的元素如 body ，h 標簽， a 標簽進行設置。大致過程和上一個知識點是一樣的。

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

4. 復雜一點的復合CSS樣式

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

4.1 什么是復合 CSS 樣式？

這就要說到，如果一個頁面中同一種選擇器有很多種，比如有很多個 a 標簽選擇器，我想要精準的控制多個 a 標簽中的某一個 a 標簽選擇器的屬性該怎么控制？

如果像上面的設置方法似乎設置了整個頁面的 a 標簽的屬性?？梢韵氲降陌l(fā)放肯定是先縮小范圍，先看看 a 標簽在哪個 div 或者父元素里。然后再進一步設置。而所謂的復合 CSS 樣式，或者叫復合 CSS 選擇器就是來解決這個問題的。

4.2 在 Dreamweaver CC 2018 中設置復合選擇器

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

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

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

Tips：在這里要和同學們強調一下。復合 CSS 選擇器也不能夠胡亂使用，假設元素很少的情況下，我們還是推薦你使用基本的 CSS 選擇器。

5. 小結

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

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