CSS considerations in web design

1. CSS simplified font rules
Font-size: 1em;
Line-Height: 1.5em;
Font-weight: bold;
Font-style: italic;
Font-variant: Small-caps;
Font-family: verdana, Serif;

In fact, you can abbreviated these attributes:

Font: 1em/1.5em bold italic small-caps verdana, Serif; specify at least the font-size and font-family attributes. The default values are automatically used for other attributes.
Border: 3px solid #000 the default width is medium (equivalent to 3 to 4 pixels); the default color is the text color in the border.

2. Use two classes at the same time
Generally, we only specify one class for the attribute, but this does not mean that you can only specify one class. In fact, you can specify the class as much as you want. For example:

<Div class = "news hot">
Content
</Div>

By using two classes at the same time (separated by spaces rather than commas), this section will apply the rules set in both classes at the same time. If there are any overlapping rules, the latter will be applied first.

3 .! Important application (reference: hack in CSS)
Before IE6, the rule specified at the end usually gets the priority. IE7 pairs! Important support. For ff, anything is marked later! Important statements obtain absolute priority,

For example:

Margin-top: 3.5em! Important; margin-top: 2em

The top boundary of all browsers except IE6 is 3.5em, while IE6 is 2em.

This reminds me of the difficulty of compatibility with various browsers when I was just learning to write Div + CSS. For specific examples, refer to my zuonline.igg.com first edition. Remember margin-top: 3.5em! Important; must be written in front.
4. Image replacement skills
It is generally wise to use standard HTML instead of images to display text. In addition to accelerating download, it is also possible to achieve better availability. But if you are determined to use the visitor's machine

In some fonts, you can only select images.

For example, you want to use the "Buy widgets" title on the top of each page, but you also want this to be discovered by the search engine, you used a rare font for the sake of beauty.

You have to use images to display them:
This is certainly true, but there is evidence that the search engine attaches more importance to real text than alt text (because there are already too many websites that use alt text as keywords), so we have to use

Another method:

Buy widgets, what should you do with your beautiful font? The following CSS can help:

H1 {
Background: url(widget-image.gif) No-Repeat;
}
H1 span {
Position: absolute;
Left:-2000px;
}

Now you have used both beautiful images and hidden real text-with CSS, the text is positioned at the left-side of the screen-2000 pixels.
For some users who set the browser to not display images, they will not be able to see the important information on the images.

5.another choice of the CSS box model hack (reference: hack in CSS)
The CSS box model hack is used to solve the Browser display problem before IE6. Versions earlier than ie6.0 will include the Border Value and fill value of an element within the width (instead of adding the border value to the width value ).

). For example, you may use the following CSS to specify the size of a container:

# Box {
Width: 100px;
Border: 5px;
Padding: 20px;
}

And then apply it in HTML:
The total width of the box is 150 pixels in almost all browsers (100 pixel width + two 5 pixel borders + two 20 pixels fill), but it is still 100 in browsers earlier than IE6

Pixel (Border Value and fill value are included in width value), the hack of the box model is designed to solve this problem, but it will also cause trouble. The simpler method is as follows:

CSS:
# Box {
Width: 150px;
}
# Box Div {
Border: 5px;
Padding: 20px;
}
HTML:
...
This reminds me of this problem when I was doing zuonline.igg.com for the first version. I also solved this problem. In fact, when you want to define a DIV, do not set the width

It is defined together with the padding/margin attribute. You can never remember whether the padding is included in width or not. If you divide it into two divs, it will be OK!

6. Center the block elements (reference: page content center setting (horizontal center and vertical center ))
If your website uses a fixed-width layout and all content is placed in the center of the screen, you can use the following CSS:

# Content {
Width: 700px;
Margin: 0 auto;
}

You can place any project in the HTML body. The project automatically obtains equal left and right boundary values to ensure center display. However, in browsers earlier than IE6

If the problem persists, it will not be centered. Therefore, you must modify it as follows:

Body {
Text-align: center;
}
# Content {
Text-align: left;
Width: 700px;
Margin: 0 auto;
}

Setting the body will cause the body content to be centered, but even all the text is centered. This is not the expected effect. For this reason, # The content Div must specify a value: text-align: left

7. Use CSS to implement vertical center (reference: page content center setting (horizontal center and vertical center ))
Vertical center is a piece of cake for tables. You only need to specify the cell as vertical-align: middle, but this is not used in the CSS layout. Suppose you set the height of a navigation menu

Set the degree to 2em, and then specify the vertical alignment rules in CSS. The text will still be ranked at the top of the box. There is no difference at all.

To solve this problem, you only need to set the Row Height of the box to the same as the height of the box. In this example, the box height is 2em, so you only need to add one more in CSS: line-Height: 2em

Vertical center can be achieved! The disadvantage is that you need to control the content rather than line feed.
This is only about how the content is vertically centered in the block, not about how all content is vertically centered in any resolution browser. For details, refer:

Page Content center settings (horizontal center and vertical center)

8. Background color extending to the bottom of the screen
One of the disadvantages of CSS is the lack of vertical control, which leads to a problem that a table layout will not encounter. Suppose you have set a column on the left of the page to place the website navigation.

