12 most practical CSS skills

Non-original, source network, English version: http://stylizedweb.com/2008/03/12/most-used-css-tricks/

1: rounded corners without images --
Rounded corners without images <Div id = "Container">
<B class = "rtop">
<B class = "R1"> </B> <B class = "R2"> </B> <B class = "R3"> </B> <B class = "r4"> </B>
</B>
<! -Content goes here->
<B class = "rbottom">
<B class = "r4"> </B> <B class = "R3"> </B> <B class = "R2"> </B> <B class = "R1"> </B>
</B>
</Div>

. Rtop,. rbottom { Display : Block }
. Rtop *,. rbottom * { Display : Block ; Height : 1px ; Overflow : Hidden }
. R1 { Margin : 0 5px }
. R2 { Margin : 0 3px }
. R3 { Margin : 0 2px }
. R4 { Margin : 0 1px ; Height : 2px }  
2: style your order list --

Style your order list<Ol>
<Li>
<P> This is line one </P>
</LI>
<Li>
<P> here is line two </P>
</LI>
<Li>
<P> and last line </P>
</LI>
</OL>

Ol {
Font : Italic 1em Georgia, times, Serif ;
Color : #999999 ;
}
Ol P {
Font : Normal. 8em Arial, Helvetica, sans-serif ;
Color : #000000 ;
}   3: tableless forms --
Tableless forms

name


address

city

label, input {
display : block ;
width : 150px ;
float : left ;
margin-bottom : 10px ;
}

Label{
Text-align:Right;
Width:75px;
Padding-Right:20px;
}

BR {
Clear : Left ;
}   4: Double BLOCKQUOTE --
Double BLOCKQUOTE BLOCKQUOTE: First-letter {
Background : URL (images/open-quote.gif) No-repeat left top ;
Padding-left : 18px ;
Font : Italic 1.4em Georgia, "Times New Roman", times, Serif ;
}   5: gradient text effect --
Double BLOCKQUOTE <H1> <span> </span> CSS gradient text

H1 {
Font : Bold 330%/100% "lucida grande" ;
Position : Relative ;
Color : #464646 ;
}
H1 Span {
Background : Url(gradient.png) Repeat-x ;
Position : Absolute ;
Display : Block ;
Width : 100% ;
Height : 31px ;
}

<! -[If lt IE 7]>
<Style>
H1 Span {
Background : None ;
Filter : Progid: dximagetransform.microsoft.alphaimageloader(src+'gradient.png ', sizingmethod = 'Scale ') ;
}
</Style> 6: vertical centering with line-height --
Vertical centering with line-heightDiv {
Height : 100px ;
}
Div * {
Margin : 0 ;
}
Div P {
Line-height : 100px ;
}
<P> content here </P> 7: rounded corners with images --
Rounded corners with images <Div class = "roundcont">
<Div class = "roundtop">
Width = "15" Height = "15" class = "Corner"
Style = "display: none"/>
</Div>

Content

<Div class = "roundbottom">
Width = "15" Height = "15" class = "Corner"
Style = "display: none"/>
</Div>
</Div>

. Roundcont{
Width:250px;
Background-color:# F90;
Color:# Fff;
}

. Roundcont P{
Margin:0 10px;
}

. Roundtop{
Background:Url(tr.gif) No-repeat top right;
}

. roundbottom {
background : url(br.gif) No-repeat top right ;
}

IMG. Corner{
Width:15px;
Height:15px;
Border:None;
Display:Block! Important;
}8: Multiple Class Name

. Class1{ Border : 2px solid #666 ;   }
. Class2 {
Padding : 2px ;
Background : # Ff0 ;
}   9: center horizontally --
Center horizontally <Div id = "Container"> </div>
# Container {
Margin : 0px auto ;
}  
10: CSS drop caps --
CSS drop caps<P class = "Introduction"> This paragraph has the class "Introduction ". if your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </P>

P. Introduction: First-letter {
Font-size : 300% ;
Font-weight : Bold ;
Float : Left ;
Width : 1em ;
}   11: Prevent line breaks in links, oversized content to brake A {
White-space : Nowrap ;
}

# Main{
Overflow:Hidden;
}12: show Firefox scrollbar, remove textarea scrollbar in IEHtml{
Overflow:-Moz-scrollbars-vertical;
}

textarea {
overflow : auto ;
}