CSS基礎

4個步驟認識CSS基礎操作與選擇器

CSS是程式語言嗎?

不是喔,CSS是風格頁面語言(style sheet language),全名是 「 Cascading Stylesheets 」 ,中文翻譯為「階層樣式表」,要讓網頁變漂亮、吸引人,呈現你期望的排版、樣式,使用CSS就對了!

CSS的功能就是以各種樣式來美化網頁,就好像你有了一間未裝潢新成屋,網頁想要變美,就需要找CSS來裝潢。

學CSS便是要學習怎麼讓CSS與HTML搭配,用CSS裝潢網頁,製作出美觀頁面。所以學習CSS前你需要有HTML的基礎,因為每個要被美化的東西都是HTML標籤,看不懂HTML就要先學CSS你會覺得很混亂,甚至根本就看不懂。

還不懂HTML?想要瞭解或喚起對HTML的記憶,可以閱讀《Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構》、《15個常用的HTML標籤與屬性基本介紹》這兩篇文章。

本文以4個步驟說明CSS基礎,在瞭解CSS如何與HTML搭配後,接著說明CSS的語法規則、屬性,讓你學會CSS基本操作,並認識CSS選擇器是什麼。

CSS階層樣式表,到底是什麼意思?

在進入正題前,我們先來看一下CSS字面的意思,如果想直接瞭解怎麼使用CSS,可以利用快速閱讀的目錄,點選你有興趣的項目,轉跳到相對應的位置。

CSS的全名是Cascading Stylesheets,階層樣式表的意思,stylesheets是樣式表很好理解(style+sheets),畢竟CSS主要的功能就是用各種樣式來美化網頁,但Cascading是什麼意思呢?

在字典查詢cascade這個單字的意思,cascade代表一連串的東西或是小瀑布,Cascading則代表層疊,又是一連串東西的意思,又有層層疊疊的含義,讓人摸不著頭緒。

關於這個問題,程式設計界的問答網站stackoverflow上,有人這麼回答CSS中的cascading是什麼意思:

網頁頁面通常都會有多個樣式表來提供網頁的樣式,瀏覽器會依照CSS的層級、權重來決定優先使用那個樣式表中的樣式,指定的越明確的樣式,越容易勝出,得以將樣式呈現在頁面上。

於是乎,多個樣式表就像是被賦予了層級一樣,層級高的樣式呈顯在網頁上,層級低的則會被取代,形同有cascading疊層的概念,層級高的會把層級低的疊過去,讓你只看到層級高的樣式。

source:stackoverflow

稍微瞭解一下CSS字面上的意思後,進入主題,CSS究竟是怎麼讓網頁變得多采多姿?四個步驟讓你擁有CSS的基本功。

步驟一:瞭解CSS怎麼跟HTML搭配

首先,你必須認清一個事實,那就是,雖然HTML與CSS總是要一起合作才可以建立起一個漂亮的網站,但他們兩個還是各自獨立的,要讓他們合作,你得設法讓HTML與CSS有合作的管道。

常見的合作管道有3個,換句話說,要在HTML上加上CSS,有3種常見方法讓你使用:

  1. 行內CSS(inline CSS)
    在每個HTML標籤中,使用style屬性,直接加入CSS
  2. 內部CSS(internal CSS)
    在HTML檔案的<head>中加入<style>標籤來編寫CSS
  3. 外部CSS(external CSS)
    將CSS寫在另一個檔案,再把這個CSS檔案與HTML連結起來

這3個方法都可以讓你利用網頁來美化網站,哪一種方法比較好呢?

實務上來說第3種方式-將CSS寫在另一個檔案,是網頁開發主要採用的方法。HTML與CSS分別寫在不同檔案,透由連結檔案,以呈現你所要的網頁美化效果。第3種方法有利於管理網頁的樣式,不過不方便初學者理解CSS,因為一下子有太多新的東西要學習,容易混淆。

