1.CSS Font Shorthand rules
You might do this when you use CSS to define fonts:
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 attributes:
Font:1em/1.5em Bold Italic Small-caps Verdana,serif
It's much better now, but one thing to note: Use this shorthand method to specify at least the Font-size and font-family properties, and other properties (such as Font-weight, font-style,font-varient) that are not specified will automatically use the default value.
2. Use two class at a time
Usually we only assign a class to a property, but that doesn't mean you can specify just one, in fact, how much you want to specify, for example:
...
By using two classes at the same time (using spaces instead of commas), this paragraph will apply the rules set out in the two class. If any of the rules overlap, then the latter one will get the actual priority applied.
Default value for 3.css border (border)
When you write a rule for a border, you typically specify the color, width, and style (in any order). For example: border:3px solid #000 (3 pixels wide black solid border), in fact, the only value you need to specify in this example is the style. If you specify that the style is solid, the rest of the values will use the default values: The default width is medium (3 to 4 pixels), and the default color is the text color in the border. If this is the effect you want, you can not specify it entirely in CSS.
4.!important will be ignored by IE
In CSS, the rules that are usually last specified are given precedence. However, for browsers other than IE, any statements marked with!important will receive absolute precedence, such as:
Margin-top:3.5em!important; Margin-top:2em
The top boundary in all browsers except IE is 3.5em, and IE is 2em, which is sometimes useful, especially when using relative boundary values (as in this example) to show the subtle differences between IE and other browsers.
(Many people may also notice that CSS's sub-selectors are also ignored by IE)
5. Tips for replacing pictures
It is often wiser to use standard HTML instead of pictures to display text, and to get better usability in addition to speeding up downloads. But if you are determined to use fonts that may not be available on the visitor's machine, you can only select pictures.
For example, you want to use the title "Buy Widgets" at the top of each page, but at the same time you want it to be found by search engines, and for the sake of beauty you use a rare font then you have to show it with a picture:
This is certainly true, but there is evidence that search engines attach much more importance to real text than ALT text (since there are already too many sites using alt text as keywords), so we have to use a different approach:
Buy Widgets
, what about your beautiful fonts? The following CSS can be helpful:
H1
{
Background:url (widget-image.gif) no-repeat;
}
H1 span
{
Position:absolute;
left:-2000px;
}
Now that you're using beautiful pictures and hiding real text--with CSS, the text is positioned on the left side of the screen-2000 pixels.
Another option for 6.CSS box model hack
CSS box model hack is used to solve the IE6 before the browser display problems, the previous version of the IE6.0 will be an element of the border value and padding values are included in the width (instead of adding 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 in almost all browsers is 150 pixels (100 pixel width + two 5 pixel border + two 20 pixels of padding), except in IE6 version of the browser is still 100 pixels (border values and padding values are included in the Width value), box model hack is to solve this problem, But it can also bring trouble. A simpler approach 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 site uses a fixed-width layout, all content is placed in the center of the screen, and you can use the following CSS:
#content
{
width:700px;
margin:0 Auto;
}
You can put any item within the body of the HTML inside, and the item will automatically get the equal left and right boundary values to ensure the center display. However, this still has a problem in the browser version prior to IE6 and will not be centered, so you must modify the following:
Body
{
Text-align:center;
}
#content
{
Text-align:left;
width:700px;
margin:0 Auto;
}
The body of the setting will lead to the center of the content, but even all the text is also centered, this is probably not the effect you want, for this #content div also specify a value: Text-align:left
8. Using CSS for vertical centering
Vertical centering is a piece of cake for a table, just specify the cell as Vertical-align:middle, but it doesn't work in a CSS layout. Let's say you set the height of a navigation menu to 2EM and then specify the vertical alignment rules in the CSS, and the text will be lined up to the top of the box, no difference at all.
To solve this problem, just set the box height to be the same as the box, in this case, the box height 2em, then simply add a bar in the CSS: Line-height:2em can be vertically centered!
9. CSS positioning within the container
One of the biggest advantages of CSS is that you can position objects anywhere in the document, and you can also position objects within a container. You only need to add a CSS rule to the container:
#container
{
position:relative;
}
The position of any element within the container is relative to the container. Assume that you use the following HTML structure:
...
If you want to position the navigation within the container 30 pixels from the left edge and 5 pixels from the top, you can use the following CSS statements:
#navigation
{
Position:absolute;
left:30px;
top:5px;
}
10. Background color extending to the bottom of the screen
One of the drawbacks of CSS is the lack of vertical control, which leads to problems with a tabular layout. Suppose you set a list of navigation on the left side of the page for placing a site. The page is a white background, but you want the navigation to be listed as a blue background, using 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 naturally its background color does not extend to the bottom. So the left column of the blue background on the page was truncated halfway, wasting your design. What do we do? Unfortunately, we can only use deception now, the body of the background is designated as the same color with the left column of the same width of the picture, CSS as follows:
Body
{
Background:url (blue-image.gif) 0 0 repeat-y;
}
The background map should be a blue picture with a width of 150 pixels. The disadvantage of this approach is that you cannot use EM to specify the width of the left column, and the width of the background color does not change when the user changes the size of the text causing the width of the content to expand.
By the end of writing this is the only solution to this type of problem, so you can only use pixel values for the left column to get different background colors that can be extended automatically.
