Summary of common CSS style effects

Although CSS style learning requires us to do more practice, need to do more cases, think of thinking, but sometimes attention to the collection and collation of data is also very important, in the actual development will often play a multiplier effect. Rich content is also available in Www.phpq.net's documentation. Here are some common CSS styles for buttons, text boxes, and forms. We can refer to it.

One, button style

. buttoncss {
font-family: "Tahoma", "Song Body"; /*www.phpq.net*/
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;
}

Two, blue button

. bluebuttoncss {
font-family: "Tahoma", "Song Body"; /*www.phpq.net*/
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;
}

Three, red button

. redbuttoncss {
font-family: "Tahoma", "Song Body"; /*www.phpq.net*/
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;
}

Iv. Select button

. selectbuttoncss{
font-family: "Tahoma", "Song Body"; /*www.phpq.net*/
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;
}

Five, green button

. greenbuttoncss {
font-family: "Tahoma", "Song Body"; /*www.phpq.net*/
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;
}

Vi. image Buttons

. imagebutton{
Cursor:hand; /* Change mouse shape www.phpq.net*/
}

Vii. page Body

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; /*www.phpq.net*/
Color: #003366;
Overflow:auto;
}
td {FONT-SIZE:12PX}
th {
font-size:12px;
}
Eight, drop-down selection box

select{
Border-right: #000000 1px solid;
Border-top: #ffffff 1px solid;
font-size:12px; /*www.phpq.net*/
Border-left: #ffffff 1px solid;
Color: #003366;
Border-bottom: #000000 1px solid;
Background-color: #f4f4f4;
}

Nine, line text edit box

. editbox{
Background: #ffffff;
border:1px solid #b7b7b7;
Color: #003366;
Cursor:text;
font-family: "Arial";
font-size:9pt;
height:18px;
padding:1px; /*www.phpq.net*/
}

Ten, multiline text box

. 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; /*www.phpq.net*/
}

Xi. Shaded style forms

. Shadow {
Position:absolute;
z-index:1000;
top:0px;
left:0px; /*www.phpq.net*/
Background:gray;
Background-color: #ffcc00;
Filter:progidximagetransform.microsoft.dropshadow (color= #ff404040, offx=2,offy=2,positives=true);
}

12, only a horizontal line of the input box

. logintxt{
Border-right: #ffffff 0px solid;
Border-top: #ffffff 0px solid;
font-size:9pt; /*www.phpq.net*/
Border-left: #ffffff 0px solid;
Border-bottom: #c0c0c0 1px solid;
Background-color: #ffffff
}

13, no border of the input box

. 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;
}