The page is a white background, but you want the navigation column to be a blue background, use the following CSS:

# Navigation {
Background: blue;
Width: 150px;
}

The problem is that the navigation item does not extend to the bottom of the page, and its background color does not extend to the bottom. As a result, the blue background in the left column is intercepted halfway on the page, wasting your first

Design. What should we do? Unfortunately, we can only use spoofing to specify the background of the body as an image with the same color and width as the left column. CSS is as follows:

Body {
Background: url(blue-image.gif) 0 0 repeat-y;
}

The background image must be a blue image of 150 pixels in width. The disadvantage of this method is that EM cannot be used to specify the width of the left column. When the size of the text is changed, the width of the background color will not change.

To write this articleArticleSo far, this is the only solution to this type of problem. Therefore, you can only use the pixel value for the left column to obtain different background colors that can be automatically extended.
This approach cannot be called a key point at all. It is not the best solution to this problem. in addition, I also see an article about how to set a line break to change the background color for the list <li> </LI>, unfortunately, the height of the row is fixed. It is not easy to use.

9. The larger the website, the more CSS styles it has. make full preparations and planning before you start.
Including naming rules, page block division, and internal Style Classification.

10. Differences between ID and class
I. duplicate IDs are not allowed in web standards. For example, div id = "AA" cannot be repeated twice, while class defines classes, which can be infinitely repeated in theory, this requires multiple definitions of references.

You can use it.
2. the attribute priority issue ID has a higher priority than the class.
III. convenience for JS and other client scripts. If you want to perform script operations on an object on the page, you can define an ID for it. Otherwise, you can only find it by traversing the page element and adding specific attributes, this is a relatively time-consuming resource, which is far less simple than an ID.

11. If some spacing is required between a group of labels to be nested, leave it to the margin attribute of the label located inside, instead of defining the padding of the label located outside.

12. We recommend that you use background-image instead of list-style-image for the icon in front of the Li label.

13. Don't forget to add comments to the selector in CSS when giving your tag a crazy selector.
When you modify your CSS later, you will know why. We also remind you not to be crazy. (Reference: Selector in the CSS style sheet)

14. If you set a deep background image and a bright text effect for a label. We recommend that you set a deep background color for your tag at this time.
Because the image is lost, the text can also be readable.

15. Problems with the hover style after hyperlink access
Pay attention to the order of the four states of the link: link visited hover active L-V-H-A

16. For images unrelated to content, use background. Always remember the representation and content separation.
17. doctype affects CSS Processing

18. Question of doubling margin.
The DIV set to float doubles the margin set in IE. This is a bug in IE6.
The solution is to add the display: inline In the div;
Example: <# Div id = \ "imfloat \">
The corresponding CSS is
# Iamfloat {
Float: left;
Margin: 5px;
Display: inline ;}

19. negative value of margin (For details, refer to the three-column middle width Adaptive Model)
The negative value of margin can be used for relative positioning when the label is absolutely positioned. When the page is centered, the left: xxpx attribute is not suitable for the layer with absolute positioning. Place this layer next to a tag to be located, and then use the negative value of margin as a good method. This is different from top, left, and other attributes in the position of window edge. The advantage of absolute positioning is that it allows other elements to ignore its existence.

20. In IE, you can change the comment to: <! -[If! IE]> put your commentary in here... <! [Endif]->

21. How to Use CSS to call the external font Syntax:
Font-face {font-family: Name; SRC: URL (URL); srules}
Value: Name: font name. URL of any possible font-family attribute value: use an absolute or relative URL address to specify the opentype font file srules: style sheet Definition

22. Why can't I set the color of the scroll bar for IE in web standards?
The solution is to change the body to HTML.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Style type = "text/CSS">
<! --
HTML {
Scrollbar-face-color: # f6f6f6;
Scrollbar-Highlight-color: # FFF;
Scrollbar-shadow-color: # eeeeee;
Scrollbar-3dlight-color: # eeeeee;
Scrollbar-arrow-color: #000;
Scrollbar-track-color: # FFF;
Scrollbar-darkshadow-color: # FFF;
}
-->
</Style>

23. How can I display layers on flash?

The solution is to make flash transparent.
<Param name = "wmode" value = "Transparent"/>

24. Border and background of the Link (a tag)
Add the border and background color to the link. Set display: block and float: left to avoid line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space in menubar.

25. CSS for document printing
Many websites have a printing version, but this is not actually required, because you can use CSS to set the printing style.
That is to say, you can specify two CSS files for the page, one for screen display and the other for printing:
<Link type = "text/CSS" rel = "stylesheet" href = "/blog/stylesheet.css" Media = "screen"/> <link type = "text/CSS"

Rel = "stylesheet" href = "printstyle.css" Media = "print"/>
1st rows are displayed, and 2nd rows are printed. Pay attention to the media attributes.
But what should I write in printed CSS? You can set it by designing common CSS. At the same time of design, you can set this CSS to display CSS to check its effect. Maybe you will use the "display: none" command to turn off some decorative images and then turn off some navigation buttons. For more information, see "Print differences.