初學者剛開始接觸CSS,使用第1種方法認識CSS,直接在你要增加樣式的HTML標籤中加入樣式,是最直觀也易於理解的。

接下來便先以直接在HTML標籤使用style屬性的方式,來說明CSS是如何美化網頁,怎樣來給HTML加上各種樣式。瞭解基本的CSS操作規則後,再說明內部CSS、外部CSS是什麼,讓你瞭解差異在哪,以及為何外部CSS是網頁開發的主要作法。

步驟二:在HTML標籤的style屬性添加CSS

初學CSS,先來弄懂他做基本的運作方式,釐清一堆混淆你學習CSS的符號與規則,有助於你再深入CSS的各種操作。接下來我們就單純以與文字相關的樣式來說明CSS,以簡單的例子,建立為網頁添加CSS的概念。

CSS主要用來美化HTML標籤,讓網頁上的內容可以有個好看的樣子,假如現在網頁上你只要放上一行字,learning CSS,你可以怎麼美化它呢?

換個情境,如果現在只是在上美術課,你的作業是把learning CSS這幾個字做美化,你會怎麼做?

你可能會幫文字上個顏色、加個底色,或者是改變字型、改變字體大小,又或者你還會讓字距寬度改變,讓每個字母都間隔1公分,展現出你覺得最好看的樣子。

現實生活中拿畫筆美化文字的方式,如果轉換到網頁文字的美化上,你該怎麼取得畫筆,又該如何揮撒畫筆設計出你想要的文字? 答案是以瀏覽器看得懂的CSS,讓瀏覽器幫你呈現想要的顏色、字型或字體。

首先,你要先讓瀏覽器呈現learning CSS這幾個字,使用HTML的p標籤,你成功地寫下learning CSS。

<p>learning CSS</p>

See the Pen learingCSS by Ory (@SLSuccess) on CodePen.

接著,使用HTML標籤的style屬性來加入CSS。

HTML標籤的屬性使用方式是,在開頭標籤(opening tag)內,填入屬性名稱,並以等號及引號來帶入你要的屬性(attribute)內容。

下方簡單的說明 HTML標籤的屬性使用規則:

屬性名稱 = "屬性的值"

以英文來看HTML屬性使用方式:

attribute name = "attribute value"

忘記HTML屬性( attribute )是什麼? 讓《標籤屬性介紹 》幫你再釐清。

簡單的看過 HTML標籤的屬性 ,如果現在你要在p標籤中使用style屬性(attribute),首先你要在開頭標籤寫上style這個屬性名稱,接著再寫上等號,等號後面寫上引號,單引號或雙引號都可以。引號內,就可以來填入你要的CSS樣式了。

<p style=" ">learning CSS</p>

步驟三:CSS基礎操作,使用8個常見的CSS屬性

想在網頁呈現出一個CSS樣式,你需要寫下一個宣告(Declaration),告訴瀏覽器這邊的內容你要做什麼樣子的美化。CSS宣告是這麼寫的:

CSS屬性名稱:CSS屬性的值;

以英文來說明的話,會是這樣:

property name : property value;

一個CSS宣告包括了以下四個要素:

  1. CSS屬性名稱
  2. 冒號 :
  3. CSS屬性值
  4. 分號 ;

一個CSS宣告中會有兩個符號,冒號引導出CSS屬性(property)的內容,分號則作為不同的宣告之間的區隔。

這與HTML屬性(attribute)的操作方式不同,HTML 屬性(attribute) 是以等號來帶出屬性的值,並且要把值放在引號內,不同屬性則以空格作區隔。

兩個都稱為屬性的東西,也許頗為混淆,你可以試著從英文來看,CSS屬性英文是property,HTML屬性則是attribute。把CSS和HTML分開看,以兩種規則書寫各自的語法,便不會被各種符號給混淆了。

瞭解CSS宣告的使用規則後,讓我們用以下8個常見的屬性,幫助你熟習CSS的基本操作。

