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

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

一些標籤:

  • <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> 標籤的內容:

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

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

 


請多多指教!

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