2015-06-08

HTML & CSS 學習筆記

這篇同樣也是筆者自己的學習心得。 不會做有系統的整理，只會記下筆者自己覺得重要的東西。 XD

版本

HTML: HTML5
CSS: CSS3

CSS

CSS (Cascading Style Sheets) 定義了一個瀏覽器應該如何去顯示 HTML 頁面。 透過 CSS 語法，我們可以設定每個 element 應該如何表示，包括字體 行距 顏色 padding margin 等等。

Pseudo Selector

除了最基本的 HTML TAG, Class, ID 這三種 selector 之外，還有一些特殊的 selector，像是 Pseudo-Class selector 以及 Pseudo-Element selector，這類的 selector 可以定義某些 element 在特定情形下的顯示方式。

基本的語法如下:

selector:pseudo-class {
    property:value;
}
selector::pseudo-element {
    property:value;
}

example:

/* unvisited link */
a:link { color: #FF0000; }

/* visited link */
a:visited { color: #00FF00; }

/* mouse over link */
a:hover { color: #FF00FF; }

/* selected link */
a:active { color: #0000FF; }

/* Select and style the first letter of every <p> element */
p::first-letter { 
    font-size: 200%;
    color: #8A2BE2;
}

更詳細的 Pseudo-Class selector 介紹可以參閱 w3c 的頁面。

CSS Box Model

一般來說，大部分的 HTML element，像是 <p>, <img>, 甚至 <div>，其 content 都是被一個方形的 border 包起來，形成一個抽象且分層的 Box Graph，border 往內至 content 的距離稱為 padding，往外延伸出去的距離稱為 margin。 每個 element，包含其 border 再往外的 margin 所佔有的空間，才是最後各 element 在排版時所考慮的排版單位。

有關各 element 的 content, border, padding, margin 的關係，可以簡單的用以下的圖表示:

css_box_model.svg

Position & Float

這些 Box 的位置安排方式，和 position, float 這兩個 attribute 有關。 這部份有點難消化理解，先放上 w3c 的連結備考。

一些設計範例

圓形 div 區塊

div.circle {
    position: relative;
    display: inline-block;
    height: 100px;
    width: 100px;
    border-radius: 100%;
    border: 2px solid black;
    text-align: center;
}

本文是以 Markdown(CommonMark) 撰寫，並採 CC BY-SA 4.0 方式分享。

Labels: