Ten css tips_CSS/HTML

1.css font abbreviation rules
When using css to define fonts you may do this:
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 abbreviate these properties:
font: 1em/1.5em bold italic small-caps verdana,serif
It’s much better now, but one thing to note: using this shorthand method you must at least specify the font-size and font-family attributes, and other attributes (such as font-weight, font -style,font-varient) will automatically use the default value if not specified.


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

...

By using two classes at the same time (separated by spaces instead of commas), this paragraph will apply the rules specified in both classes at the same time. If any of the rules overlap, the latter one will take precedence.


Default value of border in 3.css
When writing a border rule, you usually specify the color, width, and style (any order is acceptable). For example: border: 3px solid #000 (a 3-pixel wide black solid border). In fact, the only value that needs to be specified in this example is the style. If you specify the style as solid, then the remaining values ​​will use the default values: the default width is medium (equivalent to 3 to 4 pixels); the default color is the color of the text in the border. If this is exactly what you want, you don't have to specify it in css.


4.!important will be ignored by IE
In css, usually the last specified rule will get priority. However, for browsers other than IE, any statement marked with !important will receive absolute priority, for example:
margin-top: 3.5em !important; margin-top: 2em
Except for IE The top margin is 3.5em in all browsers but 2em in IE. Sometimes this is useful, especially when using relative margins (like this example), to show the subtle differences between IE and other browsers. .
(Many people may have also noticed that CSS sub-selectors are also ignored by IE)


5. Image replacement techniques
Use standard html instead of images to display text It's often wiser to get better usability in addition to faster downloads. But if you're determined to use a font that may not be available on your visitor's machine, you can only choose images.
For example, if you want to use the title "Buy widgets" at the top of each page, but you also want it to be discovered by search engines, and you use a rare font for the sake of beauty, then you have to use The picture shows:

Of course this is true, but there is evidence that search engines value real text far more than alt text (because too many websites already use alt text Act as keywords), so we have to use another method:

Buy widgets

, what about your beautiful fonts? The following css can help:
h1
{
background: url(widget-image.gif) no-repeat;
}

h1 span
{
position: absolute;
left:-2000px;
}
Now you have a beautiful image and hide the real text well - with the help of css, the text is positioned on the left side of the screen -2000 pixels.


6. Another option for css box model hack
css box model hack is used to solve browser display problems before IE6. Versions before IE6.0 will change the border of a certain element The value and padding value are included in the width (rather than added to the width value). For example, you might use the following css to specify the size of a container:
#box
{
width: 100px;
border: 5px;
padding: 20px;
}
Then apply in html:

...

The total width of the box is 150 pixels in almost all browsers (100 pixels wide + two 5 pixel borders + two 20 pixels padding), only in browsers before IE6 it is still 100 pixels (the border value and padding value are included in the width value). The box model hack 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 way the total width of the box in any browser will be 150 pixels.


7. Center the block element
Assuming that 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 item within the body of the html

, the item will automatically obtain equal left and right boundary values ​​to ensure centered display. However, this is still a problem in browsers before IE6 and will not be centered, so it must be modified 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, which is probably not the effect you want. For this reason, the div of #content also needs to specify a value: text-align: left

8. Use css to achieve vertical centering
Vertical centering is a piece of cake for tables, just specify the cell as vertical-align: middle, but this doesn't work in css layout. Suppose you set the height of a navigation menu to 2em, and then specify the vertical alignment rules in CSS, the text will still be arranged to the top of the box, there is no difference at all.
To solve this problem, just set the line height of the box to be the same as the height of the box. In this example, the box height is 2em, then just add another line-height: to the css: 2em can achieve vertical centering!

9. CSS positioning within the container
One of the biggest advantages of CSS is that it can position objects anywhere in the document, and objects can also be positioned within a container. Just add a css rule to the container:
#container
{
position: relative;
}
Then the positioning of any element in the container will be relative to the container. Assume you use the following html structure:

...

If you want to position the navigation within the container 30 pixels from the left border and 5 pixels from the top, you can use the following css statement:
#navigation
{
position: absolute;
left: 30px;
top: 5px;
}

10. Extend to the bottom of the screen One of the disadvantages of background color
css is the lack of vertical control, which leads to problems that a table layout does not encounter. Suppose you set up a column on the left side of the page to place the navigation of your website. The page has a white background, but if you want the navigation column to have a blue background, use the following css:
#navigation
{
background: blue;
width: 150px;
}
The problem is that the navigation item does not extend all the way to the bottom of the page, and naturally its background color does not extend to the bottom either. So the blue background of the left column is cut off halfway on the page, wasting your design. What to do? Unfortunately, we can only use deception, that is, specify the background of the body as an image of the same color and width as the left column. The css is as follows:
body
{
background: url(blue-image.gif ) 0 0 repeat-y;
}
The background image should be a blue image 150 pixels wide. The disadvantage of this method is that em cannot be used to specify the width of the left column. When the user changes the size of the text and the width of the content expands, the width of the background color will not change accordingly.
As of this writing this is the only solution to this type of problem, so you can only use pixel values ​​for the left column to get a different background color that stretches automatically.