Visual CSS是一款方便易用的CSS編輯工具。所謂的CSS是Cascading Style Sheet的縮寫。譯作“層疊樣式表單”。是用于（增強）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標記性語言。

【軟件功能】

　　Visual CSS可以同時編輯多份CSS文檔

　　Visual CSS語法高亮、懸停提示以及自動完成等代碼輔助功能

　　CSS大綱列表，Visual CSS可以列出代碼中所有的規(guī)則，并分類顯示

　　Visual CSS格式化代碼功能，Visual CSS可以以三種模式格式化代碼，對應(yīng)三種不同的閱讀風格

　　W3C遠程驗證功能，Visual CSS可以一鍵連接W3C CSS 驗證服務(wù)對您的代碼進行驗證

【軟件特色】

　　1、Visual CSS主要用于編輯本地網(wǎng)頁的CSS文件。

　　2、Visual CSS加載方便。只需要打開本地HTML/HTM網(wǎng)頁文件，軟件會自動打開網(wǎng)頁里加載的CSS文件進行編輯。

　　2、Visual CSS所得既所見，實時顯示效果。編輯CSS文件后，可立即更新顯示網(wǎng)頁樣式。

　　3、語法查錯功能。當輸入不同的屬性及輸入錯誤的屬性時，會以不同顏色提示。

　　4、語法提示。Visual CSS輸入CSS屬性名稱時，會自動提示出相關(guān)屬性名。

　　5、即時保存。Visual CSS編輯后的CSS文件，可使用 ctrl+s 即時保存。

【常用屬性大全】

　　一 CSS文字屬性：

　　color : #999999;

　　font-family : 宋體,sans-serif;

　　font-size : 9pt;

　　font-style:itelic;

　　font-variant:small-caps;

　　letter-spacing : 1pt;

　　text-decoration:none;

　　text-transform : capitalize;

　　text-transform : uppercase;

　　text-transform : lowercase;

　　text-align:right;

　　text-align:left;

　　text-align:center;

　　text-align:justify;

　　vertical-align屬性

　　vertical-align:top;

　　vertical-align:bottom;

　　vertical-align:middle;

　　vertical-align:text-top;

　　vertical-align:text-bottom;

　　二、CSS邊框空白

　　padding-top:10px;

　　padding-right:10px;

　　padding-bottom:10px;

　　padding-left:10px;

　　list-style-type:decimal;

　　list-style-type:lower-roman;

　　list-style-type:upper-roman;

　　list-style-type:lower-alpha;

　　list-style-type:upper-alpha;

　　list-style-type:disc;

　　list-style-type:circle;

　　list-style-type:square;

　　list-style-image:url(/dot.gif);

　　list-style-position: outside;

　　list-style-position:inside;

　　四、CSS背景樣式

　　background-color:#F5E2EC;

　　background:transparent;

　　background-image : url(/image/bg.gif);

　　background-attachment : fixed;

　　background-repeat : repeat;

　　background-repeat : no-repeat;

　　background-repeat : repeat-x;

　　background-repeat : repeat-y;

　　指定背景位置

　　background-position : 90% 90%;

　　background-position : top;

　　background-position : buttom;

　　background-position : left;

　　background-position : right;

　　background-position : center;

　　五、CSS連接屬性

　　a

　　a:link

　　a:visited

　　a:active

　　a:hover

　　鼠標光標樣式：

　　鏈接手指 CURSOR: hand

　　十字體 cursor:crosshair

　　箭頭朝下 cursor:s-resize

　　十字箭頭 cursor:move

　　箭頭朝右 cursor:move

　　加一問號 cursor:help

　　箭頭朝左 cursor:w-resize

　　箭頭朝上 cursor:n-resize

　　箭頭朝右上 cursor:ne-resize

　　箭頭朝左上 cursor:nw-resize

　　文字I型 cursor:text

　　箭頭斜右下 cursor:se-resize

　　箭頭斜左下 cursor:sw-resize

　　漏斗 cursor:wait

　　光標圖案(IE6) p {cursor:url(“光標文件名.cur”),text;}

　　六、CSS框線一覽表

　　border-top : 1px solid #6699cc;

　　border-bottom : 1px solid #6699cc;

　　border-left : 1px solid #6699cc;

　　border-right : 1px solid #6699cc;

　　以上是建議書寫方式,但也可以使用常規(guī)的方式 如下:

　　border-top-color : #369

　　border-top-width :1px

　　border-top-style : solid

　　其他框線樣式

　　solid

　　dotted

　　double

　　groove

　　ridge

　　inset

　　outset

　　七、CSS表單運用

　　文字方塊

　　按鈕

　　復選框

　　選擇鈕

　　多行文字方塊

　　下拉式菜單 選項1選項2

　　八、CSS邊界樣式

　　margin-top:10px;

　　margin-right:10px;

　　margin-bottom:10px;

　　margin-left:10px;

　　九、CSS濾鏡屬性

