網羅的世界

HTML / CSS

qbane@NTUOSC 2015/10/2

HTML是一種標記語言

「標記語言?」

超文件標示語言(英文:HyperText Markup Language,HTML)是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言。HTML被用來結構化資訊——例如標題、段落和清單等等,...

純文字太沒意思了

那要怎麼加格式呢?

超文件標示語言英文HyperText Markup LanguageHTML)是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言。HTML被用來結構化資訊——例如標題、段落和清單等等,

標記之前

超文件標示語言(英文:HyperText Markup Language,HTML)是為「網頁建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言。HTML被用來結構化資訊——例如標題、段落和清單等等,

標記之後

<p>
<strong>
超文件標示語言</strong>(英文:<strong>HyperText Markup Language</strong>,HTML)是為「<a href="...">網頁</a>建立和其它可在網頁瀏覽器中看到的資訊」設計的一種標示語言。HTML被用來結構化資訊——例如標題、段落和清單等等,

</p>

所謂標記(markup)

  • 用「<...> </...>」來加上除了純文字以外的東西,像是
    • 提供資訊:宣告一些如標題、編碼、外部資源等
    • 構造網頁的結構
    • 加圖片!表格!...
    •  
  • 標籤開始: <標籤名稱 屬性="值">
  • 標籤結束: </標籤名稱>
  • 註解:<!-- 在裡面的內容不會被瀏覽器解釋 -->

<!DOCTYPE html>

<html>


<head> <!-- 這個網頁的頭 -->

    <title> 標題 </title>

    <meta charset="utf-8" /> <!-- 因為我們用漢字 -->

    <!-- 很常用的東東 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="./style.css" /> <!-- 連結CSS -->

</head>


<body> ... </body>

</html>

這樣的網頁好像有點單調

;_;

於是我們需要CSS

CSS = 階層樣式表

提供樣式

一層一層剝開你的心

CSS基本格式

選擇器 {
  樣式...
  更多樣式...
}

 

每個樣式由 屬性的名稱: 屬性的值; 為一組

值有可能是長度、數字、顏色等等

 

選擇器

  • 聽起來好geek喔
  • 就是從HTML裡面,選擇要套用上格式的東西(們)
  • 比如
    • a { ... } : 選擇所有的<a>
    • .doge { ... } : 選擇所有有doge這個class的標籤們
    • #rs { ... } : 選擇rs這個id的標籤
      • 為什麼是這個,不是這些?
      • 因為rs只有一個
      • 因為HTML中,id必須是唯一的
      • (補充,CSS有容錯的機制...所以這樣可能還是可以work)

還可以層層疊疊

  • a b: a的後代中,符合b的
  • a>b: a的子節點中,符合b的
  • a+b: a的後繼元素中,符合b的

遊樂場

Have fun!

值得一玩:CSS手刻學生證

http://tinyurl.com/ntuoscid

/* Extra Slides */

Mentioned tags

  • <div> 無色無臭無毒的區塊元素
  • <p> 段落,最小的區塊元素
  • <h1> ~ <h6> 標題,也是區塊元素
  • <ol> <ul> 有序與無序列表
  • <li> 列表裡的項目
  • <pre> <code> 放code的區塊,會用等寬字元顯示
  • <a> 超連結
  • <img> 圖片

Mentioned attributes

  • 各標籤通用
    • id: 一個「名稱」,一份HTML中必須是唯一的
    • class: 一串「類別」,用空白隔開,如"foo bar baz"

 

  • 特定元素專有
    • <a href="..."></a> : 超連結所要指向的網址
    • <img src="..."></img>:圖片來源網址

Mentioned CSS Metrics

  • 長度單位
    • CSS像素 px (1 inch = 6 pc = 72 pt = 96 px)
    • 字寬 em, rem
    • 百分比 %
  • 盒子
    • (外)邊距 margin
    • 留白(內距) padding
  • 顏色
    • 色彩單字如red, blue, green, ...
    • 十六進位色碼
    • rgb, rgba (紅綠藍)

Mentioned CSS Styles

  • 基本的文字格式
    • 顏色 color
    • 大小 font-size
    • 字型 font-family
    • 字重 font-weight: 100
    • 斜體 font-style (有分傾斜跟義大利體
    • 裝飾線 text-decoration
      • 例如用來去掉超連結底線,underline是底線、none是沒有、line-through是刪除線
    • 文字對齊 text-align (最常用來置中!今天好像漏講了OAQ)
  • 定位 (position)
    • 絕對 absolute
    • 相對 relative
    • 固定 fixed
  • 背景 (background)
    • 圖 background-image
    • 顏色 background-color

Google大法

請找MDN裡的資料,可信度較高

不要相信w3Schools: http://www.w3fools.com/

下期預告

JavaScript

名片系統?!

 

請準時收看:0的轉移續集

(但願我可以早點做出來QQ)

網羅的世界

By Kuang-Lin Pan

網羅的世界

Basic HTML and CSS skills. Presented in NTUOSC.

  • 851