改變文字顏色,color屬性

當你想改變文字的顏色,需要使用的屬性名稱是color,在冒號後方再填入你要的顏色,也就是要賦予給color這個屬性的值,填入顏色便可以讓文字顯現出你要的顏色。

See the Pen CSS基礎-文字樣式 by Ory (@SLSuccess) on CodePen.

加上底色,background-color屬性

為learning CSS填上紅色後,你想再幫文字加個底色,你可以使用background-color這個屬性,不同的CSS宣告之間,要以分號隔開。

See the Pen by Ory (@SLSuccess) on CodePen.

改變字型,font-family屬性

如果你不想針對顏色來美化文字,只想改變文字的字型,你需要font-family屬性,font是字型的意思,font-family這個屬性可以讓你改變文字的字型。

<p style="font-family:Arial;">learning CSS</p>

改變字體大小,font-size屬性

希望文字大小可以做調整,使用font-size屬性,並在屬性質的地方填入你需要的字體大小。

<p style="font-size:50px;">learning CSS</p>

改變字體粗細,font-weight屬性

<p style="font-weight:800;">learning CSS</p>

調整字距,letter-spacing屬性

<p style="letter-spacing:10px;">learning CSS</p>

調整行距,line-height屬性

<p style="line-height:50px;">learning CSS</p>

使文字置中,text-align屬性

<p style="text-align:center;">learning CSS</p>

你可以在編輯器上試試改變文字樣式的成果,會讓你對CSS樣式的語法更有印象。

認識了8個CSS屬性後,對CSS宣告的寫法漸漸熟悉了,知道CSS語法,當你想對網頁的內容做什麼樣的美化,就去找出相對應的CSS屬性,填入符合你需要的屬性值,在像範例所提的單純的情況下,基本上就可以達到你期望的效果。

不過,假如你設計的樣式屬性很多,像是要把前面所提到的8個屬性一次派上用場,將8個CSS宣告一次填入HTML標籤中,你的HTML結構會變得很龐雜,不易閱讀,也很難管理,每個標籤你都要寫一個樣式,你會累慘的。

See the Pen 8 CSS properties by Ory (@SLSuccess) on CodePen.

