代碼 按鈕樣式*/
.ButtonCss?{}{
????font-family:?"Tahoma",?"宋體";
????font-size:9pt;?color:?#003399;
????border:?1px?#003399?solid;
????color:006699;
????BORDER-BOTTOM:?#93bee2?1px?solid;?
????BORDER-LEFT:?#93bee2?1px?solid;?
????BORDER-RIGHT:?#93bee2?1px?solid;?
????BORDER-TOP:?#93bee2?1px?solid;
????background-image:url(../Images/bluebuttonbg.gif);
????background-color:?#e8f4ff;
????CURSOR:?hand;
????font-style:?normal?;
????width:60px;
????height:22px;
}
/**//*藍色按鈕樣式*/
.blueButtonCss?{}{
????font-family:?"Tahoma",?"宋體";
????font-size:?9pt;?color:?#003366;
????border:?0px?#93bee2?solid;
???/**//*?BORDER-BOTTOM:?#93bee2?1px?solid;?
????BORDER-LEFT:?#93bee2?1px?solid;?
????BORDER-RIGHT:?#93bee2?1px?solid;?
????BORDER-TOP:?#93bee2?1px?solid;*/
????background-image:url(../Images/blue_button_bg.gif);
????background-color:?#ffffff;
????CURSOR:?hand;
????font-style:?normal?;
}

/**//*紅色按鈕樣式*/
.redButtonCss?{}{
????font-family:?"Tahoma",?"宋體";
????font-size:?9pt;?color:?#0066cc;
????border:?1px?#93bee2?solid;
????BORDER-BOTTOM:?#93bee2?1px?solid;?
????BORDER-LEFT:?#93bee2?1px?solid;?
????BORDER-RIGHT:?#93bee2?1px?solid;?
????BORDER-TOP:?#93bee2?1px?solid;
????background-image:url(../Images/redbuttonbg.gif);
????background-color:?#ffffff;
????CURSOR:?hand;
????font-style:?normal?;
}
/**//*選擇按鈕樣式*/
.selectButtonCss
{}{
????font-family:?"Tahoma",?"宋體";
????font-size:?9pt;?color:?#0066cc;
????border:?1px?#93bee2?solid;
????BORDER-BOTTOM:?#93bee2?1px?solid;?
????BORDER-LEFT:?#93bee2?1px?solid;?
????BORDER-RIGHT:?#93bee2?1px?solid;?
????BORDER-TOP:?#93bee2?1px?solid;
????background-image:url(../Images/blue_button_bg.gif);
????background-color:?#ffffff;
????CURSOR:?hand;
????font-style:?normal?;
}????

/**//*綠色按鈕樣式*/
.greenButtonCss?{}{
????font-family:?"Tahoma",?"宋體";
????font-size:?9pt;?color:?#0066cc;
????border:?1px?#93bee2?solid;
????BORDER-BOTTOM:?#93bee2?1px?solid;?
????BORDER-LEFT:?#93bee2?1px?solid;?
????BORDER-RIGHT:?#93bee2?1px?solid;?
????BORDER-TOP:?#93bee2?1px?solid;
????background-image:url(../Images/greenbuttonbg.gif);
????background-color:?#ffffff;
????CURSOR:?hand;
????font-style:?normal?;
}
/**//*圖像按鈕*/
.imageButton
{}{
CURSOR:?hand;????/**//*改變鼠標形狀*/
}
/**//*頁面正文樣式*/
body?
{}{
????scrollbar-face-color:?#EDEDF3;
????scrollbar-highlight-color:?#ffffff;
????scrollbar-shadow-color:?#93949F;
????scrollbar-3dlight-color:?#EDEDF3;
????scrollbar-arrow-color:?#082468;
????scrollbar-track-color:?#F7F7F9;
????scrollbar-darkshadow-color:?#EDEDF3;
????
????font-size:?9pt;
????color:?#003366;
????overflow:auto;
}
TD?{}{?FONT-SIZE:?12px?}
TH?
{}{
????FONT-SIZE:?12px;?
}
/**//*************************************
下拉選擇框顯示風格
*************************************/
SELECT
{}{
????BORDER-RIGHT:?#000000?1px?solid;?
????BORDER-TOP:?#FFFFFF?1px?solid;?
????FONT-SIZE:?12px;?
????BORDER-LEFT:?#FFFFFF?1px?solid;
????COLOR:#003366;?
????BORDER-BOTTOM:?#000000?1px?solid;?
????BACKGROUND-COLOR:?#f4f4f4;
}

