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

This article is about how to understand the ten layout skills of CSS. The editor thinks it is very practical, so I hope you can get something after reading this article. Let's take a look at it with the editor.

Describe to you ten CSS skills, including CSS font attribute shorthand rules, CSSborder default values, CSS picture replacement skills, CSS for document printing and so on.

Ten detailed explanations of CSS skills

These ten CSS skills are compiled on the Internet, as veterans have become commonplace, there is nothing new, but review the past and know the new, perhaps read it has a certain inspiration, this article is mainly for CSS novice friends, there are some things may not be very clear. And these ten CSS skills can promote your learning and coding skills, more knowledge to browse 51cto.com tutorials. I hope you can read it carefully.

1. Rules for abbreviation of CSS font attributes

Generally use CSS to set font properties:

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

You can write them all on one line:

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

This doesn't seem much easier, but there's only one caveat: this shorthand method only works when you specify both the font-size and font-family attributes. Also, if you don't set font-weight,font-style and font-varient, they will use the default, which should be noted.

2. Default value of 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.

Third, use two classes for elements at the same time

Generally, an element sets one class (Class), but that doesn't mean you can't use two. In fact, you can do this:

...

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.

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, turn off some navigation buttons, and so on.

5. CSS 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:

Buywidgetsh2 >

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.

6. Another 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:

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

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

Call as follows:

. Div > div >

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

7. CSS sets the horizontal alignment of block elements

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.

Use 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. The positioning of CSS 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.

For more CSS layouts and techniques, please refer to 52CSS.com 's extensive tutorials.

10. The background color that goes straight to 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.

The above is how to understand the ten layout skills of CSS. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.