常用的CSS样式备份精华
Download as DOC, PDF0 likes129 views
The document contains CSS styles for common elements like buttons, links, tables, forms and text boxes. It includes styles for different types of buttons like blue, red, green buttons. It also contains styles for tables, dropdowns, text boxes, progress bars and calendars. The styles define properties for fonts, colors, borders, backgrounds etc.
常用的CSS样式备份精华
- 1. 常用的 CSS 样式备份精华 /*按钮样式*/ .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 {
- 2. 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; } /************************************* 下拉选择框显示风格 *************************************/
- 3. 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;
- 4. 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; } /***************************************************** 文本框显示样式
- 5. *****************************************************/ .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; } /*****************************************************
- 6. 扁平风格的表单样式 *****************************************************/ /*****************************************************/ 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;
- 7. } /***************************************************** 大标题 *****************************************************/ .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; }