10 useful CSS Techniques

 

1. Reset the default settings of the browser

Add the following code to your global css file:

/* 1. Reset browser defaults then reset the browser font size */
Body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p,
Blockquote, th, td {margin: 0; padding: 0 ;}
Table {border-collapse: collapse; border-spacing: 0 ;}
Fieldset, img {border: 0 ;}
Address, caption, cite, code, dfn, em, strong, th, var {font-style: normal; font-weight: normal ;}
Ol, ul {list-style: none ;}
Caption, th {text-align: left ;}
H1, h2, h3, h4, h5, h6 {font-size: 100%; font-weight: normal ;}
Q: before, q: after {content: ";}
Abbr, acronym {border: 0 ;}
Html {font-size: 62.5% ;}

 

Then, we set the font-size to 10px, for example:

 

Html {font-size: 62.5% ;}

 

In this way, we can easily set the page font size through em units. e. g

 

Code
P {font-size: 1.2em;}/* the same as 12px */
H1 {font-size: 2em;}/* the same as 20px */

 

2. horizontal center (fixed width only)

I think everyone knows this, for example:

Div # container {margin: 0 auto ;}

 

 

3. Make full use of absolute and relatively in position

 

4. center or center (vertical)

 

Div. popup {height: 400px; width: 500px; position: absolute; top: 50%; left: 50% ;}
Div. popup {margin-top:-200px; margin-left:-250px ;}

 

Memo:

· The fixed values of width and height must be specified;

· The position value is absolute;

· Specify top and left as 50% respectively;

· Set half of the negative values of height and width of margin-top and margin-left respectively. The value can also be abbreviated as: margin:-200px 0 0-250px;

 

5. CSS can also be reused.

 

Create your global css rules and use it fully on any pages that can be used. e. g

. Left {float: left ;}
. Right {float: right ;}
Img. left {border: 2px solid # aaaaaa; margin: 0 10px 0 0 ;}
Img. right {border: 2px solid # aaaaaa; margin: 0 0 0 10px; padding: 1px ;}

 

 

6. IE6 margin bug

When you set the float attribute of the div element and specify the margin-left attribute, you will be too disappointed when Browsing IE6 or earlier versions, how does IE6 Add the margin value to you?

Solution: Set div to inline. e. g

 

Div {float: left; margin: 40px; display: inline ;}

 

 

7. Simple navigation menu

Xhtml:

 

<Div id = "navbar">
<Ul>
<Li> <a href = http://www.peakflowdesign.com> Peakflow Design </a> </li>
<Li> <a href = http://www.google.com> Google </a> </li>
<Li> <a href = "http://zenhabits.net/"> Zen Habits </a> </li>
</Ul>
</Div>

 

CSS:

# Navbar ul li {display: inline; margin: 0 10px 0 0 ;}
# Navbar ul li a {color: #333; display: block; float: left; padding: 5px ;}
# Navbar ul li a: hover {background: # eee; color: black ;}

 

 

8. Minimize the use of table layout

 

9. The page element can have multiple classes, e. g

 

<Div class = "regColor bigSize"> I am a reg color of font width big size! </Div>

 

 

Orginal article: http://www.peakflowdesign.com/design/10-useful-css-tricks-to-conquer-the-world/