Experience in HTML + CSS Coding

1. Assign ID to the Body Tag:

For different pages of the same websiteCodeSame, but different performance effects can be achieved through CSS. If these pages use the same CSS file, how can we precisely define different expressions of the same content? By assigning IDs to the body tag to differentiate different pages, you can use the CSS descendant selector to accurately select the target. For example, the body of the home page is assigned with ID = "home", and the body of the inner page is assigned with ID = "inner". If you select the home pageArticleFor the title, you can use "# home # Main H1". To select the title on the internal page, you can use "# Inner # Main H1 ". In this way, the HTML code of a page that is not allowed on the same website can have the same performance.

2. space characters of the relative length em and the first line of the paragraph indented:

The relative length unit em is measured based on the relationship of other things. If the text size in a div is 12 PX and the margin is set to 3em, the value of this margin is 12*3 = 36px. If the text size is changed to 15px, the value of this margin is 15*3 = 45px.

Chinese character writing has the habit of having two spaces in the first line, which is equivalent to inserting spaces in the width of two Chinese characters. If we use & nbsp;, we obviously cannot achieve satisfactory results. At this time, we can use CSS to indent two Chinese characters. If the text size is 12 PX, We Can indent it by 24 PX, however, on the same page, it is impossible for all text sizes to be 12px. Here we can set the text indent by the relative length unit em. In this way, no matter how big the text is, always keep the width of the two Chinese characters in progress.

3. Tips for naming ID and class:

In HTML encoding, you need to pay attention to the skills in naming ID and Class. Try to name the ID and Class Based on the meaning of the region, such as header and footer. Do not name the ID or Class Based on the representation or position, for example, width500, left, and right. You can use side in the sidebar on the left. If you use left to name the sidebar, if the content behind it is reconstructed and this sidebar is placed on the right, it is obviously not suitable for left at this time.

4. About the universal selector ):

The wildcard selector can set global settings for some CSS attributes, that is, the definition of the global default style. This can improve the CSS coding efficiency and reduce the Code, so that the Declaration does not need to be further defined in the subsequent encoding. For example, the size of the globally defined text is 12px, and the text in the navigation bar, sidebar, and content area is exactly 12px. With this global definition, the three areas do not need to be set separately.

If there is a definition that conflicts with the global definition, you can define the new style directly in the subsequent encoding. The Inheritance and cascade of CSS act on the selected object with the new style. For example, the outer margin * {margin: 0;} is set to 0, and the outer margin of an element is defined as auto in the subsequent encoding, for example, H3 {margin: auto;} enables horizontal center alignment.

5. Position positioning:

The top, righ, bottom, and left CSS attributes are used together with the position attribute, indicating the distance between the boundary of the block and the page border (when position is absolute, or the distance between each boundary and the original position (when position is relative. That is to say, it is valid only when the position attribute value is set to absolute or relative. If the position attribute is set to static, the sub-block will not change.

6. Select the appropriate Tag:

When is <div> and <span> used? Generally, the <div> label is used for large blocks on the page, the <span> label is only used for small elements that require individual style settings, such as a word, an image, or a hyperlink.

7. About the box model:

The actual width (height) of a box is composed of content + padding + border + margin. In the browser (ie or Firefox), the values of width and height refer to the values of width + padding and heigh + padding. Pay special attention to the actual webpage creation.

8. About the Form ID and name:

In the form, both ID and name are used to mark the object name. ID was introduced later. Before that, Netscape used the name attribute to implement this function. There are many background websitesProgramBoth use the name attribute to obtain the value of the form element. Therefore, it is necessary to set the ID and name attributes for the element at the same time. In this way, you can not only define the CSS style for the element through the ID selector, you can also obtain the value of the form element on the form acceptance page (get the form data through the name attribute ).

9. Precautions for maintaining CSS style sheets:

Make reasonable adjustments when modifying the reconstructed code. Some codes that are no longer in use should be resolutely deleted; newly added codes should be added according to CSS rules. Read the code to be modified in detail to avoid repeated definitions. Pay attention to saving the backup code during adjustment. When the adjustment fails, you can view the original code for comparison.

10. Combine multiple images into one image file:

at present, most large websites adopt this approach: some images of the same size but different content may be icons, topic titles, or background images in the navigation bar. The size of such images is usually small but large. At this time, we can combine these images into an image file. For example, a webpage has six icons, however, when we open a website, we need to load 6 images to display the webpage. After combining them with one image, we only need to load one image. In addition, the size of the combined image file is equivalent to that of the image file before the combination, and even decreases without increasing the number of bytes. The most typical application is to create the Interactive Effect of the linked background image, you can also set all icon icons of the website to one image. Of course, this method cannot be abused.