CSS常用样式

最新推荐文章于 2024-04-26 16:40:43 发布
最新推荐文章于 2024-04-26 16:40:43 发布
阅读量462 收藏
点赞数
分类专栏： 其他 文章标签： css datagrid border 文本编辑 url button

 

常用CSS样式--按钮,图像,页面,选择框,超级链接,文本编辑框,表单,DataGrid,进度条, 表头按钮样式*/
.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;

shulin85
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 常用样式(分享)
09-24
下面小编就为大家带来一篇css 常用样式(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
常用CSS樣式
古烟的技术专栏
05-08 91
/**//*按钮样式*/ .ButtonCSS {}{ font-family: "Tahoma", "宋体"; font-size:9pt; color: #003399; border: 1px #003399 solid; color:006699; BORDER-BOTTOM: #93bee2 1px solid; BORDE...
常用CSS
伟大的饺子
04-14 317
 /*按钮样式*/.ButtonCss{ font-family: "Tahoma" , "宋体"; font-size: 9pt; color: #003399; border: 1px #003399 solid; color: #006699; border-bottom: #93bee2 1px solid;
CSS样式开发大全！
weixin_44179306的博客
11-13 708
CSS/层叠样式表 CSS 指层叠样式表（Cascading Style Sheets）。 您将学习如何使用 CSS 同时控制整个站点的样式和布局。 通过与 XHTML 结合，CSS 可以帮助我们实行表现与结构分离的开发模式。 通过使用 CSS 来提升工作效率！ 什么是CSS？: CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。 CSS 是层叠样式表 ( ...
CSS样式案例(1)-文字的排版
weixin_30723433的博客
09-08 159
本篇介绍的是小窗文字内容的排版，通过该篇文章可以让小伙伴们熟悉以下几个知识点: word-space、overflow、text-overflow。 最终的展示效果如下: 参考步骤: 1. 建立html文档，并使用dl,dt,dd元素将内容放进去。 <!DOCTYPE html> <html> <head> &l...
css常用样式
12-03
css常用样式，包括样式重置，常用样式总结，样式缩写
css常用样式.docx
02-27
.
CSS常用样式总结积累
06-08
NULL 博文链接：https://forlan.iteye.com/blog/2148980
css3实现超好看的搜索框和按钮.zip
07-04
css3实现超好看的搜索框和按钮是一款非常实用的css3特效，实现了超好看的搜索框和按钮样式，主要还是用了普通的样式代码，添加了部分css3元素代码。
博客园css样式代码
weixin_30467087的博客
07-31 164
文章有一个好的排版，将能够增加阅读者对其内容的兴趣。本文总结了如何美化博客园中文章的部分显示样式。美化文章标题的显示样式、增添LaTex数学公式的显示、目录索引的显示、添加文章末尾的固定信息。 0 获取权限 首先，在自定一个博客样式之前，我们需要进入博客园自定义博客模板的页面，向博客园管理团队申请页面运行js的权限。【博客园】->【设置】->【博客设置】，点击页面上的js...
css标题样式_CSS的标题集样式
culiao9310的博客
09-28 9865
css标题样式View demo 查看演示Download Source 下载源In this tutorial I’m hoping to give you some ideas and inspiration for your current and future projects! 在本教程中，我希望为您当前和将来的项目提供一些想法和启发！ Today...
小标题两侧加横线或背景图片自适应布局实现技巧
sunshine的博客
12-03 1930
方法一：使用背景图html结构：<div class="tit-bar"> <div class="deg">满意度调查</div> </div>css结构：.tit-bar{ background:url(../img/line-bg.png) repeat-x center; margin:0 auto; padding:5px 0; } .tit-bar .deg
scrollintoview方法滚动距离顶部距离
最新发布
weixin_55932347的博客
04-26 89
方法是 DOM API 的一部分，用于将元素滚动到视图中。这个方法接收一个布尔值参数。，指示是否需要滚动到视图的顶部。
基于 Flexbox 的纯 CSS 框架：兼容性好、文档丰富 | 开源日报 No.232
开源服务指南
04-23 345
想要快速搭建现代化的网页界面吗？不妨试试基于 Flexbox 技术的现代 CSS 框架 bulma 吧！bulma 提供快速安装方式，兼容性良好，不含 JavaScript 部分，让您的网页在主流浏览器上运行良好。丰富的文档和在线浏览功能，让您快速上手，让网页设计变得更加简单和高效。快来尝试 bulma，让您的网页设计更上一层楼！
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 483
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
css常用hover样式
07-08
常用的CSS hover样式有以下几种： 1. 改变背景颜色：通过设置hover时的背景颜色来提高交互效果。 ```css .element:hover { background-color: #f00; } ``` 2. 改变文本颜色：通过设置hover时的文本颜色来突出显示...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值