CSS on G. T. Wang

WordPress 改變 HTML 文字編輯器的字型大小與顏色

Wed, 27 Apr 2016 08:22:27 +0800

本篇介紹如何改變 WordPress 文字編輯器的字型大小與顏色，讓原始的 HTML 程式碼更容易閱讀。

我個人在使用 WordPress 撰寫文章時，都習慣使用原始的 HTML 程式碼來排版，這樣可以比較精準的呈現自己想要的排版方式，但是 WordPress 預設的文字編輯器是最簡單的白底黑字，加上字型又很小，眼睛看久了真的很不舒服。

產生 CSS 置中程式碼，輕鬆排版網頁元素

Thu, 21 May 2015 12:12:50 +0800

這裡介紹一個產生 CSS 置中程式碼的線上工具，讓您輕鬆排版網頁元素。

有設計網頁的人應該都遇過需要置中排版的狀況，如果您對於 CSS 的使用方式不夠熟悉，通常要置中排版一個元素，都會被它搞得七葷八素的，因為雖然看起來很簡單的動作，但是用 CSS 寫起來卻不是那麼單純。

使用 CSS 的 ::before 自訂 HTML Ordered Lists 的編號樣式

Tue, 16 Sep 2014 11:21:42 +0800

這裡介紹如何使用 CSS 的 ::before selector 自訂 HTML ordered lists（ol）的編號樣式。

一般 HTML 的 ordered lists（ol）呈現的效果是這樣：

這是第一個項目
這是第二個項目
這是第三個項目
這是第四個項目
這是第五個項目

我們這裡介紹如何使用 CSS 自訂每一個項目的編號：

YUI Compressor： JavaScript 與 CSS 壓縮工具，產生最小化的網頁

Wed, 21 May 2014 21:06:14 +0800

YUI Compressor 是由 Yahoo 所發展的一套 JavaScript 與 CSS 壓縮工具，可以協助網頁開發者產生最小化的網頁。

網頁大小跟載入的速度有很大的關係，如果要降低網頁的大小，除了可以使用 Google Closure Compiler 編譯器將 JavaScript 最小化之外，也可以使用 Yahoo 所發展的 YUI Compressor，它除了可以處理 JavaScript 之外，也可以一併將 CSS 檔最小化。

Stylus：Node.js 架構下的 CSS 前處理器

Mon, 24 Feb 2014 16:08:19 +0800

Stylus 是一個 Node.js 架構下的 CSS 前處理器，這裡介紹它的基本使用方式。

Stylus 是一種用來產生 CSS 的程式語言，其語法基本上是從傳統的 CSS 簡化而來，所以跟 CSS 的寫法類似，但是更精簡，另外也加入一些函數與運算的功能，讓使用上更彈性。

HINT.css：以 CSS3 與 HTML5 實作的提示訊息方塊（Tooltip）工具

Thu, 16 Jan 2014 08:58:18 +0800

HINT.css 是一個使用 CSS3 與 HTML5 實作的 tooltip 函式庫，可以在網頁中呈現漂亮的提示訊息方塊。

一般在網頁中若要顯示提示訊息，可以使用 title 這個 HTML 屬性，像上面這張圖將 title 設定為 "HTML.css Logo"，所以當你將滑鼠移到圖片上面時，停留一段時間他就會顯示這行提示訊息。

自製中文網頁字形（Web Font）並內崁至網頁中（使用 CSS @font-face）

Thu, 02 Jan 2014 11:08:04 +0800

這裡教大家如何自己製作中文的字形檔，並轉為網頁用的字型格式，藉由 CSS 的 @font-face 功能在網頁中使用。

現在大部份的瀏覽器都可以支援 @font-face 這樣的自定網頁字型功能，但是到目前為止這項技術大部份都是應用於英文的字型上，而中文的字型檔由於大小通常都很大，如果讓使用者在看網頁文字時還要再下載好幾 MB 的字型檔，通常都會讓整個網頁效率大幅下降，所以大部份的網頁中的中文字都比較少使用自定的字型。

CSS 網頁字型 @font-face 使用教學與範例

Tue, 31 Dec 2013 11:31:10 +0800

這裡介紹 CSS 的 @font-face 使用方式與範例，讓網頁設計者可以在網頁的字型使用上更有彈性。

@font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字，甚至還可以讓設計者使用自己所提供的字型檔，讓網頁的設計更具有彈性，在選擇字型時就可以不需要考慮一般的電腦是否有安裝，凡是放在網路上的任何字型檔都可以使用。而 @font-face 除了在 CSS 的頂層設定上使用之外，在任何 CSS 條件群組（conditional-group）at-rule 中也可以使用。

使用 CSS Animation 製作網頁上的動畫（只要 CSS3，不用 JavaScript！）

Mon, 09 Dec 2013 07:21:32 +0800

這裡介紹如何使用 CSS3 的 animation 功能在網頁上製作動畫，而且不需要使用到 JavaScript。

CSS3 所提供的動畫（animation）功能可以讓網頁元素的 CSS 樣式（style）從一個設定轉換到另外一個，藉著這樣的方式產生動畫的效果。CSS 的再設定動畫時包含兩個部份，一個是用來設定 CSS 動畫的樣式，另外一個則是指定動畫開始、結束或中途路徑的關鍵影格（keyframes）設定。

Colorpeek：查看與分享 CSS 色碼的線上工具

Fri, 06 Dec 2013 07:41:24 +0800

Colorpeek 是一個查看與分享 CSS 色碼的線上工具，除了顯示 CSS 顏色還可以自動取出圖片的主要顏色。

一般在設計網頁時，一定常常會需要查看某項網頁元素的顏色，或是為某一個網頁元素選擇一個適當的顏色，如果是團隊開發的情況，在多個網頁開發者之間討論顏色時，也會碰到需要互相交流顏色選擇的看法，當然你可以直接將 hex triplet 貼上 Photoshop 這類的會提軟體，看看這個顏色的感覺，調整好顏色之後，再把這個 hex triplet 貼在 Email 寄給另外一位開發者，跟他說這個顏色不錯，但是這樣每次調整顏色時都要開啟 Photoshop 這樣的軟體，其實不太方便。