Do you know these CSS web design tips?

css| Skills | design | Web page design

This translation is not authorized by the author or the website. All rights are vested in the original author and the original website. If you are authorized by the original author or the original published website, you are free to use this translation.

1.CSS Font Property shorthand rules

Generally using CSS to set font properties is done:

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 up in one line:

Font:bold Italic small-caps 1em/1.5em Verdana,sans-serif;

how nice! There is only one caveat: This shorthand method works only if you specify both the Font-size and Font-family properties. And, if you don't set Font-weight, Font-style, and font-varient, they'll use the default value, which is to remember.

2. Use of two classes at the same time

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

<p class= "text side" >...</p>

At the same time give p elements two classes, the middle with empty open, so that all text and side two classes of properties will be added to the P element. If the properties in their two classes conflict, then the setting works, that is, the properties of the class that are placed in the CSS file later.

Add: For an ID, you can't write <p id= "text side" >...</p> can't write like this

3. CSS Border Defaults

You can usually set the boundaries of the color, width and style, such as:
BORDER:3PX Solid #000
This shows the boundary as 3 pixel wide, black, solid line. But in fact, you just need to specify the style.

If only the style is specified, the default value is used for other properties. Generally, the border width defaults to medium, which is generally equal to 3 to 4 pixels, and the default color is the color of the text. If the value is right, it's not as much.

4. CSS for document printing

Many web sites have a print version, but in practice this is not necessary because you can use CSS to set the print style.

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

<link type= "Text/css" rel= "stylesheet" href= "stylesheet.css" media= "screen"/> <link type= "text/css" rel= " Stylesheet "href=" Printstyle.css "media=" print "/>

Line 1th is displayed, and line 2nd is printed, noting the media properties.

But what should I write in the print CSS? You can set it up in a way that is designed to be normal CSS. Design at the same time you can set this CSS to display CSS to check its effect. Perhaps 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 see the "Print Difference" article.

5. Picture Replacement Technique

It is generally recommended that you use standard HTML to display text instead of using pictures, which is faster and more readable. But if you want to use some special fonts, you can only use pictures.

