[程式] 在 codecademy 學習 HTML5, CSS – Content / CSS basic

前文,這篇繼續記錄在 codecademy 學習 HTML5, CSS 一些筆記。

  <h1>The Brown Bear</h1>
  <!-- A section that describes the brown bear -->
  <p>The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.</p>
  <a href="https://en.wikipedia.org/wiki/Brown_bear">Learn More</a>
  <p>Here are some bear species:</p>
  <ul>
    <li>Arctos</li>
    <li>Collarus</li>
    <li>Horribilis</li>
    <li>Nelsoni (extinct)</li>
  </ul>
  <p>The following countries have the largest populations of brown bears:</p>
  <ol>
    <li>Russia</li>
    <li>United States</li>
    <li>Canada</li>
  </ol>
  <a href="#" target="_blank">
    <img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" /></a>

一些標籤:

  • <p> : paragraph 文字片段
  • <!– 註解 –>
  • <h1> : headings 標題,共有 h1 ~ h6 可以使用,數字越大階級越小。
  • <ul> : unordered list  無序清單,<li> 內放內容。
  • <ol> : ordered list 有序清單,<li> 內放內容。
  • <a> : 超連結,後面需要 「href 屬性」指出連結的網頁。「target 屬性」可以指定新網頁要顯示在哪,比如用:target=”_blank” 可以在新分頁開啟連結。
    我們可以把任何物件變成連結,只要他被包在 <a> 中間。(如 <a ref=’some/web’> <img src=’image.jpg’ /> )
  • <img> :  image 加入圖片,不用 Closing tag,但尾端要加上 ‘/’ 。「src 屬性」是必須的,指出圖片從哪來。「alt 屬性」可以加入一段文字幫助視障者,讓軟體讀出圖片的內容,或是當載入圖片失敗時給一段說明。
  • <br /> : line break 換行符號

特性:

  • 因為閱讀器會忽略文件中的空白鍵,因此當段落文字要加入空白、換行等內容時,需要 <br />換行。
  • W3C 規則中建議網頁文件的階層為「空兩格」,在一般編輯器可設定 tab 等於兩格。

CSS – Cascading Style Sheets

在一般文件中可以使用 「style」標籤去增加文字顏色、字型等等。

  • CSS 可以直接寫在 HTML 文件內,不過必須放在 <style> 標籤之間,且置於 <head> 內。
  • 直接將 CSS 寫在 HTML 內容易造成維護困難(混合完全不同的語言),通常會將其獨立保持文件整潔易讀,文件副檔名為 .css 。
  • 在 <head> 區域中用 <link> 將 CSS 與 HTML 連結起來。「href」 表示 css 檔案位置;「type」設定為「text/css」;「rel」表示檔案與 HTML 文件的關係(relationship),這邊將其設定為「stylesheet」。

CSS 語法

  • CSS selector : 以下語法將選擇所有 HTML 中 <p> 標籤的內容:
    p {
    
    }

    基本上前方需完全符合 HTML 各項標籤。

    CSS 基本語法架構
    CSS 基本語法架構
  • * : Universal selector :選擇 HTML 中所有元素的意思。
  • /* commend */ : 增加註解。

 

請多多指教!

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料