iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 1
7

關於網頁的組成

要講到CSS選取器的話,就必須了解一個網頁的組成,在現代的網頁設計中最基本都會擁有三大元素:HTML、CSS、JavaScript,而 CSS 就是負責其中視覺外觀的部分,通常會跟 HTML 以及 JavaScript 一起作用。

CSS選取器與其他技術的搭配

一個網頁的視覺通常會利用 CSS 來處理他的 HTML 視覺外觀,簡單的說,HTML 是將網頁資料標記出他的意義,而CSS則是將HTML標籤賦予外觀設定,分工其實非常的清楚,而搭配 JavaScript 的話,則可以讓網頁增加一些視覺互動功能,像是變更字體大小好讓畫面的閱讀更加輕鬆啦,或是做到頁籤區塊的切換。

CSS選取器的基本組成跟作用

CSS 在網頁中的運用,你可以將它視為一個「視覺外觀的設定檔」,或者可思考成一個「裝潢規劃表」,略過 inline-style 的話,在一個獨立的樣式區塊(註:<style>)或是CSS檔案中,他的語法結構大致會像下方這樣

header{
    width: 100%;
    text-align: center;
    font-size: 87px;
}

而翻譯成白話文的話就像下方這樣


你想設定的目標{
    要設定的項目1:設定的內容;
    要設定的項目2:設定的內容;
    要設定的項目3:設定的內容;
}

如果上面的概念能懂的話,我們可以再翻譯一次成下面這樣

選取目標{
    對目標設定1:設定的內容;
    對目標設定2:設定的內容;
    對目標設定3:設定的內容;
}

上述都能理解的話,我們就能切換到下面這種正規的講法了

選取器{
    屬性1:屬性的內容值;
    屬性2:屬性的內容值;
    屬性3:屬性的內容值;
}

經過三段的白話文翻譯,我想各位應該就能理解到,其實CSS選取器就是你想要設定的那個對象,至於為何會叫做選取器?基本上選取器的寫法有很多種,有時單層有時多層,但不管幾層都是為了選到你要設定的那個目標對象,所以我們使用「選取器」來稱呼會是比較好且正確的。

CSS選取器能做什麼?

CSS作為一個設定 HTML 頁面元素的強大存在來說,一個 HTML 頁面中的結構跟資料在現在越來越複雜,相對的 CSS 選取器也變得越來越多樣強大,好讓我們可以更加輕鬆的選取到我們想要設定的對象,簡單的分類的話,可以有以下幾種大項

  • Tag
  • class
  • ID
  • 屬性
  • 僞元素(虛擬元素)
  • 僞類別(虛擬類別)

而其中僞類別 Amos 又可以再將其細分成

  • 動態僞類別(:hover、:active...等)
  • 結構僞類別(:first-child、:last-child...等)
  • 迴圈僞類別(:nth-child、:nth-of-type...等)
  • 表單僞類別(:disabled、:enabled...等)

每一種選取器都有它特殊的用途,熟悉各式選取器的組合搭配運用,可說是一個網頁切版人員或前端工程師的基礎必備能力,像 Amos 目前就用的還不是很熟,覺得還有很多可以變化的技巧還在努力挖掘中,如果你也有跟我一樣的感覺的話,就跟著 Amos 一起在這個主題練習與成長吧!

金魚都能懂的教學系列

鐵人雙主題挑戰中,歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號,可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學
/images/emoticon/emoticon12.gif


下一篇
Tag 元素選取器 - 網頁中最常用到的基本設定選取器 - 金魚都能懂了你還怕學不會嗎
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

尚未有邦友留言

立即登入留言