For example you want to sell the whole thing icon, you use this picture:
That's OK, but for search engines, they're less interested in alt text than normal text because many designers put a lot of keywords here to trick search engines. So the method should be this:
But then there is no special font. To achieve the same effect, you can design css like this:
H1 {Background:url (http://www.webjx.com/htmldata/2006-09-26/widget-image.gif) no-repeat; height:image height Text-indent: -2000px}

Notice that the image height is changed to the height of the real picture. Here, the picture will be displayed as a background, and the real text because of the set-2000 pixel indentation, they will appear on the left side of the screen 2000 points, it is not visible. But for those who close the picture, you may not be able to see it.

6. Another adjustment technique for the CSS box model

The box model was adjusted primarily for IE browsers before IE6, which counted the width of the boundary and the padding on the element width. Like what:

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

Call it this way:
<div id= "box" >...</div>
At this point the full width of the box should be 150 points, which is correct in all browsers except IE browsers before IE6. But on a browser like IE5, its full width is still 100 points. This difference can be handled using the box adjustment method that was invented by the previous person.

But using CSS can also achieve the same goal, let them show the same effect.

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

This call:
<div id= "box" ><div>...</div></div>
In this way, no matter what browser, the width is 150 points.

7. Block Element Center Alignment

If you want to be a fixed-width page and want to center the page horizontally, this is usually the case:

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

You will use <div id= "content" > to surround all elements. This is simple, but not good enough, IE6 the previous version will not show this effect. Change the CSS as follows:

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

This will center the content of the page, so in the content is added to the
Text-align:left.

8. Use CSS to handle vertical alignment

Vertical alignment with the table can be easily implemented, set the table cell Vertical-align:middle on it. But it's no use for CSS. Setting this property is useless if you want to set a navigation bar that is 2em high and you want to center the navigation text vertically.

What is the CSS method? Yes, the line height of these words is set to 2em:line-height:2em, this is OK.

9. CSS positioning within the container

One advantage of CSS is that you can position an element arbitrarily, within a container. For example, for this container:

#container {position:relative}

All elements in the container are positioned relative to each other, and can be used in this way:
<div id= "container" ><div id= "navigation" >...</div></div>
If you want to navigate to the left 30 points from 5 points, you can:

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

Of course, you can also do this:
margin:5px 0 0 30px
Note that the order of 4 digits is: top, right, bottom, left. Of course, sometimes the method of locating rather than the margin is better.

10. Straight to the bottom of the screen background color

In the vertical direction is to control is not the CSS. If you want the navigation bar and the content bar to go straight to the bottom of the page, it is convenient to use the table, but if you only use this CSS:

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

The shorter navigation bar will not go straight to the bottom of the section, the halfway end of the content it is over. What should we do?

Unfortunately, the only way to cheat is to add a background image to the shorter column, width and bar width, and make it the same color as the set background color.

Body {background:url (blue-image.gif) 0 0 Repeat-y}

At this point can not use EM to do units, because in that case, once the reader changed the font size, the trick will be revealed, can only use PX.

1. Block and inline element comparison
All HTML elements are part of block and inline.
The block element is characterized by:
Always start on a new line;
Height, row height and top and bottom margins are controllable;
The width defaults to 100% of its container, unless a width is set
<div&gt, <p&gt,
Conversely, the inline element is characterized by:
and other elements are on one line;
High, the row height and the top and the bottom distance cannot be changed;
The width is the width of its text or picture, and cannot be changed.
<span&gt, <a&gt, <label&gt, <input&gt, and <em> are examples of inline elements.

You can change this feature of an element by using the Display:inline or Display:block command. When do I need to change this attribute?
Let a inline element start on a new line;
Keep The block element and other elements on one line;
Controls the width of the inline element (especially useful for navigation bars);
Control the height of the inline element;
You can set a background color with the same width for a block element without setting the width.

2. Another box hacker method
There are so many box hacker methods, because IE in 6 before the understanding of box and other people are not the same, its width to include the edge width and blank. To make IE5 equal to other browsers, you can use the CSS method:

Padding:2em;
Border:1em solid Green;
Width:20em;
width/**/:/**/14em;

The first width is recognized by all browsers, but ie5.x does not recognize the width setting of line 2nd because there are blank annotation symbols on that line (What a stupid parsing!). , so ie5.x uses 20 to subtract some whitespace, while the other browsers use the width of 14 because it's line 2nd, and it overrides line 1th.

3. The minimum width of the page

Min-width is a handy CSS command that specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually treats the width as a minimum. To make this command available on IE, you can put a <div> under the <body> tab, and then assign a class to the DIV:

<body>
<div class= "Container" >

Then CSS is designed like this:

#container
{
min-width:600px;
Width:expression (Document.body.clientWidth < 600?) "600px": "Auto");
}

The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.

The same approach can also achieve maximum width for IE:

#container
{
min-width:600px;
max-width:1200px;
Width:expression (Document.body.clientWidth < 600?) "600px": document.body.clientWidth > 1200? "1200px": "Auto";
}

4. IE and width and height of the problem

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. This problem is large, if only with the width and height, the normal browser in the two values will not change, if only with Min-width and min-height, ie below is not set width and height.

For example, to set the background picture, this width is more important. To solve this problem, you can do this:

. box
{
width:80px;
height:35px;
}

Html>body. Box
{
Width:auto;
Height:auto;
min-width:80px;
min-height:35px;
}

All browsers can use the first box setting, but IE does not recognize the 2nd paragraph because it uses the subcommand command. The 2nd setting is more specific, so it overrides the 1th setting.

5. Font Variant command

The Text-transform command is useful because it has 3 values: Text-transform:uppercase, Text-transform:lowercase, and Text-transform:capitalize. The 1th one will turn the text into all uppercase, the 2nd becomes all lowercase, and the 3rd becomes the first letter. This is useful for alphabetic text, even if there is a case error when typing, and is not visible on the Web page.

6. The problem of the disappearance of picture text in IE

Sometimes the problem of a sudden disappearance of text or background images is encountered, and the refresh appears again, which is more likely to occur near the floating element (note: not seen). At this point, you can set the vanishing element: position:relative, and if not, consider specifying a width for these elements.

7. Invisible text

For whatever reason you want some of the page text to not be displayed in the browser, for example, to print or to have some text not displayed for a small screen, you can use Display:none. This is very simple, but sometimes for some people this is a bit useless, they can remove this control, then need to use: Position:absolute; Left: -9000px.

This actually specifies that the text is displayed outside the page.

8. Design a dedicated CSS for handheld devices

That is, mobile phone/pda and other small screen users, you can specifically design a CSS to make the page display more comfortable. To do this, you can adjust the browser window to 150-point width to see the effect. The syntax for specifying the CSS for a dedicated handheld device is:

<link type= "Text/css" rel= "stylesheet" href= "Handheldstyle.css" media= "handheld"/>

You can also read specialized handheld device availability.

9.3D Effect of the button

Before you want to make a 3D effect, and click Down will change the button, you have to use the method of replacing the picture, now CSS can be:

A
{
Display:block;
BORDER:1PX solid;
Border-color: #aaa #000 #000 #aaa;
Width:8em;
Background: #fc0;
}

A:hover
{
position:relative;
top:1px;
left:1px;
Border-color: #000 #aaa #aaa #000;
}

As for the effect, you can also adjust their own.

10. Use the same navigation code on different pages

Many web pages have navigation menus, and when you go to a page, the corresponding item on the menu should be dimmed, and the other pages will light up. Generally to achieve this effect, need to write programs or specifically for each page to do the design, now rely on CSS can achieve this effect.

First, use the CSS class in the navigation code:

<ul>
<li><a href= "#" class= "Home" >Home</a></li>
<li><a href= "#" class= "about" >about us</a></li>
<li><a href= "#" class= "Contact" >contact us</a></li>
</ul>

Then specify an ID for the body of each page, with the same name as the class above. such as <body id= "Contact" >.

Then design the CSS as follows:

#home. Home, #about. About, #about. About
{
Commands for highlighted navigation go
}

Here, when the ID is set to home,. Home works, that is, the navigation bar with class set to home will show special effects. The same is true for other pages.

The author of this article is: Trenton Moss.
Publish the website is: http://www.webcredible.co.uk