Community Learn Tools Library Leisure
search
English
Home > Web Front-end > CSS Tutorial > body text

Commonly used CSS collection_Experience exchange

WBOY
Release： 2016-05-16 12:08:47
Original
1617 people have browsed it

/**//*Button style*/
.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;
}

/**//*Blue button style*/
.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 ;
}

/**//*Red button style*/
.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 ;
}
/**//*Select button style*/
.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 ;
}    

/**//*Green button style*/
.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 ;
}
/**//*Image button*/
.imageButton
{}{
CURSOR: hand;    /**//*Change the mouse shape*/
}
/**//*Page text style*/
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; 
}
/**//**********************************
Drop-down selection box display style
*************************************/
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;
}

/**//************************************************ *****
Hyperlink display style
**************************************** ********************/
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 }


/**//************************************************ *****
Line text editing box display style
************************************ **********************/
.EditBox
{}{
    background: #ffffff; 
    border: 1px solid #B7B7B7;
    color: #003366;
    cursor: text;
    font-family: "Arial";
    font-size: 9pt;
    height: 18px;
    padding: 1px;
}
/**//************************************************ ****
Multiline text box style
**************************************** ********************/
.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 style form
**************************************** ********************/
.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);
}
/**//********* *********************************************
Only one display Horizontal Text style!
*****************************************************/
.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 Header Style
****************************************** ********************/
.dgTitle
{}{
    height:25px;
    color:#ffffff;
    font-size:large;
    text-align:center;
    vertical-align:middle;
    BACKGROUND-IMAGE:url(../images/tableTitle2.gif); height:25px

}

/**//************************************************ *****
DataGrid data display style
**************************************** ********************/
.dgItem
{}{
    height:15px;
    text-align:center;
    vertical-align:middle;
}
/**//************************************************ *****
Text box display style
****************************************** ********************/
.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}
/**//************************************************ *****
Input box without border
********************************** *******************/
.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;
}

/**//************************************************ *****
Flat style form style
********************************** *******************/

 

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

/**//*
Progress bar style
*/
.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);
}
/**//************************************************ *****
Header background
************************************ *****************/
.tabletop {}{
    BACKGROUND-IMAGE: url(../images/tableTitle2.gif);height:25px;
}
/**//************************************************ *****
Headline
************************************* ****************/
.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);
}
/**//************************************************ *****
Subtitle
**************************************** ****************/
.smalltitle{}{
   background-color:#E8E8E8;font-size:12px;font-weight:normal;color:#006699;
}
.calendarborder{}{
   border: 1px #B7B7B7 solid;
}

Related labels：
常用CSS集合
source：php.cn
Previous article：Lesson02_04 Form Label (2)_Basic Tutorial Next article：Making a WEB online editor - inserting HTML tags_Experience exchange
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Invalid React child element (found: Object with key {clientVersion}). If you want to render a collection of child elements, use an array instead I have a multi-step form and when I try to submit it shows this error. However, if I use c...
From 2024-04-06 16:25:39
0
1
346
I'm having trouble with a CSS grid where the height isn't what I expected, what mistakes might I be making? I'm currently learning CSS grids and was asked to make this card by breaking it into a gri...
From 2024-04-06 12:52:14
0
1
339
Website using Live Server doesn't work when I launch it from a file I tried several browsers and in every case the website works fine with LiveServer. On the ...
From 2024-04-06 12:46:18
0
1
403
Parent's padding ignored by sticky positioned child How to prevent sticky elements from going behind the header? The current code snippet uses...
From 2024-04-06 11:42:51
0
1
338
Upload multiple images to Firebase collection and Firebase using React Native Expo I'm trying to use ReactNative "expo" to upload multiple images to Firebase Stora...
From 2024-04-04 23:20:02
0
1
1468
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template