Shulou(Shulou.com)06/02 Report--

This article introduces to you what are the top ten CSS classic skills, the content is very detailed, interested friends can refer to, hope to be helpful to you.

And you focus on the top ten CSS use classic skills, including CSS font attribute shorthand rules, CSS can use two classes at the same time, CSS for document printing and other content.

Top Ten CSS use Classical skills

Shorthand rules for 1.CSS font properties

Generally, setting font properties with CSS is done like this:

Font-weight:bold; font-style:italic; font-varient:small-caps; font-size:1em; line-height:1.5em; font-family:verdana,sans-serif

But you can also write them all on one line:

Font:bolditalicsmall-caps1em/1.5emverdana,sans-serif

Looks great! Just one caveat: this shorthand method works only if both the font-size and font-family properties are specified. Also, if you don't set font-weight,font-style and font-varient, they will use the default, which should be noted.

two。 Use two classes at the same time

Generally, only one Class can be set for one element, but that doesn't mean you can't use two. In fact, you can do this:

... P >

Give the P element two classes at the same time, separated by a space in the middle, so that the attributes of all the text and side classes will be added to the P element. If there is a conflict between the properties in their two classes, the latter setting works, that is, the properties of the classes placed later in the CSS file.

Add: for an ID, you can't write like this.

You can't write like this.

Default value of 3.CSSborder

You can usually set the color, width, and style of the boundary, such as:

Border:3pxsolid#000

This one shows the boundary as 3 pixels wide, black, and solid. But in fact, you only need to specify the style here.

If only style is specified, other properties use default values. In general, the width of Border defaults to medium, which is usually equal to 3 to 4 pixels; the default color is the color of the text in it. If this value is just right, you don't have to set so much.

4.CSS is used for document printing

Many websites have a version for printing, but in fact this is not necessary because you can use CSS to set the printing style.

That is, you can specify two CSS files for the page, one for screen display and one for printing:

Line 1 is the display, line 2 is the print, notice the media attribute in it.

But what should I write in the print CSS? You can set it the same way you design a normal CSS. At the same time, the CSS can be set 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. To learn more, you can read the article "print differences".

5. Picture replacement skills

It is generally recommended to use standard HTML to display text instead of pictures, which is not only fast, but also more readable. But if you want to use some special fonts, you can only use pictures.

For example, if you want the whole icon to sell something, you use this picture:

H2 >

Of course, but for search engines, compared with normal text, they have little interest in the replacement text in alt because many designers put a lot of keywords here to deceive search engines. So the method should be like this:

Buywidgets

But then there are no special fonts. To achieve the same effect, you can design the CSS as follows:

H2 {background:url (widget-image.gif) no-repeat;height:imageheighttext-indent:-2000px}

Pay attention to the height of the real picture instead of the imageheight. Here, the picture will be displayed as a background, and because the real text is indented by-2000 pixels, it will appear at 2000 points on the left side of the screen and will not be seen. But this may not be seen at all for those who close the picture, which should be noted.

Another adjustment technique of 6.CSSbox model

The adjustments to this Box model are mainly for pre-IE6 IE browsers, which count boundary widths and whitespace on element widths. For example:

# box {width:100px;border:5px;padding:20px}

Call it like this:

...

At this point, the full width of the box should be 150 points, which is correct on all browsers except the previous IE browsers before IE6. But on browsers like IE5, its full width is still 100 points. This difference can be handled using the Box adjustment method invented by previous people.

But you can also use CSS to achieve the same goal, making them appear the same way.

# box {width:150px} # boxdiv {border:5px;padding:20px}

Call as follows:

...

In this way, no matter what browser, the width is 150 points.

7. Block elements are centered and aligned

If you want to make a fixed-width web page and want to center the page horizontally, it usually goes like this:

# content {width:700px;margin:0auto}

You will use it to surround all the elements. This is simple, but not good enough, and previous versions of IE6 would not have shown this effect. Change the CSS as follows:

Body {text-align:center} # content {text-align:left;width:700px;margin:0auto}

This will center the content of the page, so it has been added to Content: text-align:left.

8. Using CSS to handle vertical alignment

Vertical alignment can be easily achieved with a table, just set the table cell vertical-align:middle. But it doesn't work for CSS. Setting this property is useless if you want to set a navigation bar to be 2em high and want the navigation text to be centered vertically.

What is the CSS method? By the way, set the line height of these words to 2em:line-height:2em, and that's fine.

9.CSS locates in the container

One of the benefits of CSS is that you can position an element at will, even in a container. For example, for this container:

# container {position:relative}

In this way, all the elements in the container are positioned relative to each other, and you can use:

... Div > div >

If you want to locate 30 points from the left and 5 points from the top, you can do this:

# navigation {position:absolute;left:30px;top:5px}

Of course, you can also do this:

Margin:5px0030px

Note that the order of the four numbers is: top, right, bottom, and left. Of course, sometimes it is better to locate rather than margin.

10. Go straight to the background color at the bottom of the screen

It is not possible for CSS to control vertically. If you want the navigation bar to go straight to the bottom of the page like the content bar, it's convenient to use a table, but if you only use this CSS:

# navigation {background:blue;width:150px}

The shorter navigation bar does not go straight to the bottom, and it ends at the end of the way. I don't know what to do

Unfortunately, we can only use deception to add a background image to the shorter column with the same width as the column width and make it the same color as the set background color.

Body {background:url (blue-image.gif) 00repeat-y}

You can't use em as a unit at this time, because that way, once the reader changes the font size, the trick will be revealed and can only be used with px.

What are the top ten CSS use classic skills to share here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.