TopStyle Pro 的使用技巧

TopStyle Pro是一款功能專注於CSS設計的輔助工具，功能相當多，附有CSS碼檢查功能，減少寫錯的機會。尤其是它的HELP文件中詳細的 CSS指令介紹，很適合用來當作參考文件與初次接觸CSS的人做為學習使用。以下我們來介紹TopStyle Pro 的使用技巧 ：

文字註解:Shift+Ctrl+M

向右縮排:Shift+Ctrl+.

向左縮排:Shift+Ctrl+.

向左縮排:Shift+Ctrl+,

下一個CSS:Ctrl+]

上一個CSS:Ctrl+[

選顏色:Shift+Ctrl+C

以後不能撤銷(Ctrl+Z)的

我們給改過來～

選項位置:Options--Editor--選擇Enable undo after save

自動替換

例如你打"!i"然後按一個空格，TopStyle就自動將"!i"替換成"!important"

選項位置:Options--Editor- -Auto Replace 你也可以自己新增快捷輸入。

樹型CSS

有時候是不是覺得CSS太多了不好瀏覽?TopStyle提供了一個將CSS內容隱藏只顯示選擇器名稱的縮略形式，很方便。

選項位置:Options--Editor--Rule Collapsing 選擇Enable rule collapsing

快速校驗

快速選單中的W3C CSS Validator 和W3C HTML Validator按鈕很方便，編輯完直接一點就能知道是否通過了校驗。

樣式表清道夫

下面隆重推薦TopStyle自帶CSS整理功能:樣式表清道夫 Style Sweeper。它能把你的CSS整理的非常工整，規範。一個非常不錯的功能。

選項位置:Tools--Style Sweeper

Rules 規則面板:Rule Format 可以設定單行多行顯示。 Combine Rules 設定是否會有相同屬性的CSS組合。

Selectors 選擇器面板:Selector Case 設定選擇器的大小寫。 Selector Order 設定選擇器的排序方式。

Property屬性面板:Property Case 設定屬性的大小寫。 Property Order 設定屬性的排序方式。

Shorthand Properties 縮寫屬性面板:可以選擇將font、background、margin、padding屬性縮寫。

Others 其他屬性面板:Color Format 顏色格式:可選擇十六進位、RGB、顏色名稱等。