常用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 实心；*/
    background-image: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
{}{
光标：手；    /**//*改变鼠标形状*/
}
/**//*页面正文样式*/
正文
{}{
    滚动条面颜色：#EDEDF3;
    滚动条突出显示颜色：#ffffff；
    滚动条阴影颜色：#93949F；
    scrollbar-3dlight-color：#EDEDF3；
    滚动条箭头颜色：#082468；
    滚动条轨道颜色：#F7F7F9；
    滚动条暗影颜色：#EDEDF3；

    字体大小：9pt；
    颜色：#003366；
    溢出：自动；
}
TD {}{ 字体大小：12px }
TH 
{}{
    字体大小：12px； 
}
/**//*************************************
下拉选择框显示风格
*************************************/
选择
{}{
    右边框：#000000 1px solid; 
    顶部边框：#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:hover {}{color: #FFFFFF; 文本装饰：无}


/**//*****************************************************
线条文本编辑框显示风格
*****************************************************/
.EditBox
{}{
    背景：#ffffff; 
    边框：1px 实心#B7B7B7；
    颜色：#003366；
    光标：文本；
    字体系列：“Arial”；
    字体大小：9pt；
    高度：18px；
    内边距：1px；
}
/**//****************************************************
多行文本框样式
*****************************************************/
.MultiEditBox
{}{
    背景：#f8f8f8;
    边框底部：#B7B7B7 1px solid；
    左边框：#B7B7B7 1px solid；
    右边框：#B7B7B7 1px 实心；
    边框顶部：#B7B7B7 1px solid；
    颜色：#000000；
    光标：文本；
    字体系列：“Arial”；
    字体大小：9pt；
    内边距：1px；
}

/**//*****************************************************
阴影风格的表单
*****************************************************/
.Shadow 
{}{
    位置：绝对；
    z-index:1000;
    顶部：0px；
    左：0px；
    背景：灰色；
    背景颜色：#FFCC00；
    过滤器 : progid:DXImageTransform.Microsoft.DropShadow(color=#FF404040,offX=2,offY=2,positives=true);
}
/**//**************************************** **************
只显一条横线的文字风格！
**************************************************** ******/
.logintxt
{}{
    右边框：#ffffff 0px solid； 
    顶部边框：#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固体#ffffff;颜色：#000000}
TABLE.List TH {}{}背景颜色：#0064a8;边框顶部：2px 固体#ffffff;颜色：#ffffff;字体粗细：正常;}
TABLE.List TH A：链接{}{COLOR：#ffffff; 文本装饰：无}
TABLE.List TH A：访问过 {}{COLOR：#ffffff; 文本装饰：无}
TABLE.List TH A：悬停 {}{COLOR：#ffffff; 文本装饰：下划线}

TABLE.Form TH、TABLE.Form TD {}{} 填充：4px；背景颜色：#f6f6f6；边框底部：1px 实心#F6F6F6；边框右：1 像素实心#ffffff;border-left:1px solid #ffffff;color:#000000}
TABLE.Form TH {}{ 背景颜色:#E8E8E8;border-top:1px solid #ffffff;color:#006699;font-大小：12px；字体粗细：正常；边框底部：1px；}
TABLE.Form TH A：链接{}{COLOR：#ffffff; 文本装饰：无}
TABLE.Form TH A：访问过{}{COLOR：#ffffff; 文本装饰：无}
TABLE.Form TH A:hover {}{COLOR: #ffffff; 文本装饰：下划线}

TABLE.Sample TD {}{ padding:2px;background-color:#f6f6f6;border-bottom:1px solid #000000;border-top:1px solid #000000;border-右：1px solid #000000；左边框：1px solid #000000;颜色：#000000}
TABLE.Sample TH {}{ 背景颜色：#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 {}{ 填充:2px;边框底部:1像素实心#000000;边框顶部:1像素实心#000000;边框右:1像素实心#000000;边框左:1像素实心#000000;颜色:#000000}
TABLE.SampleD TH {}{}边框底部：1像素实心#000000；边框顶部：1像素实心#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
{}{
    文本对齐：中心；
    宽度：99%；高度：99%；
    边框顶部样式：无；
    右边框样式：无；
    左边框样式：无；
    背景颜色：#f6f6f6；
    边框底部样式：无；
}

/**//*****************************************************
 扁平风格的表单样式
*****************************************************/

 

/**//**************************************************** *****/
表格
{}{
    边框折叠：折叠；
}

/**//*
进度条样式
*/
.bi-loading-status {}{
  /**//*位置：   绝对；*/
  宽度：        150px；
  内边距：1px；
  溢出：隐藏；
  背景颜色：灰色；  
}

 

.bi-loading-status .text {}{
  white-space:  nowrap;
  溢出：     隐藏；
  宽度：             100%；
  文本溢出：     省略号；
  内边距：      1px； 
}


.bi-loading-status .progress-bar {}{
  边框：       1px solid ThreeDSshadow;
  背景：   窗口；
  高度：       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{}{
   字体系列：“Arial”；字体大小：12pt ; 颜色：#0066cc；字体粗细：粗体；过滤器：progid：DXImageTransform.Microsoft.DropShadow（颜色=#CCFFFF，offX=1，offY=1，正值=true）;
}
/**//*****************************************************
小标题
*****************************************************
小标题
**************************** *************************/
.smalltitle{}{    背景颜色：#E8E8E8;字体大小：12px;字体粗细：正常；颜色：#006699； } .calendarborder{}{    边框：1px #B7B7B7 solid; }