Typography

標題

<h1><h6> 都能使用,並且有各自的字級、行高與間距。

h1. 這是 Lazy 的標題

2.25rem

h2. 這是 Lazy 的標題

1.875rem

h3. 這是 Lazy 的標題

1.5rem

h4. 這是 Lazy 的標題

1.25rem
h5. 這是 Lazy 的標題
1.125rem
h6. 這是 Lazy 的標題
1rem
<h1>h1. 這是 Lazy 的標題</h1>
<h2>h2. 這是 Lazy 的標題</h2>
<h3>h3. 這是 Lazy 的標題</h3>
<h4>h4. 這是 Lazy 的標題</h4>
<h5>h5. 這是 Lazy 的標題</h5>
<h6>h6. 這是 Lazy 的標題</h6>

副標題

副標題使用在 <h3><h6>,並且加上 .subheader

h3. 這是 Lazy 的副標題

1.5rem

h4. 這是 Lazy 的副標題

1.25rem
h5. 這是 Lazy 的副標題
1.125rem
h6. 這是 Lazy 的副標題
1rem

<h3 class="subheader">h3. 這是 Lazy 的標題</h3>
<h4 class="subheader">h4. 這是 Lazy 的標題</h4>
<h5 class="subheader">h5. 這是 Lazy 的標題</h5>
<h6 class="subheader">h6. 這是 Lazy 的標題</h6>

你也能將 <small> 放置到每個 Headings 之間,<h1><h4> 之間的 <small> 設置為 font-size: 80%;,而 <h5>h6 則為 font-size: 90%;。另外設置透明度為 0.6

h1. 這是 Lazy 的標題 我是 small

2.25rem

h2. 這是 Lazy 的標題 我是 small

1.875rem

h3. 這是 Lazy 的標題 我是 small

1.5rem

h4. 這是 Lazy 的標題 我是 small

1.25rem
h5. 這是 Lazy 的標題 我是 small
1.125rem
h6. 這是 Lazy 的標題 我是 small
1rem
<h1>h1. 這是 Lazy 的標題 <small>我是 small</small></h1>
<h2>h2. 這是 Lazy 的標題 <small>我是 small</small></h2>
<h3>h3. 這是 Lazy 的標題 <small>我是 small</small></h3>
<h4>h4. 這是 Lazy 的標題 <small>我是 small</small></h4>
<h5>h5. 這是 Lazy 的標題 <small>我是 small</small></h5>
<h6>h6. 這是 Lazy 的標題 <small>我是 small</small></h6>

內文段落

文件字級預設為 112.5%(18px),當螢幕寬度≥ 768px時,則改為 100%(16px),預設行高為 1.625。為了顧及舊瀏覽器,所有用到 font-size 皆另外設置Pixel為單位的字級。

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。人口分佈上,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,是亞洲主要都會圈之一。

<p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。人口分佈上,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,是亞洲主要都會圈之一。</p>

導引段落

用於文章開頭的導引。使用在段落上加上 .lead,其段落內容會加大 112.5%。

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。人口分佈上,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,是亞洲主要都會圈之一。

<p class="lead">臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。人口分佈上,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,是亞洲主要都會圈之一。</p>

首字放大

用於段落第一個字或字母做放大效果,在段落上加上 .drop-cap

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。人口分佈上,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,是亞洲主要都會圈之一。

<p class="drop-cap">臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。人口分佈上,超過七成集中於西部的五大都會區,其中以行政中心臺北為核心的臺北都會區最大,是亞洲主要都會圈之一。</p>

Phrases

小號本文

字級縮小約 12.5%,<small>

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。
<small>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。</small>

刪除本文

刪除段落中的文字樣式,<del>

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。
<del>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。</del>

插入本文

插入文字到段落中,<ins>

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。
<ins>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。</ins>

標示文字

標示段落中的某段文字,<mark>

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。
<mark>臺灣</mark>是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間。

上標與下標

標注上標 <sup> 與下標 <sub>

