CSS：如何令網頁更美麗

CSS跟HTML就像兄弟一樣，總是會連在一起。在HTML上加入相關的Class或ID，我們就可以在另一個位置撰寫程式令到HTML頁面更漂亮。

在html頁上，可以加入程式碼，讓html與style.css這個檔案連結。

<link href="style.css" rel="stylesheet">

事實上，即使沒有style.css，我們也可以在html上使用css。

<p style="text-color:black;"></p>

以上就是在html檔案上寫css的方法。然而，這樣會令到檔案資訊過多、太累贅，難以debug。

所以，我們可以在css上加入：

p {
   text-color:black; 
}

這樣，所有在html上的p（paragraph）都會變成黑色字。

為了讓CSS檔案生效，我們需要在html上加入css連結。加入css連結有兩個方法，一是透過內在，也就是如果css檔案跟html檔案在同一個資料夾：

<link href="style.css" rel="stylesheet">

另外就是透過在網絡上的css檔案。

<link href='https://www.codecademy.com/stylesheets/style.css' rel='stylesheet'>

Class

在CSS裡，如果我們想要修改一系列原素的話，可以透過修改Class來實現。

例如，想要改變所有段落的文字，在style.css檔案裡，可以：

p {
   color: yellow; 
}

另外，我們也可以透過在html原素裡加入id以更新該html的外觀。

<p class="testing">This is testing</p>

index.html

然黎在style.css，寫下：

.testing {
   color : yellow;
}

另外，一個html原素可以有多於一個class。使用方法如下：

<p class="test bold"></p>

ID

如果想要特定原素有一個獨特的外觀，可以透過ID。ID是一個獨一無二的數字/號碼組合。例子：

<p id="paragraph1"></p>

然後在CSS檔案裡：

#paragraph1{
   color: yellow;
}

在以上例子中，我們可以把paragraph1特別設定為黃色。

如果class和id同時都設定了同一個html，系統會優先展示id的設定。（因為id是一個「指名」的設定）

Attribute

如果想拍定修改html的attribute又不想建立新class或ID的話，可以透過以下方法：

<img src='/images/seasons/cold/winter.jpg'>

透過以下css語句，可以修改上述<img>

img[src*="winter"]{
   height: 50px;
}

假設在index.html裡有以下原素：

<a href='https://www.nationalgeographic.com/travel/destination/beijing' target='_blank'>Learn More</a>

    <a href='https://www.nationalgeographic.com/travel/destination/seoul' target='_blank'>Learn More</a>

<a href='https://www.nationalgeographic.com/travel/destination/florence' target='_blank'>Learn More</a>

透過以下css語句，可以把”beijing”這個<a>變成黃色：

a[href*='beijing']{
   color : yellow;
}

Pseudo-class

在html原素內有很多原同的其他原素。例如，當你mouse指到按鈕(hover)時，按鈕會出現顏色轉變，這就是「Pseudo Class」。以下方法可以把hover變成黃色。

style.css

a:hover{
   color: yello;
}

Chaining

有時候，不同的html可能會有不同的class，例如<p>和<h1>都可以有一個相同的class<testing>。如果想要修改<h1>，我們可以透過以下selector來實現：

h1.testing{
   color: blue;
}

這樣，我們就能修改h1的testing class而不是所有testing class。

另外，我們也可以修改在class裡面的某個html。這叫做Descendant Combinator。

.testing .h5 {
   color: yellow;
}

這樣就能修改testing class內的h5原素了。

Multiple Selectors

想指明某幾個html擁有相同的style，我們可以一次過設定數個html做相同的風格。

h5, li{
   font-family: monospace;
}