CSS 2.1 快速導覽 - HTML 4 元素的預設樣式表

HTML 4 元素 (element) 的預設樣式表 (style sheet) 如下

html, address, blockquote, body, dd, 
div, dl, dt, fieldset, form, frame, 
frameset, h1, h2, h3, h4, h5, h6, 
noframes, ol, p, ul, center, dir, 
hr, menu, pre { 
    display: block; 
    unicode-bidi: embed; 
}

li { 
    display: list-item; 
}

head { 
    display: none; 
}

table { 
    display: table; 
}

tr { 
    display: table-row;
}

thead { 
    display: table-header-group; 
}

tbody { 
    display: table-row-group;
}
tfoot { 
    display: table-footer-group; 
}

col { 
    display: table-column; 
}

colgroup { 
    display: table-column-group; 
}

td, th { 
    display: table-cell; 
}

caption { 
    display: table-caption; 
}

th { 
    font-weight: bolder; 
    text-align: center; 
}

caption { 
    text-align: center; 
}

body { 
    margin: 8px; 
}

h1 { 
    font-size: 2em; 
    margin: .67em 0; 
}

h2 { 
    font-size: 1.5em; 
    margin: .75em 0; 
}

h3 { 
    font-size: 1.17em; 
    margin: .83em 0; 
}

h4, p, blockquote, ul, fieldset, 
form, ol, dl, dir, menu { 
    margin: 1.12em 0; 
}

h5 { 
    font-size: .83em; 
    margin: 1.5em 0; 
}

h6 { 
    font-size: .75em; 
    margin: 1.67em 0; 
}

h1, h2, h3, h4, h5, h6, b, strong { 
    font-weight: bolder; 
}

blockquote { 
    margin-left: 40px; 
    margin-right: 40px; 
}

i, cite, em, var, address { 
    font-style: italic; 
}

pre, tt, code, kbd, samp { 
    font-family: monospace; 
}

pre { 
    white-space: pre; 
}

button, textarea, input, select { 
    display: inline-block; 
}

big { 
    font-size: 1.17em; 
}

small, sub, sup { 
    font-size: .83em; 
}

sub { 
    vertical-align: sub; 
}

sup { 
    vertical-align: super; 
}

table { 
    border-spacing: 2px; 
}

thead, tbody, tfoot { 
    vertical-align: middle; 
}

td, th, tr { 
    vertical-align: inherit; 
}

s, strike, del { 
    text-decoration: line-through; 
}

hr { 
    border: 1px inset; 
}

ol, ul, dir, menu, dd { 
    margin-left: 40px; 
}

ol { 
    list-style-type: decimal; 
}

ol ul, ul ol, ul ul, ol ol { 
    margin-top: 0; 
    margin-bottom: 0; 
}

u, ins { 
    text-decoration: underline; 
}

br:before { 
    content: "\A"; 
    white-space: pre-line; 
}

center { 
    text-align: center; 
}

:link, :visited { 
    text-decoration: underline 
}

:focus { 
    outline: thin dotted invert; 
}

BDO[DIR="ltr"] { 
    direction: ltr; 
    unicode-bidi: bidi-override; 
}

BDO[DIR="rtl"] { 
    direction: rtl; 
    unicode-bidi: bidi-override; 
}

*[DIR="ltr"] { 
    direction: ltr; 
    unicode-bidi: embed; 
}
*[DIR="rtl"] { 
    direction: rtl; 
    unicode-bidi: embed; 
}

@media print {
  h1 { 
    page-break-before: always; 
  }
  h1, h2, h3, h4, h5, h6 { 
    page-break-after: avoid; 
  }
  ul, ol, dl { page-break-before: avoid;
  }
}


例如六個標題
<html>
<head>
<title>網頁標題</title>
</head>
<body>
<h1>There is no spoon.</h1>
<h2>There is no spoon.</h2>
<h3>There is no spoon.</h3>
<h4>There is no spoon.</h4>
<h5>There is no spoon.</h5>
<h6>There is no spoon.</h6>
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：demo11.html
     功能：示範 CSS 2.1 樣式表的使用 
     作者：張凱慶
     時間：西元 2011 年 7 月 -->


瀏覽器 (broswer) 開啟如下



有關 HTML 4 各個元素的介紹，可參考本站的《HTML 4.01 快速導覽》 。


中英文術語對照
元素element
樣式表style sheet


您可以繼續參考

基本概念
單位
選取器
@import 規則
階層
元素呈現方式 display


相關目錄
CSS 2.1 快速導覽
HTML, CSS 教材
首頁


參考資料

http://www.w3.org/TR/CSS21/box.html
https://developer.mozilla.org/en/CSS/Getting_Started/Boxes
標籤： ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)