層疊樣式表/選取器/格式標籤設計 精華神掌

數位出版設計:意涵/樣式篇Web Design: Context/Text/Context - Epistemological/Digital Aesthetics - Formation Methodology

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


What is CSS? 什麼是CSS?

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

CSS Syntax/ CSS 語法

CSS 語法的規則包括選取器(科學中文化的觀點,其實就是「標籤」、尤其是「格式標籤」),包括:CSS Default Selectors/ 預設選取器/預設格式標籤、CSS Class Selectors 類別選取器/自訂格式標籤、CSS ID Selectors/ ID選取器/區域格式標籤、CSS Pseudo-classes類別/特定格式標籤/副標籤,和在大括號內的{宣告},而宣告可以有多個,每個宣告又由{屬性:設定值; 屬性:設定值;}所組成。

A CSS rule has two main parts: a selector, and one or more declarations:

CSS Syntax

The selector is normally the HTML element you want to style.

Each declaration consists of a property and a value.

The property is the style attribute you want to change. Each property has a value.

CSS Selectors 選取器/格式標籤

CSS Selectors 選取器,就是格式標籤,再分作:CSS Default Selectors/ 預設選取器/預設格式標籤、CSS Class Selectors 類別選取器/自訂格式標籤、CSS ID Selectors/ ID選取器/區域格式標籤、CSS Pseudo-classes類別/特定格式標籤/副標籤。

CSS Default Selectors/ 預設選取器/預設格式標籤

HTML預設樣式名稱,如:p(內文), h1~h6(標題1~6)...等。

如果沒有任何,瀏覽器就使用HTML預設樣式。因為HTML預設樣式是英語系標準,字體較小,所以許多中文網頁沒有自訂,看起來字就會太小。

CSS 中,可以直接修改「選取器樣式」,如:

p { font-size: 14pt; font-family:標楷體 }
h1 { font-size: 28pt; color: #000080; font-weight: bold; font-family:標楷體; margin-bottom: 4px; ; margin-top: 0;}

CSS Class Selectors 類別選取器/自訂格式標籤

「類別」就是自訂樣式名稱,必須以「.」開頭作為樣式名,如設計:

.en { font-family: Times New Roman; }
.en: 英文樣式

.hilite { color: #800080; }
.hilite:
強調樣式…等。

使用時,在標籤中必須加 class="",如:

<p class="en">

<h1 class="hilite">

 

What is CSS? 什麼是CSS?CSS ID Selectors/ ID選取器/區域格式標籤

以「#」開頭的樣式名,則稱為「ID」選取器,表示區域樣式,常與有ID屬性的物件,如<div>合用。範例如:

#container {
margin: 2px;
width: 600px;
background: #ffffff;

What is CSS? 什麼是CSS?Differences Between . and # in CSS/ CSS.#的不同

CSS. 類別選取器/格式標籤,#ID選取器/區域格式標籤的不同,在於使用和效果。如:

#container
<div id="container"></div>

整個區域內,使用由container定義的樣式呈現。

.en
<div class="en"></div>

使用現有CSS中的.en樣式。

CSS Selectors 選取器注意:選取器.#的的名稱,都不能使用數字作開頭。

 

What is CSS? 什麼是CSS?CSS Pseudo-classes 偽類別/特定格式標籤/副標籤

Pseudo-classes 一般直譯為「偽類別」,中文語意並不通,存在語言文化意涵的差異。

Pseudo-classes 實為「特定格式標籤」,同時,它不像 Class Selectors 類別選取器/自訂格式標籤,可以獨立使用,一定跟在 Selectors/ 預設選取器/預設格式標籤之後,以「:」隔開,形同「副標籤」。

Pseudo-classes 偽類別/特定格式標籤/副標籤的用途,如指定滑鼠點擊、游移…事件,發生的特定動作。常用在導覽列與導覽按鈕設計,將另以專章介述。

多數的 Pseudo-classes 偽類別/特定格式標籤/副標籤,只在很特殊的條件下才會用到,詳如 Pseudo-classes類別/特定格式標籤/副標籤列表


What is CSS? 什麼是CSS?CSS Comments/ CSS說明命令

Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.

A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/ 

What is CSS? 什麼是CSS?CSS Animations 動態命令

在CSS3時代,新增與HTML5 配合之 CSS Animations  動態命令,唯仍在發展中,

在此之前,可用 HTML 4 或 Java 功能,代替使用。

What is CSS? 什麼是CSS?CSS3 新命令

不少CSS3 新命令,也都有以上狀況,如:

CSS 多欄版面設計,目前各瀏覽器尚未統一支援。

各瀏覽器還必須指定不同前置命令,如:

-moz- 火狐

-webkit- Chrome

故仍需慎重應用。


Cascading Orders 樣式優先序

CSS (Cascading Style Sheets) is an extension of HTML.
There are 3 types of styles and 4 rules, basically, defined by their priority.

3種放置位置,與4「基本」優先序。 

1st: Inline Styles 行內樣式

html5/CSS3 後,已建議停用。

Use the formatting bar to design fonts.

It is the highest priority.

However, it is not recommended for future and not really working by SharePoint. SP will automatically change the inline styles into embedding styles.

2nd: Embedding (Internal) Styles 頁內樣式

html5/CSS3 後,也已不建議經常使用。

it is not the best choice by html5/CSS3, either.

FrontPageFrontPage

There are 2 categories of embedded style: system default and user defined.

>Format-Style

Click the list of 'Default Tag' and modify the chosen style (as Selector, i.e. HTML style tags).

The modified style will appear in the 'User Defined Style' (as Class) list.

You may add new styles in the 'User Defined Style' list, too.

The most popular styles you want to modify are p, from h1 to h6.

It stands the 2nd priority.

3rd: Linking (External) Styles (files with .css) 外接通用樣式檔

CSS file is an external user-defined, lowest priority style sheet.

Furthermore, it is the current standard and trend for webpage design.

檔案放置位置與連接方式 

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

其中的意義如下:

 <link>標籤

<link>是一個只能使用在 <head>內的標籤元素,表示和「頁外資源」的連結。

html5 的<link> 是變動較大的一個標籤,其中 rev (reverse relation) 屬性已經取消,與前版相容性要注意。

rel= 屬性

rel 屬性可以用在多個標籤,表示 relation 關聯的意義。

"styesheet" 值

表示連結到 CSS 檔案。

type="text/css"

type="text/css" 是一個MIME類型,type="text/css"  表示類型為 text:子類別型為: css

href= 屬性

href= 之值,為連結 CSS 之檔案名稱與位置。 

CSS 檔內選取器優先序

CSS 檔內設定的選取器,有以 # 號或 . 號開頭的2種。

# 優先 於 .  

Cascading Orders 樣式優先序 4th: Priority of More Than Two .CSS Files

If you have more than two .css files and want the file1.css to be applied as the first priority then your markup would be:

<link rel="stylesheet" type="text/css" href="file2.css">
<link rel="stylesheet" type="text/css" href="file1.css">

這是「後進先用」-程式碼排列在下方者優先-原則,不僅適用CSS,也適用各種程式機制。 

warning Reminder: Microsoft Theme's CSS

Microsoft Theme's CSS is better to place above your personal CSS, such as:

<meta name="Microsoft Theme" content="msthemeThemeName, default"/>
<link rel="stylesheet" type="text/css" href="../personal.css" />

個人樣式才優先于于微軟布景樣式。

但應用以上順序時,在SharePoint窗格中,微軟布景樣式卻會跑到上方,很容易造成誤會,要特別小心。

Cascading Orders 樣式優先序 5th: Advanced Specificity Rules of Priority 進階特定規則

進階特定規則是當1個網站,有許多作者,同時使用多個CSS,決定優先的規則,請參閱:

http://www.w3.org/TR/2001/CR-css3-selectors-20011113/#specificity

http://www.HTMLdog.com/guides/cssadvanced/specificity/

http://webdesign.about.com/od/css/f/blcssfaqimportn.htm 


下接:CSS Files Practice 實作

使用SharepointCSS層疊樣式表 


Theme Design: for FrontPageTheme Modification 布景主題修改

微軟有提供多種 css 範本,稱為布景主題,另以專篇討論修改方式。

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題