Web page making CSS style nine tips

First, shorthand for CSS fonts





usually when you use CSS to define fonts you might do this:





font-size:1em;


line-height:1.5em;


Font-weight:bold;


Font-style:italic;


Font-variant:small-caps;


Font-family:verdana,serif;





We can abbreviate these styles:





font:1em/1.5em Bold Italic small-caps Verdana,serif;





is much better now, but one thing to note: Use this shorthand to specify at least Font-size and font-family attributes, other attributes (such as Font-weight, font-style,font-varient) Default values are automatically used if not specified.





second. Use two class
at the same time




usually we just specify a class for the attribute, but that doesn't mean you can only specify one, in fact, you can specify how much you want to specify, for example:





<div class= "News hot" >


<a Target=_blank href=http://www.qpsh.com> page Special effects code corner </a>


</div>





by using two classes (using spaces instead of commas), this paragraph applies the rules set out in the two class. If any of the two rules overlap, the latter will have a practical priority application.





Third, the default value of the border (border) in CSS





when you write a border rule, you usually specify the color, width, and style (in any order). For example: border:3px solid #000 (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 that the style is solid (solid), the remaining values will use the default value: The default width is medium (equivalent to 3 to 4 pixels), and the default color is the text color in the border. If this is the effect you want, you can definitely not specify it in CSS.





fourth. Important will be ignored by IE





in CSS, the rule that is usually last specified is given precedence. However, for browsers other than IE, any subsequent statements marked with!important will receive absolute precedence, for example:





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





the top edge of all browsers except IE is 3.5em, and IE is 2em, which is sometimes useful, especially when using relative boundary values (like this example) to show the nuances of IE and other browsers.





(ie in this case: IE6 and the following version, excluding IE7, in fact IE7 is supported by the!important attribute, the same is true of the CSS selector)





Fifth. The technique of picture replacement




It is often wiser for
to use standard HTML instead of pictures to display text, except to speed up downloads to get better usability. But if you are determined to use a font that may not be available in the visitor's machine, you can only select pictures.





For example, you want to use the title of "Web Effects Code Corner" at the top of each page, but you also hope that this can be found by search engines, for the sake of aesthetics you use a rare font so you have to use a picture to show:








It's true, of course, but there's evidence that search engines value real text far more than ALT text (because there are already too many sites using alt text 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 both a nice picture and a nice hidden text--with CSS, the text is set to the left of the screen-2000 pixels. Another choice of 6.css box model hack




The
CSS box model hack is used to troubleshoot browser display problems before IE6, and the IE6.0 version contains the border values and padding values of an element within the width (rather than 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 applies in HTML:

The total width of the
box is 150 pixels in almost all browsers (100 pixel width + two 5 pixel border + two 20 pixel fill), except for the browser in the previous version of IE6, which is still 100 pixels (border and padding values are included in the width value), The hack of the box model is precisely to solve this problem, but also can cause trouble. The simpler approach is as follows:











CSS:


#box


{ 


width:150px;


} 


#box Div {


border:5px;


padding:20px;


} 


HTML:


...








The total width of the box in any browser will be 150 pixels.





Sixth. Center The Block element





assume that your site uses a fixed-width layout, all content 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 HTML, the item will automatically get equal left and right values to ensure the center display. However, this is still problematic in previous versions of IE6 browsers and will not be centered, so you must modify the following:





Body


{ 


Text-align:center;


} 


#content


{ 


Text-align:left;


width:700px;


margin:0 Auto;


}





to the body of the setting will cause the main content center, but even all the text is centered, which I am afraid is not the effect you want, for this #content div also specify a value: Text-align:left





seventh. Use CSS to achieve vertical centering





Vertical Center is a piece of cake for the table, just specify the cell as Vertical-align:middle, but this does not work in the CSS layout. Let's say you set the height of a navigation menu to 2EM and then specify the vertical alignment in the CSS, and the text will be lined up at the top of the box, no difference at all.





to solve this problem, simply set the row height of the box to the same height as the box, in this case, the box height of 2em, then just add one in the CSS: Line-height:2em can be achieved vertically center!





eighth. CSS positioning in the container




One of the great 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 for the container:





#container


{ 


position:relative;


}





the position of any element within the container is relative to the container. Suppose you use the following HTML structure:





...





If you want the navigation to be positioned 30 pixels from the left edge of the container and 5 pixels from the top, you can use the following CSS statement:





#navigation


{ 


Position:absolute;


left:30px;


top:5px;


}





nineth. The background color that extends to the bottom of the screen




One of the drawbacks of
CSS is the lack of vertical control, which results in a table layout problem that is not encountered. Let's say you set up a list of navigation on the left side of the page to place the site. The page is a white background, but you want the navigation to be listed as a blue background, use the following CSS:





#navigation


{ 


Background:blue;


width:150px;


}




The
problem is that the navigation item does not extend all the time 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 is truncated halfway, wasting your design. What do we do? Unfortunately, we can only use deception now, the background of the body is designated as the same color with left column picture, CSS is as follows:











Body


{ 


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


}




The
background image should be a blue picture with a width of 150 pixels. The disadvantage of this approach is that it is impossible to use EM to specify the width of the left column, and the width of the background color will not change when the user changes the size of the text, causing the width of the content to expand.





until this article is written 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 can be automatically extended.