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