1. CSS font attribute abbreviation rules
Generally, CSS is used to set font attributes:
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: bold italic small-caps 1em/1.5em verdana,sans-serif;
Doesn't this seem much simpler? There is only one thing to note: this shorthand method only works when the font-size and font-family properties are specified at the same time. Also, if you do not set font-weight, font-style, and font-variant, they will use default values, so keep this in mind.
2. Default value of CSS border
You can usually set the color, width and style of the border, such as:
border: 3px solid #000;
This makes the border appear 3 pixels wide, black, and solid. But in fact, you only need to specify the style here.
If only style is specified, default values will be used for other properties. Generally, the default width of Border is medium, which is generally equal to 3 to 4 pixels; the default color is the color of the text. If this value is just right, there is no need to set so many settings.
3. Use two classes for elements at the same time
Generally, one element is set to one class (Class), but this does not mean that two cannot be used. In fact, you can do this:
<p class="text side">…</p>
Give the P element two classes at the same time, separated by spaces, so that all attributes of the text and side classes will be added to the P element. If there is a conflict between the attributes in the two classes, the one set later will take effect, that is, the attributes of the class placed later in the CSS file will take effect.
Supplement: For an ID, you cannot write <p id="text side">…</p> nor can you write it like this
4. CSS for document printing
Many websites have a print-specific version, but this is not really needed because the printing can be styled using CSS.
In other words, you can specify two CSS files for the page, one for 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 1 is for display, line 2 is for printing, pay attention to the media attribute.
But what should be written in the printing CSS? You can set it up the same way you would design normal CSS. While designing, you can set this CSS 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, etc.
5. CSS image replacement skills
It is generally recommended to use standard HTML to display text instead of images, which is not only faster but also more readable. But if you want to use some special fonts, you can only use pictures.
For example, if you want to create an icon for selling things, you would use this image:
<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
Of course this is possible, but for search engines, compared with normal text, they have little interest in the replacement text in alt. This is because many designers put many keywords here to deceive search engines. So the method should be like this:
<h1>Buy widgets</h1>
But then there are no special fonts. To achieve the same effect, you can design CSS like this:
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
Pay attention to replacing the image height with the height of the real image. Here, the image will be displayed as the background, and because the indentation of -2000 pixels is set, the real text will appear 2000 points on the left side of the screen and will be invisible. But for people who turn off the picture, they may not be able to see it at all, so be careful.
6. Another technique of CSS box model
The adjustment of this Box model is mainly for IE browsers before IE6, which count the border width and whitespace into the element width. for example:
#box { width: 100px; border: 5px; padding: 20px }
Call it like this:
<div id="box">…</div>
The full width of the box should now be 150 points, which is correct on all browsers except IE 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 the same purpose can be achieved with CSS to make them display consistent.
#box { width: 150px }
#box div { border: 5px; padding: 20px }
Called like this:
<div id="box"><div>…</div></div>
In this way, no matter what browser, the width is 150 points.
7. CSS sets block elements to be horizontally aligned in the center
If you want to make a fixed-width web page and want the web page to be horizontally centered, it usually looks like this:
#content { width: 700px; margin: 0 auto }
You would use <div id="content"> to surround all elements. This is simple, but not good enough, and versions prior to IE6 will not display 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 web page, so text-align: left is added to Content.
8. Use CSS to handle vertical alignment
Vertical alignment can be easily achieved using tables. Just set the table unit vertical-align: middle. But this is useless with CSS. If you want to set a navigation bar to be 2em high and want the navigation text to be vertically centered, setting this attribute is useless.
What is the CSS method? By the way, set the line height of these words to 2em: line-height: 2em, and that's it.
9. Positioning of CSS within the container
One benefit of CSS is that you can position an element arbitrarily, even within a container. For example, for this container:
#container { position: relative }
In this way, all elements in the container will be relatively positioned, which can be used like this:
<div id="container"><div id="navigation">…</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: 5px 0 0 30px
Note that the order of the four numbers is: up, right, down, left. Of course, sometimes positioning rather than margins is better.
For more CSS layout and techniques, please refer to the large number of tutorials at 52CSS.com.
10. Background color straight to the bottom of the screen
Control in the vertical direction is beyond the capabilities of CSS. If you want the navigation bar to go straight to the bottom of the page like the content bar, using a table is very convenient, but if you only use CSS like this:
#navigation { background: blue; width: 150px }
A shorter navigation bar doesn’t go all the way to the bottom; it ends halfway through the content. What to do?
Unfortunately, the only way to cheat is to add a background image to the shorter column, the same width as the column width, and make it the same color as the set background color.
body { background: url(blue-image.gif) 0 0 repeat-y }
You can't use em as the unit at this time, because then the trick will be revealed once the reader changes the font size, and you can only use px.