所以為了利於樣式編輯、管理與閱讀,實務上HTML與CSS會分開寫,也就是本文開頭提到的第2、第3種方法,這兩種方法會需要瞭解什麼是選擇器(selector)。在瞭解選擇器前,先來看看使用一樣的樣式,但不同的CSS連結方式,差異在哪?

  • 內部CSS(internal CSS)
    在HTML檔案的<head>中加入<style>標籤來編寫CSS
  • 下方的例子中,你可以看到我們在<head>標籤中,放了一個<style>標籤,並在裡頭寫了一樣了8個CSS屬性,呈現出來的結果也是一樣的。

    See the Pen internal CSS by Ory (@SLSuccess) on CodePen.

    當你將CSS屬性獨立出來,必須要提供一個選擇器,並將CSS寫再大括號{}內,記得,每個CSS屬性依然要用分號來區隔喔,通常為了便於閱讀,我們會將每個CSS屬性獨立成行。 大括號很重要 {} ,記得別把尾端的大括號遺漏了。

    讓HTML與CSS各自獨立,有個好處,就是你的CSS樣式可以重複使用。

    如果你現在要再寫一個段落,套用一樣的樣式,只需要使用一樣的選擇器,就可以使用一樣的樣式了。

    See the Pen by Ory (@SLSuccess) on CodePen.

  • 外部CSS(external CSS)
    將CSS寫在另一個檔案,再把這個CSS檔案與HTML連結起來
  • 使用這個方法,你需要在HTML的<head>標籤中,加入<link>標籤,將兩個檔案連接起來,HTML便會按照你提供在link標籤中的檔案路徑,把那個CSS檔案拿出來用。

    使用這兩個方法時,由於你將CSS與HTML標籤分開了,瀏覽器要怎麼知道你這個樣式是要給那個標籤,另一個樣式又是要給哪一個標籤呢?

    為了解決這個問題,便有了CSS 選擇器(selectors)。在選擇器的協助下,你就可以很明確的指定那一段文字要顯示紅色,哪一段文字要加上底色了。瀏覽器看到選擇器,便知道每個樣式要套用在網頁哪一個內容了。

    步驟四:認識CSS選擇器

    選選擇器是用來選擇HTML中,哪些內容要套上特定的樣式,這邊我們介紹3種選擇器作為新手入門CSS基礎,分別為:

    • 元素選擇器(element Selector)
    • 類別選擇器(class selector)
    • ID選擇器(ID selector)

    元素選擇器(element Selector)

    選擇器的英文是selector,就是選擇select這個字,加上or所形成的,元素選擇器其實也就是標籤選擇器,選擇的範疇是HTML標籤。

    element{
            CSS屬性名稱:屬性值;
    }
    

    前面說明內部CSS與外部CSS時,所使用的選擇器,就是元素選擇器,以HTML標籤名稱來指定樣式要套用在那些內容上。若以p標籤作為選擇器,網頁中所有的段落文字都要套用一樣的樣式。

    但當你想要段落文字有不同的樣式時,元素選擇器的功能就不太夠用了,這時你便可以使用類別選擇器(class selector),來指定某段文字要是什麼樣式。

    類別選擇器(class selector)

    .class{
           CSS屬性名稱:屬性值;
    }

    類別選擇器的英文是class selector,看到class,你也許會先想到是班級的意思,不過在CSS中,class是類別、種類的意思。

    類別選擇器的使用,與元素選擇器的原理相同,只是這個類別是什麼,需要你自己去訂一個類別名稱。

    同樣以p標籤的文字來舉例,現在你有兩個段落,你要以類別選擇器來使這兩個段落的文字不同,你完成兩件事,來促成類別選擇器發會功用,依照你的意思來美化段落文字。

    1.在p標籤的開頭標籤中,放上class屬性,並給訂一個方便你管理CSS樣式的類別名。

    2.在CSS樣式中,在類別名前面加一個點,以正確設置選擇器。

    下方的例子中,我們為p標籤設置了一個名為learning的類別,並在CSS中製作一個類別選擇器.learning.learning選擇器中的CSS樣式便會套用到有learning類別的標籤中。

    ID選擇器(ID selector)

    #ID{
        CSS屬性名稱:屬性值;
    }
    

    ID選擇器,顧名思義就是這個選擇器代表個一個身分,就如同每個身分證號碼,只會對應到一個人,在一個網頁中每個ID選擇器只能使用一次,也就是只能對應到一個HTML標籤。ID選擇器不像類別選擇器,可以多次使用,只能用在那個獨一無二的標籤上。

    使用ID選擇器,與類別選擇器相似,你需要在HTML標籤中放置ID屬性,並為ID屬性提供一個名稱,只是一個ID只能使用一次,不像class可以多次運用。

    在HTML放好ID後,接著到在CSS中,建立對應的ID選擇器。上圖的例子中,ID的名稱為learning,於是,ID選擇器便為#learning,在前面加上個#字號,就做成ID選擇器了,ID選擇器內的樣式就會套用到有對應ID的那一個標籤中,對,就是一個。

    以上便是CSS基礎知識的介紹,恭喜你,正式踏入CSS的魔幻殿堂!

    CSS可以讓網頁展現出各種吸睛的設計,瞭解CSS的基礎語法後,還有浩瀚的眾多屬性、權重、響應式語法等知識著你去探索。

    延伸閱讀:

    Python爬蟲必備的HTML概念,5個要點認識網頁的基本結構

    15個常用的HTML標籤與屬性基本介紹

    Leave a Comment

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *