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

【軟件功能】

　　Visual CSS可以同時(shí)編輯多份CSS文檔

　　Visual CSS語(yǔ)法高亮、懸停提示以及自動(dòng)完成等代碼輔助功能

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

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

　　W3C遠(yuǎn)程驗(yàn)證功能，Visual CSS可以一鍵連接W3C CSS 驗(yàn)證服務(wù)對(duì)您的代碼進(jìn)行驗(yàn)證

【軟件特色】

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

　　2、Visual CSS加載方便。只需要打開(kāi)本地HTML/HTM網(wǎng)頁(yè)文件，軟件會(huì)自動(dòng)打開(kāi)網(wǎng)頁(yè)里加載的CSS文件進(jìn)行編輯。

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

　　3、語(yǔ)法查錯(cuò)功能。當(dāng)輸入不同的屬性及輸入錯(cuò)誤的屬性時(shí)，會(huì)以不同顏色提示。

　　4、語(yǔ)法提示。Visual CSS輸入CSS屬性名稱(chēng)時(shí)，會(huì)自動(dòng)提示出相關(guān)屬性名。

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

【常用屬性大全】

　　一 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

　　鼠標(biāo)光標(biāo)樣式：

　　鏈接手指 CURSOR: hand

　　十字體 cursor:crosshair

　　箭頭朝下 cursor:s-resize

　　十字箭頭 cursor:move

　　箭頭朝右 cursor:move

　　加一問(wèn)號(hào) 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

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

　　六、CSS框線一覽表

　　border-top : 1px solid #6699cc;

　　border-bottom : 1px solid #6699cc;

　　border-left : 1px solid #6699cc;

　　border-right : 1px solid #6699cc;

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

　　border-top-color : #369

　　border-top-width :1px

　　border-top-style : solid

　　其他框線樣式

　　solid

　　dotted

　　double

　　groove

　　ridge

　　inset

　　outset

　　七、CSS表單運(yùn)用

　　文字方塊

　　按鈕

　　復(fù)選框

　　選擇鈕

　　多行文字方塊

　　下拉式菜單 選項(xiàng)1選項(xiàng)2

　　八、CSS邊界樣式

　　margin-top:10px;

　　margin-right:10px;

　　margin-bottom:10px;

　　margin-left:10px;

　　九、CSS濾鏡屬性

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

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

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

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

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

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

　　3.Blru：建立模糊效果

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

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

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

　　5.DropShadow：建立陰影效果

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

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

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

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

　　Gl ow(Color=?, Strength=?)

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

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

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

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

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

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

　　13.RevealTrans：建立切換效果

　　RevealTrans(Duration=?, Transition=?)

　　Duration：是切換時(shí)間，以秒為單位。

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

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

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

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

　　15.Wave：波紋效果

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

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

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

【用戶點(diǎn)評(píng)】

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