CSS基礎

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

網頁開發, CSS / 發佈留言 /

更新日期: 2022 年 11 月 14 日

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的基礎語法後，還有浩瀚的眾多屬性、權重、響應式語法等知識著你去探索。

    延伸閱讀:

    更多文章

    發佈留言

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