/**//*****************************************************
超級鏈接顯示風格
*****************************************************/
A:Link,?A:Visited{}{color:#223355;text-decoration:?none}
A:Hover{}{color:red;text-decoration:none;}

A.highlight:link,?A.highlight:visited?{}{?color:red;?text-decoration:none?}
A.highlight:hover?{}{?color:red;?text-decoration:underline?}

A.thisclass:link,?A.thisclass:visited?{}{?color:?#D9EBFD;?font-weight:bold;?text-decoration:none?}
A.thisclass:hover?{}{?color:?#FFFFFF;font-weight:bold;?}

A.navlink:link,?A.navlink:visited?{}{color:?#D9EBFD;?text-decoration:none}
A.navlink:hover?{}{color:?#FFFFFF;?text-decoration:none?}


/**//*****************************************************
線條文本編輯框顯示風格
*****************************************************/
.EditBox
{}{
????background:?#ffffff;?
????border:?1px?solid?#B7B7B7;
????color:?#003366;
????cursor:?text;
????font-family:?"Arial";
????font-size:?9pt;
????height:?18px;
????padding:?1px;
}
/**//****************************************************
多行文本框樣式
*****************************************************/
.MultiEditBox
{}{
????background:?#f8f8f8;
????border-bottom:?#B7B7B7?1px?solid;
????border-left:?#B7B7B7?1px?solid;
????border-right:?#B7B7B7?1px?solid;
????border-top:?#B7B7B7?1px?solid;
????color:?#000000;
????cursor:?text;
????font-family:?"Arial";
????font-size:?9pt;
????padding:?1px;
}

/**//*****************************************************
陰影風格的表單
*****************************************************/
.Shadow?
{}{
????position:absolute;
????z-index:1000;
????top:0px;
????left:0px;
????background:gray;
????background-color:#FFCC00;
????filter?:?progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2,positives=true);
}
/**//*****************************************************
只顯一條橫線的Text的樣式！
*****************************************************/
.logintxt
{}{
????BORDER-RIGHT:?#ffffff?0px?solid;?
????BORDER-TOP:?#ffffff?0px?solid;
????FONT-SIZE:?9pt;?
????BORDER-LEFT:?#ffffff?0px?solid;?
????BORDER-BOTTOM:?#c0c0c0?1px?solid;?
????BACKGROUND-COLOR:?#ffffff
}
/**//*****************************************************
DataGrid頁眉樣式
*****************************************************/
.dgTitle
{}{
????height:25px;
????color:#ffffff;
????font-size:large;
????text-align:center;
????vertical-align:middle;
????BACKGROUND-IMAGE:url(../images/tableTitle2.gif);?height:25px
????
}

/**//*****************************************************
DataGrid數據顯示樣式
*****************************************************/
.dgItem
{}{
????height:15px;
????text-align:center;
????vertical-align:middle;
}
/**//*****************************************************
文本框顯示樣式
*****************************************************/
.clarity
{}{
????BORDER-RIGHT:?#ffffff?0px?solid;?
????BORDER-TOP:?#ffffff?0px?solid;
????FONT-SIZE:?9pt;?
????BORDER-LEFT:?#ffffff?0px?solid;?
????BORDER-BOTTOM:?#ffffff?0px?solid;?
}
TABLE.List?{}{?border-top:?1px?solid?#000000;?border-bottom:?1px?solid?#000000;?}
TABLE.List?TH,TABLE.List?TD?{}{?padding:4px;background-color:#eeeeee;border-bottom:2px?solid?#ffffff;border-right:1px?solid?#ffffff;border-left:1px?solid?#ffffff;color:#000000}
TABLE.List?TH?{}{?background-color:#0064a8;border-top:2px?solid?#ffffff;color:#ffffff;font-weight:normal;}
TABLE.List?TH?A:link?{}{COLOR:?#ffffff;?TEXT-DECORATION:?none}
TABLE.List?TH?A:visited?{}{COLOR:?#ffffff;?TEXT-DECORATION:?none}
TABLE.List?TH?A:hover?{}{COLOR:?#ffffff;?TEXT-DECORATION:?underline}

TABLE.Form?TH,TABLE.Form?TD?{}{?padding:4px;background-color:#f6f6f6;border-bottom:1px?solid?#F6F6F6;border-right:1px?solid?#ffffff;border-left:1px?solid?#ffffff;color:#000000}
TABLE.Form?TH?{}{?background-color:#E8E8E8;border-top:1px?solid?#ffffff;color:#006699;font-size:12px;font-weight:normal;border-bottom:1px;}
TABLE.Form?TH?A:link?{}{COLOR:?#ffffff;?TEXT-DECORATION:?none}
TABLE.Form?TH?A:visited?{}{COLOR:?#ffffff;?TEXT-DECORATION:?none}
TABLE.Form?TH?A:hover?{}{COLOR:?#ffffff;?TEXT-DECORATION:?underline}

TABLE.Sample?TD?{}{?padding:2px;background-color:#f6f6f6;border-bottom:1px?solid?#000000;border-top:1px?solid?#000000;border-right:1px?solid?#000000;border-left:1px?solid?#000000;color:#000000}
TABLE.Sample?TH?{}{?background-color:#AEC1D7;border-bottom:1px?solid?#000000;border-top:1px?solid?#000000;border-right:1px?solid?#000000;border-left:1px?solid?#000000;color:#000000;font-weight:normal;}

TABLE.SampleD?TD?{}{?padding:2px;border-bottom:1px?solid?#000000;border-top:1px?solid?#000000;border-right:1px?solid?#000000;border-left:1px?solid?#000000;color:#000000}
TABLE.SampleD?TH?{}{?border-bottom:1px?solid?#000000;border-top:1px?solid?#000000;border-right:1px?solid?#000000;border-left:1px?solid?#000000;color:#000000;font-weight:normal;}

TABLE.Form1?TH,TABLE.Form1?TD?{}{?padding:4px;background-color:#BED8F3;border-bottom:1px?solid?#ffffff;border-right:1px?solid?#ffffff;border-left:1px?solid?#ffffff;color:#000000}
/**//*****************************************************
?沒有邊框的輸入框?
*****************************************************/
.NoneInput
{}{
????text-align:center;
????width:99%;height:99%;
????border-top-style:?none;
????border-right-style:?none;
????border-left-style:?none;
????background-color:?#f6f6f6;
????border-bottom-style:?none;
}

/**//*****************************************************
?扁平風格的表單樣式
*****************************************************/

/**//*****************************************************/
TABLE
{}{
????border-collapse:collapse;
}

/**//*
進度條樣式
*/
.bi-loading-status?{}{
??/**//*position:???absolute;*/
??width:????????150px;
??padding:?1px;
??overflow:?hidden;
??background-color:Gray;??
}

.bi-loading-status?.text?{}{
??white-space:??nowrap;
??overflow:?????hidden;
??width:?????????????100%;
??text-overflow:?????ellipsis;
??padding:??????1px;?
}
?

.bi-loading-status?.progress-bar?{}{
??border:???????1px?solid?ThreeDShadow;
??background:???window;
??height:???????10px;
??width:????????100%;
??padding:?1px;
??overflow:?hidden;?
}
?

.bi-loading-status?.progress-bar?div?{}{
??background:???Highlight;
??overflow:?hidden;
??height:???????100%;
??filter:???????Alpha(Opacity=0,?FinishOpacity=100,?Style=1,?StartX=0,?StartY=0,?FinishX=100,?FinishY=0);
}
/**//*****************************************************
?表頭背景
*****************************************************/
.tabletop?{}{
????BACKGROUND-IMAGE:?url(../images/tableTitle2.gif);height:25px;
}
/**//*****************************************************
大標題
*****************************************************/
.tabletitle{}{
???font-family:?"Arial";FONT-SIZE:?12pt;?COLOR:#0066cc;font-weight:bolder;filter?:?progid:DXImageTransform.Microsoft.DropShadow(color=#CCFFFF,offX=1,offY=1,positives=true);
}
/**//*****************************************************
小標題
*****************************************************/
.smalltitle{}{
???background-color:#E8E8E8;font-size:12px;font-weight:normal;color:#006699;
}
.calendarborder{}{
???border:?1px?#B7B7B7?solid;
}

?

轉載于:https://www.cnblogs.com/qiantuwuliang/archive/2009/12/04/1616751.html

總結

以上是生活随笔為你收集整理的CSS常用样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。