10 things you need to know to learn CSS

1. The point of CSS is to use concise HTML code in your page, and then write CSS "control rules" to style the objects on the page. It looks great to keep the pages clear and methodical. So your HTML pages can be run in mobile devices and standard browsers. This is the main point of CSS.

The art of CSS, however, is the ability to manipulate the page objects quickly and efficiently using CSS control rules. The act of matching CSS rules to HTML tags is like a conversation: the two need to be coherent and synchronized, otherwise they will answer the question and make your head big.

2. General operation or flexible matching: Suppose you want to style a

* Using CSS Rules h1{... Define all

* In the actual position of the object for the style definition, for example:<b> in the tag <p> inside, in the definition of time you should be like this p b{...

* Define for a specific type, add class= "MyHeader" to the tags you want to define, and then use CSS rules. myheader{...

* Just define individual

Of course you can also mix the above rules in different ways:

To define all

3. Get the target: matching rule error will waste a lot of time, here is a tip: before you intend to implement your rules, you might want to use the color:red, which is both simple and easy to observe. Once you see that the text in the HTML page changes to red, the rules match correctly. Then you will know that your rules can take effect in the correct part of the document, then delete the color:red, and replace it with the rule statement that you originally wanted to implement.

4. Master patented technology JM3 Gasbag Model: A CSS layout design is like a big bag full of objects. Each object can exert pressure on the outside (think of the gas leak as your layout design) in most cases, the pressure is manifested (margins, padding, and float are closely related to the "push" properties by modifying the CSS rules, you judge the pressure, in the browser to observe your page is like shaking the bag, will show the pressure concentration in what area of influence, this is the css-management pressure object to maintain a balance of the secret. To deal with stress, Using too many attributes at once, conflicts can cause your objects to be crowded, and objects to each other and the bag will be pierced many holes. The pages are porous and boring.

Gasbag Example 1: To create a center effect, set the Margin-left:auto, Margin-right:auto; This is effective because you balance the pressure that is distributed around the left and right sides, So the element is as perfect in the middle as the iron ball placed between the two magnets.

5. The gasbagcorollary 1:jm3 gasbag model is only available for use with the default CSS "telative" positioning mode. It may also apply to the "absolute" positioning mode (where each module is positioned by a given precise coordinate), But don't do this easily, once the number of text or images changes it will take you a long time to rearrange and make your page look bad. Only the weird publishers are willing to do that.

6. The mixed language in the rules A-divs and SPANS:CSS is a two tag named <div> and <span>, neither of which has a default appearance, the so-called <div> and <span> Just some containers and lines in the text. They're just normal tags for applying styles.

7. The rule b:div is the container,<span> is the text,<div> is the height, the width, the queue may deal with it. Also: a <div> height refers to the height of its content (text, images, or other <div>) .<sapn> tags used in text segmentation, because they are only in a line of text meaningful, so called "inline" element, Other tags, such as bold (b), Italic (i), Underline (U), etc., are called < span>/elements.

Do not use <div> to mark text, and do not apply <span> directly to "bag", so that your layout work will become easier

8. Three levels of application CSS: applied to a larger number of pages (by using a file with a. css extension) applies to a single page (by defining a block of style code), as well as an explicit tag applied to the interior of the page (by adding the style "..." attribute inside the tag), When you finish a page layout design, it is a good idea to convert all CSS code into a standalone CSS file-you can use it everywhere. When you test the code, just copy the CSS file content into the style code block inside the HTML page (which is easy for you to do) and then you don't have to switch back and forth between the two files. Modify the original CSS file when the style code is fixed (I think the author of this passage means: Keep backing up a stable test code).

9. Keep the code concise: Writing concise HTML is simple, but even those who think they know CSS well don't write it succinctly and efficiently. Efficient code does not allow your pages to load faster, but it makes your coding work easier.

Three tips:

* Streamline your rule statements: convert (font-family, font-size) (Margin-left, Margin-right) to a single-line rule margin:0px 10px 10px 10px;

* When you see a person's cascading style sheet there are many lines like the following:

. redtext {font-family:arial, Helvetica, sans-serif;color:red;}

. bluetext {font-family:arial, Helvetica, Sans-serif;color:blue;}

This means that they may not know this technique.

* use "," to apply the same CSS style rule to multiple types of HTML tags at once: p, B, I {... Use one line of code to accomplish the task of applying styles to paragraphs, bold, and italic text.

10. The so-called skill (hacks) is actually stupid, you do not need them: Many CSS guide books have repeatedly stressed that "to make your page adapt to a multiple browser environment, you should learn a lot of" CSS skills. All that nonsense. It's no use to you.

It's a painful process for everyone to start learning CSS. Don't worry, it's not you who are stupid, but CSS. Do not think you need to remember all the attributes, you can open the Web page got API ' s handy cheat sheet reference!