Skip to content

Isaac Full-Stack Engineer之路

我會在這裡分享我的學習旅程,包括學了什麼以及有什麼特別的得著。

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>可以:

  1. 當圖片無法顯示時作為輔助
  2. 讓眼睛不方便的訪客在無法看見圖片的情況下也能讀到內容
  3. 幫助Google的網站Spider,讓Spider了解網站關於什麼,幫助Google為網站排序

使用<alt>的方法如下:

    <img src="https://content.codecademy.com/courses/web-101/web101-image_brownbear.jpg" alt="This is alt message" />