絕對單位有
- in - 英吋
- cm - 公分
- mm - 公釐
- pt - 點, 1/72in
- pc - 活字,12pt
- px - 畫素
舉例如下
div.in { font-size: 1in; } div.cm { font-size: 1cm; } div.mm { font-size: 1mm; } div.pt { font-size: 1pt; } div.pt { font-size: 1pc; } div.px { font-size: 1px; } /* 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:demo14.css 功能:示範 CSS 2.1 樣式表的使用 作者:張凱慶 時間:西元 2011 年 7 月 */
我們以下面的 HTML 文件載入
<html> <head> <title>網頁標題</title> <link rel="stylesheet" type="text/css" href="demo14.css"> </head> <body> <div class="in">in: There is no spoon.</div> <div class="cm">cm: There is no spoon.</div> <div class="mm">mm: There is no spoon.</div> <div class="pt">pt: There is no spoon.</div> <div class="pc">pc: There is no spoon.</div> <div class="px">px: There is no spoon.</div> </body> </html> <!-- 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:demo14.html 功能:示範 CSS 2.1 樣式表的使用 作者:張凱慶 時間:西元 2011 年 7 月 -->
瀏覽器 (broswer) 開啟如下
相對單位有
- em - 字型預設大小
- ex - x-height值
舉例如下
div.em { font-size: 1em; } div.ex { font-size: 1ex; } /* 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:demo15.css 功能:示範 CSS 2.1 樣式表的使用 作者:張凱慶 時間:西元 2011 年 7 月 */
我們以下面的 HTML 文件載入
<html> <head> <title>網頁標題</title> <link rel="stylesheet" type="text/css" href="demo15.css"> </head> <body> <div class="em">em: There is no spoon.</div> <div class="ex">ex: There is no spoon.</div> </body> </html> <!-- 《程式語言教學誌》的範例程式 http://pydoing.blogspot.com/ 檔名:demo15.html 功能:示範 CSS 2.1 樣式表的使用 作者:張凱慶 時間:西元 2011 年 7 月 -->
瀏覽器開啟如下
中英文術語對照 | |
---|---|
絕對單位 | absolute unit |
相對單位 | relative unit |
瀏覽器 | broswer |
您可以繼續參考
基本概念
單位
選取器
@import 規則
階層
元素呈現方式 display
相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁
參考資料
http://www.w3.org/TR/CSS21/about.html
http://www.w3.org/TR/CSS21/syndata.html
沒有留言:
張貼留言