常用CSS集合_經驗交流

/**//*按鈕樣式*/
.ButtonCSS {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#003399；
    邊框：1px #003399 實心；
    顏色：006699；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/bluebuttonbg.gif);
    背景顏色：#e8f4ff；
    遊標：手；
    字體樣式：正常；
    寬度：60px；
    高度：22px；
}

/**//*藍色按鈕樣式*/
.blueButtonCss {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#003366；
    邊框：0px #93bee2 實心；
   /**//* 邊框底部：#93bee2 1px solid;
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；*/
    背景影像:url(../Images/blue_button_bg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}

/**//*紅色按鈕樣式*/
.redButtonCss {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#0066cc；
    邊框：1px #93bee2 實心；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/redbuttonbg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}
/**//*選擇按鈕樣式*/
.selectButtonCss
{}{
    font-family:"Tahoma","宋體";
    字體大小：9pt；顏色：#0066cc；
    邊框：1px #93bee2 實心；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/blue_button_bg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}    

/**//*綠色按鈕樣式*/
.greenButtonCss {}{
    font-family: "Tahoma", "宋體";
    字體大小：9pt；顏色：#0066cc；
    邊框：1px #93bee2 實心；
    邊框底部：#93bee2 1px 實心；
    左邊框：#93bee2 1px 實心；
    右邊框：#93bee2 1px 實心；
    上方邊框：#93bee2 1px 實心；
    背景圖像：url(../Images/greenbuttonbg.gif);
    背景顏色：#ffffff;
    遊標：手；
    字體樣式：正常；
}
/**//*圖像按鈕*/
.imageButton
{}{
CURSOR：手； /**//*改變滑鼠形狀*/
}
/**//*頁面正文樣式*/
body 
{}{
    捲軸顏色：#EDEDF3;
    捲軸則反白顯示顏色：#ffffff;
    捲軸陰影顏色：#93949F；
    捲軸-3dlight-color：#EDEDF3；
    捲軸箭頭顏色：#082468；
    捲軸軌道顏色：#F7F7F9；
    捲軸-darkshadow-顏色：#EDEDF3；

    字體大小：9pt；
    顏色：#003366；
    溢出：自動；
}
TD {}{ 字體大小：12px }
TH 
{}{
    字體大小：12px; ＃＃＃} ＃＃＃/**＆＃＆*/ ＃＃＃選擇＃＃{{}{
    右邊框：#000000 1px 實心；
    頂部邊框：#FFFFFF 1px 實線；
    字體大小：12px；
    左邊框：#FFFFFF 1px 實線；
    顏色：#003366；
    邊框底部：#000000 1px 實心；
    背景顏色：#f4f4f4；
}

/**//************************************************ *****
超級連結顯示風格
*********************************** ******************/
A:鏈接，A:已訪問{}{color:#223355;text-decoration:無}
A:懸停{} {顏色：紅色;文字裝飾：無;}

A.highlight：鏈接，A.highlight：訪問過{}{顏色：紅色;文字裝飾：無}
A.highlight：懸停{}{顏色：紅色;文字裝飾：下劃線}

A.thisclass：鏈接，A.thisclass：已訪問{}{顏色：#D9EBFD;字體粗細：粗體；文字裝飾：無}
A.thisclass：懸停{}{顏色：#FFFFFF;字體粗細：粗體; }

A.navlink:鏈接，A.navlink:訪問過{}{color:#D9EBFD;文字裝飾：無}
A.navlink：懸停{}{顏色：#FFFFFF;文字裝飾：無}


/**//************************************************ *****
線條文字編輯框顯示風格
********************************* ********************/
.EditBox
{}{
    背景：#ffffff;
    邊框：1px 實心#B7B7B7；
    顏色：#003366；
    遊標：文字；
    字體系列：「Arial」；
    字體大小：9pt；
    高度：18px；
    內邊距：1px；
}
/**//************************************************ ****
多行文字方塊樣式
*********************************** ******************/
.MultiEditBox
{}{
    背景: #f8f8f8;
    邊框底部：#B7B7B7 1px 實心；
    左邊框：#B7B7B7 1px 實線；
    右邊框：#B7B7B7 1px 實心；
    上方邊框：#B7B7B7 1px 實心；
    顏色：#000000；
    遊標：文字；
    字體系列：「Arial」；
    字體大小：9pt；
    內邊距：1px； ＃＃＃} ＃＃＃＃＃＃/**＆＃＆*/ ＃＃＃。陰影 ＃＃＃}{
    position:absolute;
    z-index:1000;
    top:0px;
    left:0px top:0px;
    left:0px 
10color #    filter : progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2,positives=true);
}
/**//********* ********************************************
只顯一條橫線的Text的樣式！
*********************************************** ***** ******/
.logintxt
{}{
    右邊框：#ffffff 0px 實心；
    頂部邊框：#ffffff 0px 實心；
    字體大小：9pt；
    左邊框：#ffffff 0px 實心；
    邊框底部：#c0c​​0c0 1px 實心；
    背景顏色： #ffffff
}
/**//************************************************ *****
DataGrid頁眉樣式
***************************************** ******************/
.dgTitle
{}{
    高度：25px;
    顏色：#ffffff;
    字體大小：大；
    文字對齊：置中；
    垂直對齊：中間；
    背景影像:url(../images/tableTitle2.gif);高度：25px

}

/**//************************************************ *****
DataGrid資料顯示樣式
*********************************** ******************/
.dgItem
{}{
    高度：15px;
    文字對齊：置中；
    垂直對齊：中間；
}
/**//************************************************ *****
文字方塊顯示樣式
*********************************** ******************/
.clarity
{}{
    右邊框：#ffffff 0px solid；
    頂部邊框：#ffffff 0px 實心；
    字體大小：9pt；
    左邊框：#ffffff 0px 實心；
    邊框底部：#ffffff 0px 實心；
}
TABLE.List {}{ border-top: 1px solid #000000;邊框底部：1px 實心#000000； }
TABLE.List TH，TABLE.List TD {}{} 填充：4px；背景顏色：#eeeeee；邊框底部：2px 實心#ffffff；右邊框：1px 實心#ffffff；左邊框：1px固體#ffffffff ;顏色：#000000}
TABLE.List TH {}{}背景顏色：#0064a8;邊框頂部：2px 固體#ffffff;顏色：#ffffff;字體粗細：正常;}
TABLE.List TH A ：連結{}{COLOR：#ffffff;文字裝飾：無}
TABLE.List TH A：曾經造訪過{}{COLOR：#ffffff;文字裝飾：無}
TABLE.List TH A:hover {}{COLOR: #ffffff;文字裝飾：底線}

TABLE.Form TH，TABLE.Form TD {}{} 填滿：4px；背景顏色：#f6f6f6；邊框底部：1px 實心#F6F6F6；邊框右：1px 實心#ffffff; border-left:1px solid #ffffff;color:#000000}
TABLE.Form TH {}{背景顏色：#E8E8E8；邊框頂部：1px 實心#ffffff；顏色：#006699；字體大小：12px；字體粗細：正常；邊框底部：1px;}
TABLE.Form TH A：連結{}{顏色：#ffffff;文字裝飾：無}
TABLE.Form TH A：曾經造訪過{}{COLOR：#ffffff;文字裝飾：無}
TABLE.Form TH A:hover {}{COLOR: #ffffff;文字裝飾：底線}

TABLE.Sample TD {}{} 填滿：2px；背景顏色：#f6f6f6；邊框底部：1px 實心#000000；邊框頂部：1px 實心#000000；邊框-右：1像素實心#000000；左邊框：1 像素實心#000000；顏色：#000000}
TABLE.Sample TH {}{}背景顏色：#AEC1D7；邊框底部：1 像素實心#000000；邊框尺寸#000000;border-right:1px solid #000000;border-left:1px solid #000000;color:#000000;font-weight:normal;}

TABLE.SampleD TD2 {x} ;邊框底部:1像素實心#000000;邊框頂部:1像素實心#000000;邊框右:1像素實心#000000;邊框左:1像素實心#000000;顏色:#000000}
TABLE.SampleD TH { }{}邊框底部：1px固體#000000；邊框頂部：1px固體#000000；邊框右：1像素固體#000000；邊框左：1像素固體#000000；顏色：#000000；字體粗細：正常;}
##
#TABLE.Form1 TH，TABLE.Form1 TD {}{} 填滿：4px；背景顏色：#BED8F3；邊框底部：1px 實心#ffffff；右邊框：1px 實心#ffffff；邊框-left:1px solid # ffffff;color:#000000}
/**//************************************************ *****
 沒有邊框的輸入方塊 
********************************** *******************/
.NoneInput
{}{
    text-align:center;
    寬度：99%；高度：99%；
    邊框頂部樣式：無；
    右邊框樣式：無；
    左邊框樣式：無；
    背景顏色：#f6f6f6；
    邊框底部樣式：無； ＃＃＃}＃＃＃＃＃＃/**＆＃＆*/＃{＃＃＃＃＃ #    邊框折疊：折疊；
}

/**//************************************************ *****
 扁平風格的表單樣式
********************************** *******************/
.bi-loading-status {}{
  /**//************************************************ **** *****/
  寬度：        150px；
  內邊距：1px；
  溢出：隱藏；
  背景顏色：灰色；
}

 

.bi-loading-status .text {}{
  空白：  nowrap;
  溢出：     隱藏；
  寬度：             100%；
  文字溢位：     省略號；
  內邊距：      1px；
}


.bi-loading-status .progress-bar {}{
  邊框：       1px solid ThreeDShadow;
  背景：   視窗；
  高度：       10px；
  寬度：        100%；
  內邊距：1px；
  溢出：隱藏；
}


.bi-loading-status .progress-bar div {}{
  背景：   突出顯示；
  溢出：隱藏；
  高度：       100%；
  過濾器：       Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
/**//************************************************ *****
 表頭背景
************************************ *****************/
.tabletop {}{
    背景圖片： url(../images/tableTitle2.gif);高度:25px;
}
/**//************************************************ *****
大標題
************************************* ****************/
.tabletitle{}{
   font-family: "Arial";FONT-SIZE: 12pt;顏色：#0066cc；字體粗細：粗體；過濾器：progid：DXImageTransform.Microsoft.DropShadow（顏色=#CCFFFF，offX=1，offY=1，正值=true）;
}
/**//************************************************ *****
小標題
************************************* ****************/
.smalltitle{}{
   背景顏色:#E8E8E8;字體大小:12px;字體粗細:正常;顏色:#006699;
}
.calendarborder{}{
   邊框： 1px #B7B7B7 solid;
}