網頁視覺樣式的魔法 - CSS

在講 CSS 之前先了解一件事情 HTML 元素主要被分為兩種: block element 或 inline element。

block element 特性

總是在新行開始

高度，行高以及頂和底邊距都可控制。寬度缺省是它的容器的100%，除非設定一個寬度。

inline element 特性

和其他元素在同一行

高度，行高及頂和底邊距不可改變。寬度就是它的文字或圖片的寬度，不可改變。

內聯元素只能容納文本或者其他內聯元素。

有了 block element 和 inline element 的基礎後再撰寫 HTML 搭配 CSS 時就能夠有相輔相成的效果。

block element
<div> - 常用塊級輕易，也是css layout的主要標簽
<dl> - 定義列表
<fieldset> - form控制組
<form> - 交互表單
<h1> ~ <h6> - 標題
<hr> - 水平分隔線
<ol> - 排序表單
<p> - 段落
<pre> - 格式化文本
<table> - 表格
<ul> - 非排序列表

inline element
<a> - 錨點abbr - 縮寫
<code> - 計算機代碼(在引用源碼的時候需要)
<em> - 強調
<img> - 圖片
<input> - 輸入框
<label> - 表格標簽
<select> - 項目選擇
<small> - 小字體文本
<span> - 常用內聯容器，定義文本內區塊
<strike> - 中劃線
<strong> - 粗體強調
<sub> - 下標
<sup> - 上標
<textarea> - 多行文本輸入框

image source: 天瓏網路書店