
層疊樣式表進階實作
Web Design: Context/Text/Context - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:意涵/文字實作-知識美學/數位美學之建構方法
層疊樣式表進階實作包括:如何設計雙語網頁的CSS?Webpage Default Font 全文預設字型, Lists and Auto Numbering 清單與自動編號, Hyperlinks 變更超連結顏色樣式, Embedding External Pages 嵌入外部網頁, 處理 Chrome's Limitation 谷歌瀏覽器的特殊限制, Most Concise Design of Bilingual Webpage 雙語網頁CSS的極簡設計。
先讀文章: What is CSS? 什麼是CSS?
層疊樣式表(Cascading Style Sheets, CSS),又稱串接樣式列表,由W3C定義和維護的標準,用來為HTML或XML等,增加視覺呈現效果的網頁語言,以.css為副檔名之檔案方式使用。
Webpage Default Font 全文預設字型
在CSS中,加入以下設定:
body { font-family:標楷體; }
Lists and Auto Numbering 清單與自動編號
There are defined by <ol>, <uL> and <li>. Do not use <dir> that has been deprecated.
Ordered List 自動編號清單設計
自動編號清單基本設定
<ol><ol>設定清單
<li ></li>設定清單內資料
<ol>
<li >First</li>
<li Second</li>
<li >Third</li>
</ol>
顯示為:
- First
- Second
- Third
自動編號清單改變起始號碼設定
譬如改為從 5 開始編號:
<ol start="5">
<li >First</li>
<li Second</li>
<li >Third</li>
</ol>
will change the beginning number to "5". 顯示為:
- First
- Second
- Third
自動編號清單格式修訂設定
<li ></li>預設為沒有上下空間,對中文顯示可能太擁擠,故可加 class,如:
<li class="add top and bottom"></li>
Unordered List 不編號符號清單設計
<ul>
<li>First level 1</li>
<li >First level 2<ul>
<li >Second level 1</li>
<li >Second level 2</li>
</ul>
Press <Tab> on selected paragraph to make nested lists that is the same as to use nested <ul> coding.
- First level 1
- First level 2
- Second level 1
- Second level 2
注意:有些教科書/教學網站所寫的 HTML Attributes 標註語言特性,其實已經是淘汰的舊版。
延伸閱讀:<ol>, <ul>, <li>
段落設計的特技
段落設計有一些特殊的技巧,介述如下。
避免「自動換行」white-space:nowrap
由於各瀏覽器間的差異,有時會使標題或文字「自動換行」,尤其標題如果落單字,造成視覺的不夠美觀。如:
http://tx.liberal.ntu.edu.tw/TxFB/Humor/Jokes.htm
的標題:Laugh and Learn American English
在 Firefox, chrome 中,最後一個字可能落單成1行,避免的語法是:
<h2 style="white-space:nowrap">Laugh
<img alt="Laugh and Learn" src="../images/smile-joke.gif"
width="27" height="20" /><span class="normal">nd</span>
Learn
<span
class="h-hilite-en">American English</span></h2>
不用<br> 瀏覽之段落與 空間 與 設計完全一致 Tag <pre> 之應用
要以短行排版, 必須每段使用段落標籤。 而在<pre></pre>間之物件, 可以省略段落標籤, 瀏覽器會按照原始設計排版。
<per>是「preserve 保持」的意思,以上綠色區塊內之程式碼為:
<pre>
<h2>不用<br>
瀏覽之段落與 空間 與
設計完全一致
Tag
<pre> 之應用</h2></pre>
<pre><p>要以短行排版,
必須每段使用段落標籤。
而在<pre></pre>間之物件,
可以省略段落標籤,
瀏覽器會按照原始設計排版。</p>
</pre>
Hyperlinks 變更超連結顏色樣式
There is a set of 4 status of hyperlinks: a:link, a:hover, a:active, a:visited.
You may use different colors to identify them.
連結樣式有4種:
a:link:設定連結(通常採用 HTML 預設,即深藍,較不作個人化修改。)
以下經常作個人化修改。
a:hover:游標經過連結時
a:active:正在瀏覽的連結
a:visited:曾經瀏覽過的連結
通常只設定顏色。
Most Concise Design of Bilingual Webpage
雙語網頁CSS的極簡設計
如何設計雙語網頁的CSS?
統雄老師主意到,當前雙語網頁的CSS設計,經常有2種不便:
1.若設在1個.css內,各種相關class 太多,很容易紊亂。
2.若設在2個.css內,優先序與修改同步處理,也很容易發生困擾。
統雄老師提供1項秘訣:利用font-family 的優先序特性,先英文、再中文,可將雙語樣式整合在單一個class 中,是為雙語網頁CSS 的極簡設計,範例如下:
body { font-family:Times New Roman, 標楷體; }
p { font-size: 14pt; font-family:Times New Roman, 標楷體; }
h1 { font-size: 28pt; color: #000080; font-weight: bold; font-family:Arial
Narrow, 微軟正黑體; margin-bottom: 4px; ; margin-top: 0;}
注意,以上是傳統語法,對常用的選取器可以相容;但新版已改為以下語法格式,如不使用新格式,對 <li> 清單…等選取器,將產生錯誤。
li {font-family: "Times New Roman", 標楷體; font-size: 14pt; }
font-family 字型家族的設計與應用
在中,可用以下方式設計字型家族:
〉工具
〉網頁編輯器選項
〉字型家族




