[ 軟體 ] 排序 CSS 的利器 - TopStyle

這一陣子在幫朋友修改 F2blog  的模版時,最痛苦的一件事莫過於研究那一堆 CSS 了。說實話,研究 CSS 沒啥大的難度,把 Dreamweaver 之類的軟體拿出來,他就會把整個 CSS 檔案裡面所有的類別,幫你分門別類的排得好好的給你看,三不五時還會給你一些設定上的導引,方便極了。

 Dreamweaver 編輯 CSS


可是如果你想要用比對的,手工慢慢改,如果看到原始碼長這個樣子,我不知道您會不會跟我一樣喊「Oh ! My God !!」 然後 Orz 這個表情馬上出來?

亂七八糟的原始碼

在這裡不禁要抱怨一下 F2blog 的開發團隊,怎麼同樣是 layout.css ,怎麼上半部是井然有序,下半部卻是緊緊相依呀 :p

真的是有點亂的 css 檔

我一直是一個有點潔癖的處女座寶寶,照以前我的作法一定是馬上自己手動一個一個幫他改好,可是如果你有一堆要改,這個原則也是會被改變的 :p,那就有修改到的,再來手動排序吧!

直到那一天,我遇到了 TopStyle ,我終於知道,什麼叫做痛快。

你討厭像是底下這一種亂亂的 CSS 嗎?

亂亂的 CSS

你只要用 TopStyle 開啟這個 CSS 檔案,然後從下拉功能表的「Tools」選擇「Style Sweeper」,你馬上就擁有一個非常整齊的 CSS 囉!

整齊的 CSS

這樣看起來,版面是不是清爽多了,改也來也方便多了。

那..... TopStyle 只有這個功能嗎?

那可不,凡舉 CSS 編輯器該有的功能,他都有喔,他的 W3C CSS Validator 和 W3C HTML Validator 還可以做到驗證你的 CSS 是否有合於 W3C 的規範,甚至還可以檢查,在哪一種瀏覽器底下這個語法會有問題。

這是一個好軟體,有需求的朋友可以多嘗試看看 🙂

to be continued ......

2 thoughts on “[ 軟體 ] 排序 CSS 的利器 - TopStyle

  1. Hi Jerome,
    看到你這篇介紹CSS,我就很想改改我自己的網頁(Xuite),可是勒,我沒學過CSS,但是我有寫C的底子(工作用),所以想請你介紹幾個網站教CSS比較詳細的(書也可以),謝謝ㄛ ...

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *