5 most popular classic CSS properties tutorial

Here are some of the most commonly used CSS properties when writing Web site CSS styles, and mastering them is a must!

1. CSS Clip
The clip property is like a mask. It allows you to mask the contents of a rectangular element. To clip an element: You must specify position as absolute. Then, specify the Top,right,bottom, and left values, relative to the element.

Image Clip instance ( demo )
The following example shows how to use the Clip property to mask a picture. First, specify the <div> element position:relative. Then, specify the element Position:absolute and the corresponding margins.


. Clip{
Position:relative;
Height:130px;
Width:200px;
Border:Solid 1px #ccc;
}
. clip img{
Position:Absolute;
Clip:rect (30px 165px 100px 30px);
}



image adjustments and clips (Demo)
In this example, I'll show you how to adjust and clip the image. My original image is in rectangular format. I want to shrink it by 50% to create a square format for the thumbnail gallery. So, I use the width and Height properties to adjust the image and use the Clip property to cover them up. Then I use the left property to move the image to the right 15px.


. Gallery Li{
Float: Left;
Margin:0 10px 0 0;
Position:relative;
Width:70px;
Height:70px;
Border:Solid 1px #000;
}
. Gallery img{
Width:100px;
Height:70px;
Position:Absolute;
Clip:rect (0 85px 70px 15px);
Left:-15px;</span>
}




2. Min-height ( Demo)
The Min-height property allows you to specify the minimum height of the element. But it's useful when you need to balance the layout. I'm in myJob BoardUse it to make sure that the content area is always higher than the sidebar.


. With_minheight{
Min-height:550px;
}


IE6 's min-height hack
Note: Min-height does not support IE6, but here is amin-height hack。

. With_minheight{
Min-height:550px;
Height:Auto!important;
Height:550px;
}



3. White-space ( demo )
The White-space property specifies how an element handles whitespace. For example, specifying WHITE-SPACE:NOWRAP will prevent text from wrapping to the next line.


em{
White-space:nowrap;
}


4. Cursor ( demo )
If you change the behavior of the button, you should also change the cursor. For example, when a button is disabled, the cursor should be changed to the default (arrow) to indicate that it is not clickable. Therefore, the cursor property is useful for developing Web applications.


. Disabled{
Cursor:default;
}

. Busy{
Cursor: Wait;
}

. Clickable:hover{
Cursor:Pointer;
}


5. Display Inline/block ( demo )
You may not know that a block element renders in a new row, while an inline element is rendered on the same line. <div>,

. Block EM{
Display: Block;
}

. inline h4, inline p{
Display:inline;
}