[WebTech #63] CSS > 4. CSS 範例 > 4-3 排版相關語法
CSS 最早被發明的原因,就是用來把「排版」這件事,從 HTML 身上抽離,讓 HTML 能夠專心標記「文章結構」(標題、小標、段落...)。至於標題要用什麼字型、幾點字、是否對中...這些事,就統一交給 CSS 執行。
本篇將介紹 CSS3 排版相關語法的範例。透過了解這些範例,並參照下方的 CSS 參考手冊,相信您就能了解 CSS 排版語法的全貌了!
排版語法介紹: http://www.netmagazine.com/tutorials/master-new-css-layout-properties
一個複雜版面的範例: http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3
排列出「內縮」版型的範例: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/styling-simple-nested-comments-with-css/
多欄排列:
- 簡介: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/
- 範例: http://www.hongkiat.com/blog/css3-multi-columns/
文字框排列: http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/
最棒的 CSS Selector 或 Properties 線上參考手冊:
(進入後,Selector 在中央,Properties 在左下選單)
http://www.w3schools.com/cssref/css_selectors.asp
同時也有10000部Youtube影片,追蹤數超過2,910的網紅コバにゃんチャンネル,也在其Youtube影片中提到,...