臺灣自然景觀與生態系資源相當豐富而多元[8]。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族[9],或分為原住民族、河洛人、客家人、外省人、新住民等5大族群。
臺灣自然景觀與生態系資源相當豐富而多元<sup>[8]</sup>。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族<sub>[9]</sub>,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群。

分隔線

<hr />

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼。


由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。

<p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼。</p>
<hr />
<p>由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。</p>
分隔雙線

<hr class="hr-double" />

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼。


由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。

<p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼。</p>
<hr class="hr-double" />
<p>由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。</p>
分隔留白

<hr class="hr-spacer" />

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼。


由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。

<p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼。</p>
<hr class="hr-spacer" />
<p>由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。現今人口約兩千三百萬,構成上以原住民族與漢族為兩大民族,或分為原住民族、河洛人、客家人、外省人、新住民等5大族群,其中河洛人為最大群體。</p>

引言

在文章中引用其他來源的內容。

預設樣式:

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。

維基百科
<blockquote>
    <p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。</p>
    <cite>維基百科</cite>
</blockquote>

引號樣式

<blockquote> 加上 .pull-quote

臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。

維基百科
<blockquote class="pull-quote">
    <p>臺灣是位於亞洲東部、太平洋西北側的島嶼,地處琉球群島與菲律賓群島之間,西隔臺灣海峽與歐亞大陸相望;面積約3.6萬平方公里, 為世界第38大島嶼,其中7成為山地與丘陵,平原則主要集中於西部沿海,地形海拔變化大。由於地處熱帶及亞熱帶氣候區之交界,自然景觀與生態系資源相當豐富而多元。</p>
    <cite>維基百科</cite>
</blockquote>

清單樣式

切版的過程中,<ol> , <ul> , <li> 是很常被使用的標籤,因此為了避免在開發過程中不斷的要清除這三個標籤的樣式,所以要使用這三個標籤於文章段落中時使用清單樣式,請在 <ol><ul> 標籤上加上 .kui-list

有序清單

有序清單指的是有序號排列的清單,<ol>

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
<ol class="kui-list">
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
    <li>Ordered list item</li>
</ol>

無序清單

無序清單指的是沒有序號但使用符號來排列的清單,<ul>

  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
<ul class="kui-list">
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>

無樣式清單

如果要消除序號或符號時,請在 .kui-list 上追加 .no-bullet

  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
<ul class="kui-list no-bullet">
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>

混合使用清單

  • Unordered list item
    1. Ordered list item
    2. Ordered list item
    3. Ordered list item
    4. Ordered list item
    5. Ordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
  • Unordered list item
<ul class="kui-list">
    <li>
        Unordered list item
        <ol>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
            <li>Ordered list item</li>
        </ol>
    </li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
    <li>Unordered list item</li>
</ul>

描述清單

描述清單會有一個描述名稱與描述內文,由 <dl> , <dt> , <dd> 三個標籤組成,其中<dt><dd> 必須放置於 <dl> 內。

預設樣式
自然地理
臺灣西與西北臨臺灣海峽,距歐亞大陸(主要距福建)海岸平均距離約200公里,臺灣海峽最窄之處為臺灣新竹縣到中國福建省平潭島,直線距離約130公里。
人文地理
包括臺灣與附屬的22座小島,以及臺灣海峽中澎湖群島的90座島嶼。目前臺灣約佔中華民國實際行政區域面積98%,其約位於東經120度至122度、北緯22度至25度之間,北迴歸線經過嘉義縣水上鄉與花蓮縣瑞穗鄉、豐濱鄉等地 。
<dl>
    <dt>自然地理</dt>
    <dd>臺灣西與西北臨臺灣海峽,距歐亞大陸(主要距福建)海岸平均距離約200公里,臺灣海峽最窄之處為臺灣新竹縣到中國福建省平潭島,直線距離約130公里。</dd>
    <dt>人文地理</dt>
    <dd>包括臺灣與附屬的22座小島,以及臺灣海峽中澎湖群島的90座島嶼。目前臺灣約佔中華民國實際行政區域面積98%,其約位於東經120度至122度、北緯22度至25度之間,北迴歸線經過嘉義縣水上鄉與花蓮縣瑞穗鄉、豐濱鄉等地 。</dd>
