Simple CSS(CSS文檔生成器)

Simple CSS是一款十分方便的CSS編輯工具，可視化的操作方式讓設(shè)計(jì)者即使是初入門(mén)的新手也能夠快速的編輯出CSS樣式表。而且使用CSS樣式表可以優(yōu)化網(wǎng)站代碼，CSS+DIV的結(jié)構(gòu)也是網(wǎng)頁(yè)設(shè)計(jì)的重要部分，所以Simple CSS對(duì)于網(wǎng)頁(yè)設(shè)計(jì)者來(lái)說(shuō)是一個(gè)非常實(shí)用的工具。
網(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樣式表是否符合要求。

軟件特色

1、建議使用級(jí)聯(lián)樣式表（CSS）在網(wǎng)站上指定字體，顏色和其他頁(yè)面元素的樣式。
2、.css文件的使用使樣式屬性的更新變得容易，因?yàn)閱蝹€(gè)更改可以反映在多個(gè)頁(yè)面和元素上。
3、網(wǎng)站訪問(wèn)者的瀏覽器每頁(yè)需要加載較少的數(shù)據(jù)，因?yàn)镃SS樣式表是由瀏覽器緩存的，從而使您的網(wǎng)站的頁(yè)面加載速度更快。
4、為了幫助您使用CSS，我們創(chuàng)建了一個(gè)名為Simple CSS的免費(fèi)工具，該工具可在OS X和Windows上運(yùn)行。
5、使用簡(jiǎn)單的CSS，您可以使用熟悉的點(diǎn)擊界面輕松地從頭開(kāi)始創(chuàng)建層疊樣式表，并修改現(xiàn)有樣式表。
6、使用Simple CSS，您可以管理多個(gè)CSS項(xiàng)目，.css根據(jù)需要導(dǎo)入現(xiàn)有文件，并將項(xiàng)目導(dǎo)出到.css文件中。

常用屬性大全

一 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：在樣式中加上濾鏡特效。由于此屬性內(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.Glow：建立外發(fā)光效效果
Glow(Color=?, Strength=?)
Color：是指定發(fā)光的顏色。
Strength：光的強(qiáng)度，可以是1到255之間的任何整數(shù)，數(shù)字越大，發(fā)光的范圍就越大。
9.Gray：去掉圖像的色彩，顯示為黑白圖象
10.Invert：反轉(zhuǎn)圖象的顏色，產(chǎn)生類似底片的效果
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)。"