Context: CSS Practice Advanced

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為副檔名之檔案方式使用。

RWD 設計神掌

h1 { font-size: clamp(18px, 2.5vw, 40px); color: #000080; font-weight: bold; font-family:"Arial Narrow","Trebuchet MS",微軟正黑體; margin-bottom: 4px; margin-top: 0; font-stretch: condensed;}

clamp(18px, 2.5vw, 40px)clamp 控制手機上最小與最大字級。

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>

顯示為：

1. First
2. Second
3. Third

自動編號清單改變起始號碼設定

譬如改為從 5 開始編號：

<ol start="5">
<li >First</li>
<li Second</li>
<li >Third</li>
</ol>

will change the beginning number to "5". 顯示為：

5. First
6. Second
7. 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

由於各瀏覽器間的差異，有時會使標題或文字「自動換行」，尤其標題如果落單字，造成視覺的不夠美觀。如：

../../RwdTxFB/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>不用&lt;br&gt;
瀏覽之段落與 空間 與
設計完全一致
Tag &lt;pre&gt; 之應用</h2></pre>
<pre><p>要以短行排版，
必須每段使用段落標籤。
而在&lt;pre&gt;&lt;/pre&gt;間之物件，
可以省略段落標籤，
瀏覽器會按照原始設計排版。</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 字型家族的設計與應用

在中，可用以下方式設計字型家族：

〉工具

〉網頁編輯器選項

〉字型家族