[轉貼自]http://www.blog.e-creative.tw/archives/1064
ss 常用語法說明
連結樣式
a {/*放入所有超連結樣式*/}
a:link {/*放入超連結文字樣式*/}
a:visited {/*放入瀏覽過的連結文字樣式*/}
a:active {/*放入按下連結的樣式*/}
a:hover {/*放入滑鼠移至連結樣式*/}
文字變化
{
color: #ffffff; /*文字顏色*/;
font-family: 微軟正黑體; /*文字字型*/;
font-size: 9pt; /*文字大小*/;
font-style: italic; /*文字斜體*/;
font-variant: small-caps; /*小字體*/;
letter-spacing: 1pt; /*字體間距離*/;
line-height: 200%; /*設定行高*/;
font-weight: bold; /*文字粗體*/;
vertical-align: sub; /*下標字*/;
vertical-align: super; /*上標字*/;
text-decoration: line-through; /*加刪線*/;
text-decoration: overline; /*加頂線*/;
text-decoration: underline; /*加底線*/;
text-decoration: none; /*刪除連結底線*/;
text-transform: capitalize; /*字首大寫*/;
text-transform: uppercase; /*英文大寫*/;
text-transform: lowercase; /*英文小寫*/;
text-align: right; /*文字靠右對齊*/;
text-align: left; /*文字靠左對齊*/;
text-align: center; /*文字置中對齊*/;
text-align: justify; /*文字分散對齊*/;
word-spacing: 5px; /*半形空格的間距*/;
vertical-align: top; /*垂直向上對齊*/;
vertical-align: bottom; /*垂直向下對齊*/;
vertical-align: middle; /*垂直置中對齊*/;
vertical-align: text-top; /*文字垂直向上對齊*/;
vertical-align: text-bottom; /*文字垂直向下對齊*/;
}
項目符號及編號
{
list-style-type: none; /*不編號*/;
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; /*縮排*/
}
背景樣式
{
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; /*在x軸重複排列*/;
background-repeat : repeat-y; /*在y軸重複排列*/;
background-position : 90% 90%; /*背景圖片x與y軸的位置*/;
background-position : top; /*向上對齊*/ ;
background-position : bottom; /*向下對齊*/ ;
background-position : left; /*向左對齊*/ ;
background-position : right; /*向右對齊*/ ;
background-position : center; /*置中對齊*/;
}
滑鼠樣式變化
{
cursor: progress;/*作業中*/;
cursor: crosshair;/*十字型 */;
cursor: n-resize;/*箭頭朝上*/;
cursor: s-resize;/*箭頭朝下*/;
cursor: move;/*十字箭頭*/;
cursor: e-resize;/*箭頭朝右*/;
cursor: w-resize;/*箭頭朝左*/;
cursor: help;/*加一問號*/;
cursor: nw-resize;/*箭頭朝左上*/;
cursor: se-resize;/*箭頭斜右下*/;
cursor: text;/*文字I型*/;
cursor: sw-resize;/*箭頭斜左下*/;
cursor: ne-resize;/*箭頭朝右上*/;
cursor: wait;/*漏斗*/;
cursor: pointer;/*手型*/;
cursor: not-allowed;/*無法使用 */;
cursor: url(“游標檔名.cur”),text;;/*游標圖案*/;
}
框線變化
{
border-top:/*上框線*/;
border-bottom:/*下框線*/;
border-left:/*左框線*/;
border-right:/*右框線*/;
border:/*四邊框線*/;
}
框線樣式
solid /*實線框*/
dotted /*虛線框*/
double /*雙線框*/
groove /*立體內凸框*/
ridge /*立體浮凸框*/
inset /*凹框*/
outset /*凸框*/
框線樣式解說
例 border: 1px solid #6699cc;
邊界樣式
{
margin-top: 10px; /*上邊界*/;
margin-right: 10px; /*右邊界值*/;
margin-bottom: 10px; /*下邊界值*/;
margin-left: 10px; /*左邊界值*/;
margin: 10px; /*四邊邊界值*/;
}
邊框空白
{
padding-top: 10px; /*上邊框空白*/;
padding-right: 10px; /*右邊框空白*/;
padding-bottom: 10px; /*下邊框空白*/;
padding-left: 10px; /*左邊框空白*/;
}
物件定位
{
position: relative;top: 10px;left: 10px; /*物件左上角開始位置*/ ;
position : absolute;top: 10px;left: 10px; /*網頁左上角開始位置*/;
}
透明
{
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
Min-Height (最小高度)
{
min-height:500px;
height:auto; !important
height:500px;
}
PRE Tag (標籤預格式)
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
留言列表
