Skip to content

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;
}
Tags:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。