在先前,我們有提到 HTML 與 CSS
為什麼會在網頁開發的技術中,分別獨立成不同的程式語言。
與 HTML 不同,CSS 是專門修改網頁內容「樣式」的程式語言,也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容,但你可以透過 HTML 新增網頁內容後,再使用CSS去修改他的樣式,例如:把文字大小改變、顏色改變等。
CSS 這門程式語言的全名叫做,Cascading style Sheets,是指「堆疊式的樣式表」,要實作一個好的CSS架構有幾個要素,分別為:
- HTML 元素
- CSS 選擇器
- HTML 類別
那麼究竟要如何透過 CSS 選擇器來改變 HTML 元素的樣式呢?
實作 CSS 選擇器
首先我們需要有已經存在的HTML元素才有辦法去更改他的樣式,然後我們會透過「CSS 選擇器」去選取到這個元素(HTML Element),並更改該選擇器裡面的樣式,如此一來就可以更改他的樣式了。
在範例中,我建立了一個<h1>標籤,這時候我想要把他的樣式從預設的黑色改成紅色的,於是我在 CSS 的面板中寫了一個h1,並在後面接著一組大括號,裡面填寫了我想要修改的樣式:color:red,並在後頭使用「;」半型的分號做為結尾。
這樣一來,我就成功的透過 CSS 選擇器來改變網頁內容的樣式了。
以上的示範,就是最簡單的 CSS 選擇器寫法,你可以發現,只要把原本 <h1> 標籤外面的小括號去除,並在後面接著一組大括號,裡頭加上你想要修改的樣式內容,這就是 CSS 的寫法了,是不是很簡單呢?
當然如果你想要該改的顏色,並不是編譯器預設的那種很簡單的顏色(像是黃色、藍色、綠色),而是想要有更豐富的效果,你也可以透過新增色票來更改文字的顏色。
以下我們來嘗試看看不同的樣式效果:
在這個範例中我建立了兩個 <p> 標籤,並使用相對應的 CSS 選擇器 p ,並在裡頭加入了 font-size: 100px,來將原本字體很小的p段落放大成 100px ,只要使用了該標籤的選擇器,那一類的標籤就會被套用到相同的 CSS 設定。
font-size 跟 color 一樣都是屬於css語言裡的屬性,不同的是,在 font-size 屬性中,不能直接填入數字或是文字直接更改文字的大小,而是要在數字後面加上px、em 或是 rem 等文字大小的單位。
但另外一個問題來了,如果我的網站上,同時有三個p段落,但是我想要三個段落的字體顏色、大小都不一樣怎麼辦?
CSS 選擇器搭配 HTML 類別
常見的 CSS 選擇器就跟 HTML 標籤一樣,有不同種的類型,除了有跟 HTML 標籤長得很像的選擇器外,我們也可以透過新增 HTML 類別(class),來幫同樣類型、甚至是不同類型的 HTML 標籤分組套用 CSS 設定。
我們來看看該如何幫 HTML 元素建立類別:
在為 HTML 元素建立類別時,需要在該起始標籤裡 加入 class= “” 的設定,而 HTML 的class設定,像很像 CSS 屬性一樣,屬於 HTML 元素特有的「屬性」。
在 class 裡的內容,我們可以填入想要命名的類別名稱,但這裡要注意的是,千萬不要取一些看不出這個類別是在陳述什麼的名稱,像是:color1,color2這種名稱,如果是需要與別人一起寫同一支程式時,大概是會被隊友殺掉的雷習慣。
所以在這裡我替第一個 p 元素,命名為 color-red ,這個 HTML 類別,也可以成為 CSS 選擇器的一種形式。
與標籤不同,當要把 HTML 類別變成一種CSS選擇器時,必須要在該名稱上加上半形的小數點「.」,並與標籤類型的選擇器一樣,在後面加上大括號,並填入想要更改樣式所對應的屬性值,就是另外一種CSS選擇器的應用。
接著我們可以來看另外一個較為複雜,但也都是用 HTML 及 CSS 選擇器所創造出來的網頁效果:
這是網頁常常會看到的直立式列表,非常常見,也可以透過CSS選擇器創造出不同的網頁效果。
還記得我在剛開始學網頁開發的時候,曾看過一篇文章說, HTML 與 CSS 是非常簡單的,如果想轉職當工程師,這部分並不需要去投入許多時間學習。
但我後來越學越深入後才發現,對於 CSS 選擇器熟悉度,代表操縱網頁元素的熟悉度。
甚至有些同學,在初學 HTML 或是 CSS 的部分時,會覺得很多細節不重要,就跳過不實作,跳來跳去,等到要寫 JavaScript 時就會發現自己連最基本的網頁欄位都切不出來。
今天的章節,主要是要讓初學者認識CSS選擇器,在之後的章節,才會與大家分享有關更多CSS常見的屬性類別,及搭配HTML元素實作不一樣的效果。
其他的網頁技術的問題,或是想要了解更多有關響應式開發的小技巧,歡迎你下方留言跟我討論與交流:)
希望今天的文章有幫助到正在閱讀的你,如果你喜歡我的文章的話,可以留下你的愛心或是收藏我的文章,也或者可以點選「贊助」,你的一杯咖啡絕對是我持續寫下去的動力!或是透過拍拍手,用你小小的行動支持我的創作!
我是Vivian,我們下次見。
關於網頁開發你可能會想知道:
關於我:
一名從英文系畢業的前端工程師,喜歡閱讀、寫東西及自我成長。
|聯絡我:vivian.enlife@gmail.com