　　Filter：在樣式中加上濾鏡特效。由于此屬性內(nèi)容比較多，我們將到下一章單獨對濾鏡介紹。

　　1.Alpha：設(shè)置透明度

　　Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

　　Opacity：透明度級別，范圍是0-100，0代表完全透明，100代表完全不透明。FinishOpacity：設(shè)置漸變的透明效果時，用來指定結(jié)束時的透明度，范圍也是0 到 100。Style：設(shè)置漸變透明的樣式，值為0代表統(tǒng)一形狀、1代表線形、2代表放射狀、3代表長方形。StartX和StartY：代表漸變透明效果的開始X和Y坐標。 FinishX和FinishY：代表漸變透明效果結(jié)束X和Y 的坐標。

　　2.BlendTrans：圖像之間的淡入和淡出的效果

　　BlendTrans(Duration=?) Duration：淡入或淡出的時間。注意：這個濾鏡必須配合JS建立圖片序列，才能做出圖片間效果。

　　3.Blru：建立模糊效果

　　Blur(Add=?, Direction=?, Strength=?) Add：是否單方向模糊，此參數(shù)是一個布爾值，true（非0）或false（0）。 Direction：設(shè)置模糊的方向，其中0度代表垂直向上，然后每45度為一個單位。 Strength：代表模糊的象素值。

　　4.Chroma：把指定的顏色設(shè)置為透明

　　Chroma(Color=?) Color：是指要設(shè)置為透明的顏色。

　　5.DropShadow：建立陰影效果

　　DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Color：指定陰影的顏色。OffX：指定陰影相對于元素在水平方向偏移量，整數(shù)。 OffY：指定陰影相對于元素在垂直方向偏移量，整數(shù)。 Positive：是一個布爾值，值為true（非0）時，表示為建立外陰影；為false(0)，表示為建立內(nèi)陰影。

　　6.FlipH：將元素水平反轉(zhuǎn)

　　7.FlipV：將元素垂直反轉(zhuǎn)

　　8.Gl ow：建立外發(fā)光效效果

　　Gl ow(Color=?, Strength=?)

　　Color：是指定發(fā)光的顏色。

　　Strength：光的強度，可以是1到255之間的任何整數(shù)，數(shù)字越大，發(fā)光的范圍就越大。

　　9.Gray：去掉圖像的色彩，顯示為黑白圖象

　　10.Invert：反轉(zhuǎn)圖象的顏色，產(chǎn)生類似底片的效果

　　11.Light：放置光源的效果，可以用來模擬光源在物體上的投影效果 注意：此效果需要用JS設(shè)置光的位置和強度。

　　12.Mask：建立透明遮罩Mask(Color=?) Color：設(shè)置底色，讓對象遮住底色的部分透明。

　　13.RevealTrans：建立切換效果

　　RevealTrans(Duration=?, Transition=?)

　　Duration：是切換時間，以秒為單位。

　　Transtition：是切換方式，可設(shè)置為從0到23。

　　注意：如果做頁面間的切換效果，可以在區(qū)加上一行代碼：。如果用在頁面里的元素必須配合JS使用。

　　14.Shadow：建立另一種陰影效果 Shadow(Color=?, Direction=?) Color：是指陰影的顏色。

　　Direction：是設(shè)置投影的方向，0度代表垂直向上，然后每45度為一個單位。

　　15.Wave：波紋效果

　　Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Add：表示是否顯示原對象，0表示不顯示，非0表示要顯示原對象。 Freq：設(shè)置波動的個數(shù)。LightStrength：設(shè)置波浪效果的光照強度，從0到100。0表示最弱，100表示最強。 Phase：波浪的起始相角。從0到100的百分數(shù)值。（例如：25相當于90度，而50相當于180度。） Strength：設(shè)置波浪搖擺的幅度。

　　16.Xray：顯現(xiàn)圖片的輪廓，X光片效果

　　注意：在使用CSS濾鏡時，必須使用在有區(qū)域的元素，比如表格，圖片等。而文本，段落這樣沒有區(qū)域的元素不能使用CSS濾鏡，對這樣的元素我們可以設(shè)置元素的Height和Width樣式或坐標來實現(xiàn)。"

【用戶點評】

　　網(wǎng)頁設(shè)計師們都經(jīng)常遇到一個問題，那就是在編輯CSS時只能夠通過打代碼來對CSS進行編輯，而這個過程十分的慢且容易出錯，不過使用Simple CSS可以讓用戶直接進行可視化編輯，想要編輯字體就能夠編輯字體，想要編輯表格等其他內(nèi)容也可以通過軟件找到相應(yīng)的選項，雖然軟件本身是英文的，不過對于計算機人員來說這些英語單詞都是常見的。Simple CSS也是一款十分適合新手用戶使用的編輯工具，許多新手肯定對復雜的代碼感到頭痛，不過在使用了這種可視化的編輯工具后，就可以直接對CSS樣式表進行編輯，而且預覽功能也可以讓你邊做邊看，看看自己編輯的CSS樣式表是否符合要求。