首頁 »
2008/02/21

VS 2008之CSS輔助工具

VS 2008 CSS Tools
VS 2008對於CSS樣式提供了四個視覺化輔助工具,來協助ASP.NET程式設計師於CSS樣式建置、套用與管理...

【本文內容及程式碼引用聖殿祭司ASP.NET 3.5新書】
首先,先向各位說聲抱歉,間隔這麼久才貼一篇文章,原因不是沒東西可寫,反而是因為東西太多,內容很龐大要濃縮成一篇Blog文章,反而覺得懶就沒很積極的寫,但今天還是Push一下自己分享一下剛完成的VS 2008 CSS工具的寫作內容。


原本祭司尚未動手撰寫VS 2008所提供CSS工具之章節,原本以為CSS工具有什麼好講,不過就是圖片秀一秀,讓大家看看圖,然後隨便講一下,這樣那樣。。。然後就結束了,反正ASP.NET書籍是專注在Visual Studio及ASP.NET之上,至於CSS串接樣式教學可以說不太關這本書的事...不過這樣可能擠不出幾頁,隨便幾頁就帶過一章了,但這樣很怪,因為5頁10頁在我的書裡,那根本不成一個獨立知識章節,那我怎可隨隨便便把VS 2008的CSS工具弄成一章,這樣的作法好嗎?

以上是我最早的想法,但事實上在2個月後,也就是現在我完成的VS 2008的CSS工具章節寫作,各位猜猜我寫了幾頁,大概是70頁,並且還是兩章,因為內容有點豐富,所以原本只打算寫一章,後來又追加了一章CSS應用。以下跟各位報告一下為什麼CSS這個東西原本我以為沒什麼好寫,但最後卻是最多的,因為我從最基本的CSS原理開始教學,從CSS樣式分類,一路介紹到VS 2008四個CSS視覺化輔助工具,希望能夠讓沒有CSS觀念,也不會用CSS的人在一章之中就能夠迅速有所成就,懂得CSS最核心的原理與應用。

不過這CSS真的花掉我很多寫作時間,原本不想談太完整的,但偏偏卡在自己爛好人的關係,因為看過我的書的讀者都知,我非常注重脈絡,不會天外飛來一筆,弄個圖片教學,然後哄哄大家就過去了,因為那樣子的學習方式,日後會卡東卡西,是個不求甚解的教學方式,故我還是老老實實,硬著頭皮從最基本的CSS原理,好好整理談起,希望大家都能夠容易吸收了解。


第一個CSS章節叫「VS 2008對CSS樣式建置與管理之支援」,以下是章節目錄:
前言
X-1 CSS概觀
X-2  CSS樣式規則
X-3  CSS樣式類型
X-4 CSS樣式所在位置
X-5 VS 2008之CSS樣式建置與管理工具
X-6 以VS 2008建置與套用CSS樣式
X-6-1 以套用樣式視窗建立與套用CSS樣式
X-6-2 以管理樣式視窗建立與管理CSS樣式
X-6-3 以CSS屬性視窗建立與修改CSS樣式及屬性
X-6-4 應用程式樣式套用工具列對CSS樣式設計的輔助
結論


我個人覺得CSS串接樣式要學得好,一定要先搞懂串接樣式的規則及類型,這個最核部分弄懂了,一通百通,例如CSS樣式類型常用的分為三類:
(1)項目型樣式
(2)ID型樣式
(3)類別型樣式

(1)項目型樣式

<style type="text/css">

    body

    {

        border-color: #FF00FF #800080 #800000#FFFF00;

        font-family: 微軟正黑體;

        font-size: large;

        font-weight: bold;

        color: #0000FF;

        border-style: dotted dashed solidridge;

        width: 200px;

    }

style>


(2)ID型樣式

<style type="text/css">

    #Style1

    {

        border-color: #FF00FF #800080 #800000#FFFF00;

        font-family: 微軟正黑體;

        font-size: large;

        font-weight: bold;

        color: #0000FF;

        border-style: dotted dashed solidridge;

        width: 200px;

    }

style>


(3)類別型樣式

<style type="text/css">

    .Style1

    {

        border-color: #FF00FF #800080 #800000#FFFF00;

        font-family: 微軟正黑體;

        font-size: large;

        font-weight: bold;

        color: #0000FF;

        border-style: dotted dashed solidridge;

        width: 200px;

    }

style>


以上三種CSS樣式分類不過是在選取器(Selector)上有差別,然而在內容定義上沒有二致,但是套用CSS樣式時,則套用的方式會有些差異,再者ASP.NET的CssClass屬性需配合類別型樣式使用。

而弄懂了CSS原理及定義後,再來才是搞懂VS 2008的四個CSS視覺化輔助工具,這四個工具是:
(1)套用樣式視窗
Apply Style

(2)管理樣式視窗


(3)CSS屬性視窗


(4)應用程式樣式套用工具列



並一一針對每個CSS視覺化工具進行深入的解說與比較,以及該如何應用這些工具來加速ASP.NET專案CSS樣式之建立與套用等工作,但要通達這四個CSS工具應用,還是一句老話,回頭先弄懂CSS理論。

至於為什麼另外祭司於原本一章的CSS章節,又再追加了第二章CSS應用,因為個人很"雞婆",怕有的人不曉得CSS能幹什麼用,以為只能拿來調調字型或顏色,故又多寫了一章,這章的名稱是「CSS在ASP.NET排版及控制項上的應用」,內容如下:
前言
X-1 CSS樣式在ASP.NET控制項上的應用
X-2 CSS樣式在Layout排版上的應用
X-3 以CSS樣式製作GridView控制項的圓角效果
結論


不過這章若是看標題可能看不出有什麼了不起,這章主要講CSS樣式在排版及ASP.NET控制項上的應用,具體的範例有幾個:
(1)文字段落的兩欄式排版

(點圖放大)

(2)完整的網頁CSS樣式排版

(點圖放大)

(3)圓角造型

(點圖放大)

(4)GridView控制項的圓角造型與虛線框線

(點圖放大)

尤其是替GridView弄上圓角及虛線,是我一年前就想做的,但一直沒機會去試,但今天剛好藉著講解CSS知識時,一併完成這個很早的想法,並將做法教給大家,最後希望各位會喜歡。。。

【本文內容及程式碼引用聖殿祭司ASP.NET 3.5新書】


聖殿祭司的ASP.NET 2.0專家技術手冊 VB ASP.NET AJAX 電子檔下載←上一篇 │首頁│ 下一篇→VS 2008對JavaScript及ASP.NET AJAX之IntelliSense支援
本文引用網址: