han-css

doctype html html(lang='zh-Hant').han-init head meta(charset='utf-8') title 測試・文章、章節與內容的邊界調整 — 漢字標準格式 link(rel='stylesheet', href='./han.min.css') style. html { overflow-x: hidden; } article { /* position */ margin: 0 auto; /* box */ max-width: 35em; padding: 0 .5em 15em; } article#example-article { /* box */ max-width: 30em; padding-bottom: 3em; /* style */ background-color: #f5f5f5; border-radius: .5em; } article#example-article h1, article#example-article h2, article#example-article h3, article#example-article h4, article#example-article h5, article#example-article h6, article#example-article ul, article#example-article ol, article#example-article p { border: 1px dotted #ccc; } meta(name='viewport' content='width=device-width, initial-scale=1.0') meta(name='description' content='印刷品般的漢字網頁排版框架') meta(name='keywords' content='漢字標準格式, 中文, 排版, 排版規範, 日文, 字體排印, 文字設計, CLReq, CSS, Sass, typography') body.test article h1 測試·文章、章節與內容的邊界調整 p.noti strong 提示： | 下方淺灰色區塊是文章章節的範例，建議使用瀏覽器的「元件檢閱器」來査閱各種群組元素在不同情境下的樣式。亦可伸縮視窗寬度來觀看專為行動裝置提供的彈性設計（<span lang='en'>responsive web design</span>），行動裝置預設為 em 480px以下 | 的視窗或設備。 article#example-article h1 文章標題（一級） p.example | 段落，也許是前言。上邊界對一級標題收緊。文章區塊的行高大於全域行高，預設為1.7em。 section.example h2 二級標題 p 這是一個段落，可以是對二級標題的內容詳述，上邊界對二級標題收緊。 p 這是另一個段落，可見上邊界不收緊了。 section#grouping-content h2 段落、清單、引用區塊等群組元素對標題的收緊 section.example h3 三級標題 blockquote p 這是一個引用區塊段落，可見上邊界對標題收緊；而三級標題則對二級標題收緊。 p 這是第二個引用區塊段落，可見上邊界不收緊了。 p | 在文章中的引用區塊，會縮進二個字元（行動裝置上縮進一字元），並使用楷體。 h3 三級標題 ol li 這是一個有序清單， li 可見上邊界對標題收緊。 ol li 這是另一個有序清單， li 可見上邊界不收緊了。 h3 三級標題 ul li 這是一個無序清單， li 可見上邊界對標題收緊。 section#poem-and-rule-for-well-knit h2 詩，與標題收緊規則 p | 總結成<em>詩</em>，琅琅上口： div.poem-like.example p | 小級標題對大級標題收緊、 br | 同級標題互相收緊； p | 大級標題 br | 不對小級標題收緊、 br | 一級標題 br | 不對一級標題收緊。 p | 上方描述規則的區塊是一個套用類詩篇類別<code>.poem-like</code>的分塊元素<code>div</code>。在任意情境下，其後代段落元素<code>p</code>縮進二字元；在行動裝置中，縮進一字元。 div.example h6 六級標題 h5 五級標題 h4 四級標題 h3 三級標題 h2 二級標題 h2 二級標題 h3 三級標題 h4 四級標題 h5 五級標題 h6 六級標題 div.example h1 一級標題 h1 一級標題 p 一級標題不會互相收緊。 section#descendant h3 後代章節元素不影響群組收緊 p 後代章節元素<code>section</code>不會影響各個群組元素對上級標題的收緊。 h3 比如說…… div.example h2 二級標題（在<code>section</code>下） section h2 二級標題（在<code>section</code>下） section h3 三級標題（在<code>section</code>下） section h4 四級標題（在<code>section</code>下） section p | 這是一個放在後代章節元素<code>section</code>中的段落，雖然和四級標題並非同輩，但仍然會對標題收緊。 section h4 四級標題（在<code>section</code>下） section h5 五級標題（在<code>section</code>下） section h6 六級標題（在<code>section</code>下） section#sibling h3 同輩章節元素則否 p 互為「同輩」的二個章節元素下的標題則不互相收緊。 div.example section#section-jia h2 二級標題（<code>section</code>甲） section#section-yi h2 二級標題（<code>section</code>乙，與甲同輩） section#section-bing h3 三級標題（<code>section</code>丙，與甲乙同輩） section#section-ding h4 四級標題（<code>section</code>丁，與甲乙丙同輩） section#section-wu h5 五級標題（<code>section</code>戊，與甲乙丙丁同輩） section#section-ji h6 六級標題（<code>section</code>己，與甲乙丙丁戊同輩） section#section-geng p 這是一個段落，屬於<code>section</code>庚，與甲乙丙丁戊己同輩。 // Here goes scripts script(src='./han.min.js')