本站電子書

您可以在這些電子書店找到本站電子書: Google Play 圖書iBooks StoreHyReadReadmooPubu
===>>>本站推出學習遊戲意見調查<<<===《如何自學程式設計》入選 Google Play 台灣地區2016年度最佳書籍

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

沒有留言: