4. CSS基本樣式

一、套用CSS

1. 行內樣式(In-Line)：寫在元素的style屬性內，影響單一標籤及其後代元素，如：<p style="color: red">文字</p>
2. 內部樣式(Internal)：寫在HTML檔內，只影響目前頁面，使用<style type="text/css"></style>，如： <style type="text/css" media="all"> @import url(other.css); /*以CSS語法匯入其他CSS檔*/ p { color: red; } /*元素選擇器*/ #myId {color: blue; margin:10px atuo;} /*ID選擇器*/ .myClass { background: #f00 url(background.gif) no-repeat fixed 0 0; } /*類別選擇器*/ @media print{ /*在列印時，段落的字顏色顯示為黑色*/ p {color: black;} } </style>
3. 外部樣式(External)：讀入外部css檔，可讓多個頁面共用相同樣式，如：<link rel="stylesheet" type="text/css" href="style.css" media="all" />
4. CSS內的註解格式： /* 這是註解 */
5. 優先屬性 !important ：如有相同屬性設定，會不管前後順序，以!important為優先p { color: blue !important; /*會以此優先，以下有相同屬性設定皆會忽略，但IE6不懂什麼叫"重要"*/ color: red; /*因為有"重要"， FF、Chrome會忽略，只有IE6會執行*/ _color: yellow; /*FF、Chrome會當成註解跳過，只有IE6會執行*/ #color: orange; /*FF、Chrome會當成註解跳過，只有IE6會執行*/ *color: green; /*FF、Chrome因無此屬性會跳過，只有IE6會執行*/ } 想一想：如果外部樣式跟行內樣式都有important，那最後會套用哪個呢？

二、元素選擇器 (Selector)

1. 標籤選擇器：找尋如<p>、<table>、<img>等，會影響所有有該標籤的元素。
2. 類別選擇器： 找尋使用某class屬性的元素 ，如<p class="myClass">，CSS語法為「.類別」。
3. ID選擇器：找尋使用某id屬性的元素 (唯一值)，如<p id="myId">，CSS語法為「#名稱」。
4. 整理如下：
   

   選擇器	元素寫法	CSS語法
   標籤選擇器	<p>	p {屬性樣式1:值1; 屬性樣式2:值2;}
   類別選擇器	<p class="myClass">	.myClass {屬性樣式1:值1; 屬性樣式2:值2;}
   ID選擇器	<p id="myId">	#myId {屬性樣式1:值1; 屬性樣式2:值2;}

5. 尚有通用選擇器(*)、屬性選擇器 等(attribute)，可參考 CSS Selector。

三、單位

1. 相對單位
   • em : 相對於目前字型大小的比例， 1em = 16px, 2em = 32px 。(16px為瀏覽器預設的字型大小)
   • ex : 相對於目前字母高度的比例。
   • % : 相對於父元素的長度或大小百分比。
2. 絕對單位
   • px : 像素 16px = 100% = 1em
   • 文件列印的單位：pt (points), pc (picas), in (英吋), cm (公分), mm (公厘)
   • 12pt =1pc = 0.17in = 0.43cm = 4.3mm，1in = 6pc = 72dpi = 2.54cm =25.4mm
   • 網頁列印通常預設為72dpi，而螢幕在最適解析度時，通常為72dpi 或 96dpi，可參考 DPI Calculator
3. 字型大小範例

四、文字樣式

1. font-style 字態：normal 正常、italic 斜體、oblique (類似斜體)。
2. font-variant 小型大寫： normal 正常、small-caps 小型大寫(字母是大寫，但字體的大小跟小寫一樣)
3. font-weight 字體厚度：bold 厚 、bolder 更厚、normal 正常、100~900
4. font-size 文字大小：單位通常以 em、%、px為主，通常會先在 body 設置 % 大小，之後的元素用 em來設定。
5. line-height 行高
6. font-family 字型：如 "Times New Roman", Times, serif 。(字型名稱有空格時需以「"」括起來)
7. 簡寫形式： font: italic smapp-caps bold 1em/1.5 "Times New Roman", Times, serif
8. color 文字顏色
9. text-align 文字對齊：center 置中、right 靠右、left 靠左、justify 左右對齊
10. text-decoration 文字修飾：none 無修飾、overline 上劃線、line-through 刪節線、underline 底線
11. text-transform 單字型態：uppercase 字母大寫、lowercase 字母小寫、capitalize 單字首字大寫
12. text-indent 首行縮排：如 2em 便是縮排二個字的大小。

五、列表樣式

1. list-style-type ：
   • <ul>：none 無、disc 實心圓 (預設)、circle 空心圓、square 方形 (範例)
   • <ol>：none 無、decimal 數字(預設)、其它
2. list-style-position：inside 內容框內、outside 內容框外，範例
3. list-style-image：指定項目圖示 url(item.gif)，範例
4. 簡寫形式：list-style: square inside url(item.gif);

五、表格可設定的樣式

1. td, th 的 border 邊框： 1px solid black = 1像素寬(border-width)、實心 (border-style 邊框樣式)、黑色(border-color)
2. table 的 border-collapse 邊框重疊： collapse 重疊、seperate 分離
3. table, td 的 width 寬、height 高
4. td 的內部留白 padding
5. text-align 文字水平對齊、vertical-align 重直對齊
6. background-color 背景色，background-image 背景圖，background-repeat 背景圖重複方式，background-attachment 附著方式，background-position 背景圖起始位置。
   簡寫形式： background: #f00 url(background.gif) no-repeat fixed left top

六、常用的CSS屬性一覽表PDF下載 (by Tad)