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

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

CSS skills you know, here to share with you, mainly including the default value of CSSborder, CSS font properties shorthand rules, while using two classes, CSSbox model another adjustment skills, picture replacement skills and so on.

Classic skills of CSS must be seen.

◆ CSS font attribute shorthand rules

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

Viewsourceprint?

1FontMustWeightVarientVarientVarientVarientVarientVarientVarientVarientVarientPlus; 4FontMusizeRose 1em; 5lineMutual heightGana1.5mm; 6fontMuffayFamilyverdanadanadanaDengsansserif

But you can also write them all on one line:

Viewsourceprint?

1fontfrog bolditalicsmalllycaps1emcontrol 1.5emverdana paper Sanslyserif

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 is important to remember.

◆ uses both classes

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:

Viewsourceprint?

1. 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.

Default value for ◆ CSSborder

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

Viewsourceprint?

1border:3pxsolid#000

This will show 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.

◆ 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:

Viewsourceprint?

1 2

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.

◆ 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:

Viewsourceprint?

1h2 >

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:

Viewsourceprint?

1Buywidgetsh2 >

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

Viewsourceprint?

1h2 {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 ◆ 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:

Viewsourceprint?

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

Call it like this:

Viewsourceprint?

1...div >

At this point, the full width of the box should be 150 points, which is correct on all browsers except the 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 using CSS can also achieve the same goal, so that they show the same effect.

Viewsourceprint?

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

Call as follows:

Viewsourceprint?

1...div > div >

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

◆ 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:

Viewsourceprint?

1#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:

Viewsourceprint?

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

This centers the content of the page, so text-align:left is added to Content.

◆ uses 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.

◆ CSS locates within 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:

Viewsourceprint?

1#container {position:relative}

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

Viewsourceprint?

1...div > div >

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

Viewsourceprint?

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

Of course, you can also do this: margin:5px0030px notes that the order of the four numbers is: top, right, bottom, and left. Of course, sometimes it is better to locate rather than margin.

◆ goes 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:

Viewsourceprint?

1#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.

Viewsourceprint?

1body {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.

Comparison of ◆ Block and inline elements

All HTML elements belong to one of block and inline. The block element is characterized by always starting on a new line; height, line height, and top and bottom margins are all controllable; the width defaults to 100% of its container, unless a width is set

And

Is an example of a block element. On the contrary, the inline element is characterized by: it is on a line with other elements; the height, line height and top and bottom margins are immutable; and the width is the width of its text or picture, which cannot be changed.

, and are examples of inline elements. You can change this feature of an element with the codeclass= "inline" > display:inline or display:block command. When do you need to change this attribute? Let an inline element start on a new line; keep the block element and other elements on one line; control the width of the inline element (especially useful for navigation bars); control the height of the inline element; you can set a background color of the same width as the text for a block element without setting the width.

◆, let's have another box hacking method.

The reason why there are so many box hacking methods is that before 6, IE has a different understanding of box than anyone else, and its width includes edge line width and white space. To keep IE5 consistent with other browsers, you can use CSS's method: padding:2em;border:1emsolidgreen;width:20em;width/**/:/**/14em;*** width is recognized by all browsers, but IE5.x doesn't recognize the width setting of line 2 because there are blank comment symbols on that line (what a stupid parsing! So IE5.x subtracts some white space with 20, while other browsers use the width of 14 because it is the second line and overwrites the first line.

Minimum width of the ◆ page

Min-width is a very convenient CSS command that specifies that the element must not be less than a certain width, so that typesetting is always correct. But IE doesn't recognize this, and it actually uses width as the minimum width. To make this command work on IE, you can use a

Put it under the tag and specify an id for div: then CSS designs it like this:

Viewsourceprint?

1#container {min-width:600px; width:_expression (document.body.clientWidth body.box {width:auto;height:auto;min-width:80px;min-height:35px;})

All browsers can use * box settings, but IE does not recognize the second paragraph setting because it uses sub-selector commands. The second setting is more special, so it overrides the first setting.

◆ font deformation command

The text-transform command is useful and has three values: text-transform:uppercase,text-transform:lowercase and text-transform:capitalize. The first will make the text all uppercase, the second all lowercase, and the third uppercase. This is very useful for phonetic text, even if there is a case error in typing, it cannot be seen on the web page.

The problem of disappearing Picture words in ◆ IE

Sometimes you encounter the problem that the text or background image suddenly disappears, and the refresh appears again, which is more likely to happen when you are close to the floating element. At this point, you can set position:relative for the missing elements, and if not, consider specifying a width for those elements.

◆ invisible text

You can use display:none for whatever reason you want some web text not to be displayed in the browser, such as for printing or for a small screen. It's very simple, but sometimes it doesn't work for some people who can get rid of this control and use it: position:absolute;left:-9000px. This is actually assigning the text to be displayed off the page.

◆ designs a special CSS for handheld devices

That is, small-screen users such as mobile phones / PDA can design a CSS to make the web display more comfortable. To do this, you can adjust the browser window to 150 points wide to see the effect. The syntax for specifying the CSS of a dedicated handheld device is: you can also read about the availability of specialized handheld devices.

Buttons for ◆ 3D effects

In the past, if you wanted to make a button with a 3D effect that would change if you click on it, you had to replace it with an image, but now CSS is fine:

Viewsourceprint?

1a {display:block;border:1pxsolid; border-color:#aaa#000#000#aaa;width:8em;background:#fc0;} 2a:hover {position:relative;top:1px;left:1px; border-color:#000#aaa#aaa#000;}

As for the effect, you can adjust it yourself.

◆ uses the same navigation code on different pages

Many pages have navigation menus, and when you enter a page, the corresponding item on the menu should be dimmed, while other pages light up. Generally, to achieve this effect, you need to write a program or design specifically for each page, which can now be achieved by CSS. First, use the CSS class in the navigation code:

Viewsourceprint?

1 2Homea > li > 3Aboutusa > li > 4Contactusa > li > 5ul >

Then specify an id for each page's Body, with the same name as the above class. Such as. Then the CSS is designed as follows:

Viewsourceprint?

1#home.home,#about.about, # about.about {commandsforhighlightednavigationgohere}

Here, when id is set to home, .home will work, that is, the navigation bar where class is set to home will show a special effect. The same is true of other pages.

On the unknown CSS classic skills which are shared 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.