Context: CSS Practice

Web Design: Context/Text/Context - Epistemological/Digital Aesthetics - Formation Methodology

網站/網頁設計:意涵/文字實作-知識美學/數位美學之建構方法

先讀文章： What is CSS? 什麼是CSS?

層疊樣式表(Cascading Style Sheets, CSS)，又稱串接樣式列表，由W3C定義和維護的標準，用來為HTML或XML等，增加視覺呈現效果的網頁語言，以.css為副檔名之檔案方式使用。

CSS Files Practice 實作

CSS Files Dialogue

Expression Web/ SharePoint

>File -New

    >CSS

Save it as "User.css" into a "!Common" folder.

>Format -Add Styles

>選取器

如果點開選單，可修改「選取器」，即：p, h1...等。

或者直接輸入以「.」開頭的樣式名，則稱為「類別」。如設計：

.note: 注解 樣式

.hilite: 強調樣式…等。

Create CSS or Add New Styles

〉定義於

選擇現有樣式表，則會出現CSS所在之位址（如果沒有出現，就點開選單，或按〈瀏覽〉搜尋），並可進行新增。

Selector and Class

>Selector

Choose p, h1~h5, ...etc.

>Fill in New Styles

New Styles means "Class" and must begin with ".".

All Selectors and Classes are between the section as the follows.

<STYLE>

p { font-size: 14pt; font-family:標楷體 }
h1 { font-size: 28pt; color: #000080; font-weight: bold; font-family:標楷體 }
...
.en { font-family: Times New Roman; }
.h-en { font-family: Arial; }

</STYLE>

The 'ClassName' has to begin with '.'.

The most 2 popular usages that calling for the styles are:

For selector: <p>...</p> (p could be any other selectors)

For class: <p Class="ClassName">...</p>

標題字級

標題(h1~h6)字級為HTML預設，如要改變，就不要用系統selector，而建立使用者的css檔案，另訂使用者class。

字體家族 font-family 應用

如果不確定某瀏覽器是否會顯示某花體字，html 有Font Stack 或 Font Combinations，也就是字體家族的觀念，將相似的字體集中，讓瀏覽器按順序選擇。

實施的方法是使用 CSS 的 font-family 屬性，如：

h1 { font-family:"Arial Narrow",Impact,微軟正黑體; }

瀏覽器會依 "Arial Narrow", Impact, 微軟正黑體之順序，選擇使用。

注意： "Arial Narrow" 是一個字體名稱，必須以 "" 包住。

Responsive 跨裝置（響應式）標題設計

font-size: clamp(最小px, 2.5vw, 最大px) 應用

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;}

雙語網頁的 font-family 應用

採用以上設計，英文字體前、中文字體後，可輕鬆設計雙語網頁。

Web Font 網路設計特用字體下載

Web Font 網路設計特用字體，是指瀏覽者沒有的字體，而必須由設計者的伺服器，下載到瀏覽者的電腦上。這是 CSS3 後才有的功能，但可能會降低顯示速度。

下載必須使用 CSS3 的屬性： @font-face，範例如：

@font-face {
font-family: myFont;
src: url(userfont.woff);
font-weight: bold;
}

myFont：設計特用字體名稱。

url(user.woff)：字體檔案所在網址。

如何在段落內混合使用特用字體

如果要在段落內混合使用特用字體，如插入雜錦字體的符號，範例如下：

Lab Experiment L

Replica L

Internet Users Growth J

要配合使用<span> ，其程式如下：

<h3>Lab Experiment <span style="font-family:Wingdings">L</span></h3>
<h3>Replica <span style="font-family:Wingdings">L</span></h3>
<h3>Internet Users Growth <span style="font-family:Wingdings">J</span></h3>

Modify CSS 修改 CSS

〉面板

「管理樣式」與「套用樣式」

注意「管理樣式」與「套用樣式」幾乎相同，按右鍵，兩者功能可互通，只是前者沒有格式示例，後者有。

〉管理樣式

CSS Selectors 選取器/格式標籤，分作3型：CSS 預設選取器/格式標籤、類別選取器/格式標籤、與#ID選取器/區域格式標籤，分別以前置圓點：藍色、綠色、紅色表示。

在樣式檔中，按右鍵，選擇要修改的樣式

Right click the style you want to modify. 

〉修改樣式

〉h1

假設修改標題1（h1），h1 屬於預設選取器/格式標籤，故前置圓點為藍色。

Font Modification 字型修改

〉字型

修訂：字體、字級、色彩為主。

字的變化設計

字的變化基本型，如加粗等，都在此設計。

唯加「刪除線」與「訂正字」等，另有單獨標籤命令。

<del> 刪除線與訂正字 <ins> 標籤命令

以下2字刪除而顯示訂正2字。

語法為：

<p>以下2字<del>刪除</del>而顯示<ins>訂正</ins>2字。</p>

#ID選取器/區域格式標籤

#ID選取器/區域格式標籤，其前置圓點為紅色。

Banner 橫幅樣式修改

Banner 橫幅設計通常是一個區塊，故以#ID選取器/區域格式標籤設計，其樣式修改如下：

〉套用樣式

右鍵 〉修改樣式

〉#banner

或

〉#banner_p

這裡需要修改的，通常只有字的「色彩」，以配合橫幅的底圖。

CSS 色彩設計

字的 CSS 色彩設計，與應用在其他物件的方法相同。

調色制度‧數位色輪‧數位調色盤

請先參考數位「調色制度‧數位色輪‧數位調色盤」先導觀念。

HTML 調色實務

網頁編輯軟體，會自動提供標準色彩的名稱，作為選擇。

也可以手動，採用16進位顏色、RGB，或HSB 設定。如以下第一組為6666CC，而第二組為27248A，以及與其相應的RGB，HSB 值。

標準色設計

標準色是指在一個媒體上的系列元件，如標題、圖文框...與視覺識別標幟系統，其色彩搭配應有一致的標準，請參考《數位色彩全設計:TX選色與四大配色通律_標準色設計 Digital Color Comps Design: TX's Color Selection and 4 Scheme Laws_Standard Color Design》。

CSS 背景色設計

背景色設計不宜反而造成視覺閱讀困難，非特殊目的，避免深色、宜用淺色。

統雄老師建議 3 背景色如下：

.backgreen {background-color: #D9FFB3; }

.backpink {background-color: #FFCCFF; }

.backyellow {background-color: #FFFF99; } 

進階警告：字色、與背景色的 CSS 設定語法

在如下一連串字色、與背景色的設定中，注意「{」與「}」符號的相對，如果多或少，愈新版的瀏覽器反而不能容錯，會形成黑、白色。

<style type="text/css">
.style1 {
margin-top: 0;
margin-bottom: 0;
color: rgb(0, 225, 225);
}
.style3 {
border: 1px solid #FFCC66;
vertical-align : top;
margin-top: 0;
margin-bottom: 0;
background-color: rgb( 225,0,0);
}
</style> 

CSS3 進階漸層色彩設計：CSS3 Gradients

CSS3 在漸層 Gradients 色彩設計方面，有更多進階發展。

不過，網頁媒體仍是以表現「內容」見長，複雜的視覺設計，還是由「視覺媒體」去設計製作為宜。

Spacing 空間設計與留白方式

空間設計與留白方式，分作以下幾種。

段間距

HTML 預設為段間距有空行，但有些物件如以下：提示性插欄等，不宜有空行。

One most frequent asked question was about the paragraph spacing.

〉方塊

空間調整是在「方塊」。行間距是 margin top 和margin bottom。

標題空白間距

預設為空1行，可能太多，故建議改為上不空，下空，並根據字級調整，如範例：

h4 { font-size: 18pt; color: #000080; font-weight: bold; font-family:標楷體; margin-bottom: 4px; ; margin-top: 0; }
h5 { font-size: 16pt; color: #000080; font-weight: bold; font-family:標楷體; margin-bottom: 2px; ; margin-top: 0; }

字體空白間距

外框字應加右間距，如範例：

.author { font-size: 16pt; font-family:微軟正黑體; color: #000080; margin-top: 0; margin-bottom: 4px; margin-right:1px }

FrontPage

>Format-Paragraph

User Defined Blank Line 使用者留白

如果要留白，一般常用打空行的方式，是非常不專業的方法。

應使用以下方法。

<p></p> may not work under certain situation. You want to use the following syntax:

<br class="space"/>

Where,
.space { font-size: 6pt; margin-top: 0; margin-bottom: 0 }

Link to CSS 如何連結檔案與CSS程式

>Task Pane-Manage Styles

Example

You may download a complete example file of tx.CSS

Link this file to your pages by the following syntax, such as:

<link rel="stylesheet" type="text/css" href="!Common/tx.CSS">

Insert the above command between <Head> and </Head>

If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

Use CSS 如何套用CSS 樣式

>Task Pane-Use Styles

or

>Style Combo-Use Styles

Theme Modification 布景主題修改

微軟有提供多種「識別標幟系統」的 css 範本，稱為布景主題，另以專篇討論修改方式。