文章 css sample

大標題 / 小標題 / 段落 / 備註

<h2>h2 大標題</h2>

h2 大標題

<h3>h3 小標題</h3>

h3 小標題

<h3 class="center">h3 小標題 - 置中</h3>

h3 小標題 - 置中

<h3 class="center underline">h3 小標題 - 置中底線</h3>

h3 小標題 - 置中底線

<h3 class="center"><div class="boxline">h3 小標題 - 置中加框</div></h3>

<p> p 段落1 --段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落。</p> <p> p 段落2 --段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落。</p> <p class="palign"> p 對齊段落 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落！</p>

p 段落1 --段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落。

p 段落2 --段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落。

p 對齊段落 段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落！

一、段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落

二、段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落

<p style="text-indent: -2em !important; padding-left: 2em !important;">一、段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
<p style="text-indent: -2em !important; padding-left: 2em !important;">二、段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落</p>

段落縮短

<div class="p-gap-sm"> <p class="palign">序號：1</p> <p>作者：印順法師</p> <p>書名：華雨集（第四冊） / 頁次：173</p> <p>出版資訊：正聞出版社</p> </div>

<p class= "ps"> （註1）註註註註註註註註註註註註註註註註註註註註註註</p>

（註1）註註註註註註註註註註註註註註註註註註註註註註

段落齊中

<p class= "center">段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中。</p>

<p class="palign" class= "center">段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中段落齊中。</p>

<p class="text-kai">楷書字體</p>

楷書字體

參考 CSS link button 設定

PDF下載

<p><a href="/檔名" class="btn btn-info">PDF下載</a></p>

PDF下載

<p class="palign"><a href="/檔名" class="btn btn-info">PDF下載</a></p>

LINE@ 按鈕 （綠底白字） LINE@客服

CSS 設定 .line-btn { --line-green: #06C755; --line-green-hover: #05b84e; --line-green-active: #04a746; display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 5px; background: var(--line-green); color: #fff; font: 600 15px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; text-decoration: none; box-shadow: 0 6px 14px rgba(6,199,85,0.25); transition: transform .03s ease, box-shadow .2s ease, background .15s ease; } .line-btn:hover { background: var(--line-green-hover); box-shadow: 0 8px 16px rgba(6,199,85,0.3); } .line-btn:active { background: var(--line-green-active); transform: translateY(1px); } .line-btn:focus-visible { outline: 3px solid rgba(6,199,85,0.35); outline-offset: 3px; } .line-icon { width: 20px; height: 20px; display: inline-flex; } .line-icon svg { width: 100%; height: 100%; display: block; } .line-text { white-space: nowrap; color:white; } /* Small & large variants (optional) */ .line-btn.is-small { padding: 8px 12px; font-size: 14px; } .line-btn.is-large { padding: 12px 18px; font-size: 16px; } /* Optional: dark mode tweak */ @media (prefers-color-scheme: dark) { .line-btn { box-shadow: 0 6px 14px rgba(0,0,0,0.35); } }

表格設定 (間隔tr底色，hover)(參考文章)
<style type="text/css">
p {text-indent: 2em;}
table tr,th,td {
border: 1px solid #666;
padding: 10px;
border-collapse: collapse;
}
tr:nth-child(even) {
background: #fff
}
tr:nth-child(odd) {
background-color: #FAFAFA;
}
td:hover {
background-color: #E6FBFF;
}
</style>

表格設定 橫條灰底，下載連結白色 (學報下載)
<style type="text/css">
table { width:100% ; }
tr {border: 5px solid #fff;}
table td { background-color: #f6f6f6; padding:10px; }
table td a { cellspacing:20px; padding:5px; borderSpacing:15px;background-color: #ffffff; }
</style>