Tell CSS Novice 20 tips

Thanks to the CSS, really because of her flexibility, the Web page style can be completely separated from the code. Now, you just need to have the basics of CSS, even a beginner can easily change the appearance of the site.

In the past, we relied heavily on web designers and programmers to help update the site, even on a very simple Web page. Thanks to the CSS, really because of her flexibility, the Web page style can be completely separated from the code. Now, you just need to have the basics of CSS, even a beginner can easily change the appearance of the site.

Whether you're going to use CSS to create your own Web page, or just want to use her to change the look of your blog, learning the basics of CSS will help you lay a solid foundation for your CSS. Let's take a look at some of the little tricks that are useful for CSS beginners. The following is a complete list:

1. Using Reset.css

Browsers like Firefox and Internet Explorer have different ways of parsing the default CSS styles. Reset.css in all styles, you can control the page in different browsers.

The following is a universally used RESET.CSS framework. -

2. Use CSS Abbreviations

CSS code abbreviations make CSS code shorter and, more importantly, make the code structure clearer and easier to understand.

For example, the following code is the same, but obviously the latter is better.

. header {

Background-color: #fff;
Background-image:url (Image.gif);
Background-repeat:no-repeat;
Background-position:top left;
}

Here's a better way to do it.

. header {
Background: #fff URL (image.gif) no-repeat top left
}

3. Understand the difference between class and ID

These two different selectors are often confused by beginners. In CSS, class uses the "." Represents, and the ID is represented by "#". Simply put, IDs are often used for unique styles, ID attributes cannot be duplicated, and class is different and can be reused.

4. Powerful <li>

It is useful to use <ol> or <ul>,<li> correctly, especially when defining navigation menu styles.

5. Discard <table> try <div>

One advantage of CSS is that it uses <div> to completely control the style of the Web page. <div> not like <table> need to use <td> to express content. It is entirely possible to assume that most table layouts can be replaced with <div> and the appropriate style, with the exception of large table layouts.

6.CSS Debugging Tools

The CSS debugging tool enables us to see the effects in real time while CSS is being typeset, which helps us to better understand and debug CSS. Here is a free debugging tool that you can install for free in your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug.

7. Avoid unnecessary selectors

The simpler your selector should be, the better it means if you have the following code:

UL li {...}
Ol li {...}
Table tr td {...}

The code can be simplified to:

Li {...}
td {...}

Interpretation of:<li> only exists in <ul> or <ol>;<td> can only be found in <tr> and <table>.

8. Understanding!important

Any style with!important will not change (even if overridden).

. page {Background-color:blue!important;   background-color:red;}

In the above example, Background-color:blue will be used, meaning that he is marked by!important, even if the back is followed by a background-color:red;!important is often used in a room where a pattern is not covered, But sometimes the Internet Explorer is not valid.

9. Replace pictures with text

This is a frequently used example of writing in H1, with pictures in the background.

H1 {
text-indent:-9999px;
Background:url ("title.jpg") no-repeat;
width:100px;
height:50px;
}

Description: text-indent:-9999px, you can put text outside the screen, and the picture as the background will be displayed. Of course here's the H1 to set the fixed width and height.

10. Understanding CSS Positioning

The following article will help you understand CSS positioning.

@import vs <link>

There are two ways to import an external CSS file--using @import and <link> respectively. If you are not sure which method to use, the following article can be controlled for reference.

12. Use CSS to set the form style

CSS can easily control the style of the page form, the following article will show you how to do:

(Waiting for translation)

13. Get Inspiration

Are you looking around for an excellent CSS site, or looking for a good user interface, here are some of our recommended CSS display sites:

CSS Remix

CSS Reboot

CSS Beauty

CSS Elite

CSS Mania

CSS leak

14.CSS Round Angle Design

The figure below will show you how to design a cross browser rounded corner box:

Translator Note: Fillet design has always been a hot topic in CSS design, rounded angle design methods, readers can be "rounded design" for the keyword search related information. Here, the original method is for the traditional nine-sudoku approach, that is, in box Four corners to place four rounded elements, control the background seat, to produce rounded angle effect.

15. Keep CSS Code concise

If your CSS coding is confusing, you'll end up coding in a mess, and it will be hard to understand when you look at the code over time. As a beginner, you should develop a good coding habit.

16. Use absolute units or relative units (px vs em)

Have you ever encountered the problem of choosing PX or em? The following article will help you to better understand absolute units and relative units.

17.CSS Browser Compatibility table

It is generally known that different browsers have different ways of parsing CSS styles. We should have a complete browser-compatible table:

CSS Support table: #1, #2, #3, #4.

18. Understanding CSS Layouts

Understand the layout of various web pages.

19. Get a free CSS editor

Professional editors are always better than Notepad, and here are some of the editors we recommend:

More-Simple css, Notepad + +, A Style css Editor

Translator Note: Domestic generally like to use Dreamweaver to write CSS, for beginners, we recommend EditPlus.

20. Understanding Media Types

When you use link to link external CSS files sometimes need to fill in the media type, print, projection and screen are commonly used. Use them correctly to make the site more user-friendly to users.