CSS值得注意的地方

1、The CSS2 way to enforce separation between table cells is to use the property border-spacing in conjunction with the proper value for the property border-collapse, but support for that approach is pretty bad, so we've left in cellspacing.
It's still valid HTML (and even valid XHTML), so no worries.

 

2、As we've seen, CSS keywords are separated by spaces except in one instance.
In the CSS property font, there is exactly one place where a forward slash (/) can be used to separate two specific keywords.
Here's an example:

h2 {font: large/150% sans-serif;}                //why? cause 150%也可能表示字体增大

The slash separates the keywords that set the element's font size and line height.
This is the only place the slash is allowed to appear in the font declaration.
All of the other keywords allowed for font are separated by spaces.

3、In versions previous to IE7, Internet Explorer for both platforms has problems with correctly handling multiple class selectors.
In these older versions, although you can select a single class name out of a list, selecting based on multiple names in a list does not work properly. Thus, p.warning would work as expected, but p.warning.help would match any p elements that have a class attribute with the word help because it comes last in the selector.
If you wrote p.help.warning, then older versions of Explorer would match any p elements that have warning in their class value, whether or not help appears in the same value.

 

4、Pseudo-Classes and Pseudo-Elements
Things get really interesting with pseudo-class selectors and pseudo-element selectors.
These selectors let you assign styles to structures that don't necessarily exist in the document, or to phantom classes that are inferred by the state of certain elements, or even by the state of the document itself.
In other words, the styles are applied to pieces of a document based on something other than the structure of the document, and in a way that cannot be precisely deduced simply by studying the document's markup.

It may sound like I'm applying styles at random, but I'm not. Instead, I'm applying styles based on somewhat ephemeral conditions that can't be predicted in advance.
However, the circumstances under which the styles will appear are, in fact, well-defined.
Think of it this way: during a sporting event, whenever the home team scores, the crowd will cheer.
You don't know exactly when during a game the team will score, but when it does, the crowd will cheer,
just as predicted. The fact that you can't predict the moment of the cause doesn't make the effect any less expected.

//传说中的run-time changing................

Consider the anchor element (a), which, in HTML and XHTML, establishes a link from one document to another.
Anchors are always anchors, of course, but some anchors refer to pages that have already been visited, while others refer to pages that have yet to be visited. You can't tell the difference by simply looking at the HTML markup, because in the markup, all anchors look the same. The only way to tell which links have been visited is by comparing the links in a document to the user's browser history.
So, there are actually two basic types of anchors: visited and unvisited. These types are known as pseudo-classes, and the selectors that use them are called pseudo-class selectors.

 

Internet Explorer for Windows through IE6 does not permit dynamic pseudo-classes to select any elements other than hyperlinks.
IE7 added support for :hover on any element, but not :focus styles for form elements.

 

5、相对定位：相对于原来的位置（top，left）

已定位元素：position属性不等于static的元素。

 

6、The transparency we've been discussing so far is all-or-none: an element either has a transparent background or an opaque background. It is also possible to specify that an element (both its background and its foreground content) is translucent. (See Figure 16-4 for an example.)
You do this with the CSS3 opacity attribute. The value of this attribute is a number between 0 and 1, where 1 means 100% opaque (the default) and 0 means 0% opaque (or 100% transparent).
The opacity attribute is supported by the Firefox browser. Earlier versions of Mozilla support an experimental variant named -moz-opacity. IE provides a work-alike alternative through its IE-specific filter attribute.
To make an element 75 percent opaque, you can use the following CSS styles:

opacity: .75;               /* standard CSS3 style for transparency */
-moz-opacity: .75;          /* transparency for older Mozillas */
filter: alpha(opacity=75);  /* transparency for IE; note no decimal point */