一、紅色按鈕
.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 ;
}

二、藍色按鈕
.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 ;
}

三、綠色按鈕
.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 ;
}

四、選擇按鈕
.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 ;
}

五、按鈕樣式
.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;
}

六、圖像按鈕
.imagebutton{
??? cursor: hand;??? /*改變鼠標形狀*/
}

七、只顯一條橫線的輸入框
.logintxt{
??? border-right: #ffffff 0px solid;
??? border-top: #ffffff 0px solid;
??? font-size: 9pt; /*www.52css.com*/
??? border-left: #ffffff 0px solid;
??? border-bottom: #c0c0c0 1px solid;
??? background-color: #ffffff
}

八、沒有邊框的輸入框
.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;
}

九、陰影風格的表單
.shadow {
??? position:absolute;
??? z-index:1000;
??? top:0px;
??? left:0px; /*www.52css.com*/
??? background:gray;
??? background-color:#ffcc00;
??? filter : progidximagetranorm.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);
}

十、頁面正文
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; /*www.52css.com*/
??? border-left: #ffffff 1px solid;
??? color:#003366;
??? border-bottom: #000000 1px solid;
??? background-color: #f4f4f4;
}

十二、線條文本編輯框
.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;
}

/**//*按鈕樣式*/
.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數(shù)據(jù)顯示樣式
*****************************************************/
.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;
}

總結(jié)

以上是生活随笔為你收集整理的收集的常用css页面及表单表格样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。