我會在這裡分享我的學習旅程,包括學了什麼以及有什麼特別的得著。
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;
}
HTML: 展示資訊的Table
在網站上,我們經常都會用到table來展示不同的資訊。想要使用table,我們可以透過:
<table></table>
想要在table上展示數據,我們可以透過:table row。table row是指在table上的每一個欄。
<table>
<tr>欄1</tr>
<tr>欄2</tr>
<tr>欄3<tr>
</table>
在每一欄上,我們可以加入<td>,<td>是指table data,我們把數據加入到每一欄之上。
<table>
<tr>
<td>Isaac</td>
<td>創業</td>
</tr>
<tr>
<td><td>
</tr>
</table>
有時候,我們需要在每一個table上加入標題,以識別該欄位關於什麼。我們可以透過<th></th>並在裡面加入attribute scope=”row/”col”以識別這個標題是row的標題還是column的標題。
<table>
<tr>
<td scope='col'>名稱</td>
<td scope='col'>職業</td>
</tr>
<tr>
<td>Isaac<td>
<td>創業家<td>
</tr>
</table>
有時候,某些欄位會橫跨數個cell,例如:日歷中,我們可能會有數個小時進行會議。這樣,會議便會霸佔數個欄位。我們可以透過colspan=”2″ 這個attribute去實現目標。
<table>
<tr>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td style='text-align: center;' colspan='2'>Demo Day</td>
<td>Back in Town</td>
</tr>
</table>

table會以上面的形式展示。同樣原理也可以用在row之上。只需使用在<td>加上<td rowspan=’2’></td>即可。
想把資訊弄得更整理,可以透過<thead>以及<tfoot>來使數據展示變得更有序。
<thead>
<tr>
<th>Quarter</th>
<th>Revenue</th>
<th>Costs</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Total</th>
<td>$22M</td>
<td>$12.5M</td>
</tr>
</tfoot>
HTML:連結到其他網站
連結到其他網站的例子有:用戶點擊按鈕並到達另一個網頁。我們可以透過:anchor element <a>來實現連結到其他網站的目標。
<a href="https://www.wikipedia.org/"> 點擊這裡</a>
在<a>裡加入target這個attribute,我們可以決定點擊行為模式,例如在頁面內跳轉還是開啓新分頁。
<a href="https://www.wikipedia.org/" target="_blank"> </a>
以上程式碼代表點擊時開啓新分頁。
另外,除了使用外在連結外,也可以使用「內在連結」,把<a>連結到網站的內在部分。例如:
<a href='./about-me.html'>About Me</a>
這代表內在網站之間的跳轉。
HTML的第一句
所有HTMl的第一句句子都是以:
<!DOCTYPE html>
這定義了這個File為HTML File。
在<!DOCTYPE html>之下,可以開始加入HTML的資訊。
<!DOCTYPE html>
<html>
/*在這裡加入HTML */
</html>
在<htmL>之下,可以加入<head>tag,這可以告訴Browser這個網站大概關於什麼。例如加上網站標題
<!DOCTYPE html>
<html>
<head>
<title>Growwithisaac之路</title>
</head>
</html>
HTML: Video 如何在網站顯示影片
跟<img>相似,想在網站上顯示影片,可以使用<video>tag。
<video src ="https://content.codecademy.com/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4" controls>
</video>
如果想控制Video的大小,可以在html裡加入:width和Height attributes。謹記,當使用<video>時要加入controls這個attribute以提醒Browser加入一個基本播放器。
HTML:IMG 如何在網站展示圖片
<img>是另一個非常常見的HTML原素。它可以用作展示圖片。
<img src ="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg"/>
如何上傳圖片以取得連結?
透過把圖片上傳到某些網站(如Google Drive)並獲得相關的公開連結,就可以得到以上的SRC頁面。
如果圖片無法顯示,可以怎樣處理?
在<img>中,我們可以透過加入<alt>以應付未知的圖片問題。
<alt>可以:
- 當圖片無法顯示時作為輔助
- 讓眼睛不方便的訪客在無法看見圖片的情況下也能讀到內容
- 幫助Google的網站Spider,讓Spider了解網站關於什麼,幫助Google為網站排序
使用<alt>的方法如下:
<img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="This is alt message" />