</dl>

小序排列

<dl> 加上 .dl-ordered

自然地理
地質
地形
水文
氣候
生物
人文地理
人口與民族
世界遺產潛力點
<dl class="dl-ordered">
    <dt>自然地理</dt>
    <dd>地質</dd>
    <dd>地形</dd>
    <dd>水文</dd>
    <dd>氣候</dd>
    <dd>生物</dd>
    <dt>人文地理</dt>
    <dd>人口與民族</dd>
    <dd>世界遺產潛力點</dd>
</dl>

水平排列

<dl> 加上 .dl-horizontal

自然地理
臺灣西與西北臨臺灣海峽,距歐亞大陸(主要距福建)海岸平均距離約200公里,臺灣海峽最窄之處為臺灣新竹縣到中國福建省平潭島,直線距離約130公里。
人文地理
包括臺灣與附屬的22座小島,以及臺灣海峽中澎湖群島的90座島嶼。目前臺灣約佔中華民國實際行政區域面積98%,其約位於東經120度至122度、北緯22度至25度之間,北迴歸線經過嘉義縣水上鄉與花蓮縣瑞穗鄉、豐濱鄉等地 。
<dl class="dl-horizontal">
    <dt>自然地理</dt>
    <dd>臺灣西與西北臨臺灣海峽,距歐亞大陸(主要距福建)海岸平均距離約200公里,臺灣海峽最窄之處為臺灣新竹縣到中國福建省平潭島,直線距離約130公里。</dd>
    <dt>人文地理</dt>
    <dd>包括臺灣與附屬的22座小島,以及臺灣海峽中澎湖群島的90座島嶼。目前臺灣約佔中華民國實際行政區域面積98%,其約位於東經120度至122度、北緯22度至25度之間,北迴歸線經過嘉義縣水上鄉與花蓮縣瑞穗鄉、豐濱鄉等地 。</dd>
</dl>

Address

聯絡訊息樣式,可直接使用 <address>

預設樣式
誠品敦南店 台灣 台北市 10689
敦化南路一段245號
服務電話: (02)2775-5977
<address>
    <strong>誠品敦南店</strong>
    台灣 台北市 10689<br />
    敦化南路一段245號<br />
    服務電話: (02)2775-5977
</address>

VCard樣式

<address> 加上 .vcard

誠品敦南店 台灣 台北市 10689
敦化南路一段245號
服務電話: (02)2775-5977
<address class="vcard">
    <strong>誠品敦南店</strong>
    台灣 台北市 10689<br />
    敦化南路一段245號<br />
    服務電話: (02)2775-5977
</address>

語言樣式

Pre

為了保有 <pre> 原有預設樣式,因此請加上 .code

<link href="path/to/kule-lazy3.min.css" />
<pre class="code"><link href="path/to/kule-lazy3.min.css" /></pre>

Code

.btn
<code>.btn</code>

Keyboard

command + s
<kbd>
    <kbd>command</kbd> + <kbd>s</kbd>
</kbd>

Variable

d = document.documentElement;
<var>d</var> = <var>document.documentElement</var>;</var>

Outpost

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, officiis!
<samp>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, officiis!</samp>

給編輯器

在開發過程中,經常會使用像是 CK Editor 這類的編輯器,讓使用者或客戶能夠像是使用 Word 一樣編輯內文,但像是 <ol> , <ul> , <li> 樣式被移除的情況下,很難要求使用者或客戶學習怎麼加 class 這樣的事情,所以請在顯示編輯器的區塊上,例如 <div> 或是 <article> 加上 .editor,這樣就能夠直接顯示清單樣式。

  1. Ordered list item
  2. Ordered list item
  3. Ordered list item
  4. Ordered list item
  5. Ordered list item
<div class="editor">
    <ol>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
        <li>Ordered list item</li>
    </ol>
</div>