一篇极好的 CSS 教程
这是我codeproject上面看到的极好的css教程，今日放上让大家看看，待我明日青岛归来翻译给大家看看。
CSS stands for Cascading Style Sheets. This is a simple styling language which allows attaching style to HTML elements. Every element type as well as every occurance of a specific element within that type can be declared an unique style, e.g. margins, positioning, color or size. So you might consider these style sheets as templates, very similar to templates in desktop publishing applications. For example:
body { background-color: white; color: darkblue;font-size:
font-family: Arial; margin-left: 10%}
There are many ways to link style sheets to HTML, each carrying its own advantages and disadvantages. New HTML elements and attributes have been introduced to allow easy incorporation of style sheets into HTML documents.
An external style sheet can be linked with any number of HTML documents by using <link> that is placed in the document HEAD. The tag's various attributes indicate things about the style sheet - the rel attribute the type of link (a style sheet); the type attribute the type of style sheet (always text/css); and the href attribute the location of the style sheet. This is a very convenient way of formatting the entire site as well as restyling it by editing just one file. For example:
<HTML><HEAD>
<LINK rel="stylesheet" type="text/css" href="basic.css">
</HEAD>
<BODY> ... </BODY>
</HTML>
Once you have linked the style sheet to your page, you then have to create the style sheet. For example:
body { font-family: Verdana, Helvetica, Arial, sans-serif;
color: darkblue; background-color: #ffeeff}
If you saved the example above as a style sheet, then every page that links to it will have the specified styles. Files containing style information must have extension .css.
If you have a single document that has a unique style, you can use an embedded style sheet. If the same style sheet is used in multiple documents, then an external style sheet would be more appropriate. A embedded style sheet is inside the HEAD element with the STYLE element and will apply to the entire document:
<STYLE TYPE="text/css" MEDIA=screen>
<!--
body { background: url(flower.gif) lightyellow; color: darkblue }
.zn { margin-left: 8em; margin-right: 8em }
-->
</STYLE>
The required TYPE attribute is used to specify a media type, as is its function with the LINK element. You should write the style sheet as a HTML comment, that is, between <!-- and --> to hide the content in browsers without CSS support which would otherwise be displayed.
You can import a style sheet with CSS's @import statement:
<STYLE TYPE="text/css" MEDIA="screen, projection">
<!--
@import url(http://www.tongchiu.com/gen.css);
@import url(/product/file.css);
table { background: yellow; color: #003366 }
-->
</STYLE>
The @import allows you to keep some things the same while having others different; and follows this syntax: @import url(gen.css);
Note: If more than one sheet is imported they will cascade in order they are imported - the last imported sheet will override the next last; the next last will override the second last, and so on. If the imported style is in conflict with the rules declared in the main sheet then it will be overridden.
Inline style is the style attached to one specific element. Any opening tag may take the style attribute:
<P style="font-size:
To use inline style, one must declare a single style sheet language for the entire document using the Content-Style-Type HTTP header extension. With inlined CSS, an author must send text/css as the Content-Style-Type HTTP header or include the following tag in the HEAD:
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
Basic syntax as follows:
selector { property: value }
That is a property (such as color) followed by a colon (:) and a value. A property is assigned to a selector in order to manipulate its style. Examples of properties include color, margin, and font. The value is an assignment that a property receives. Multiple style declarations for a single selector may be separated by a semicolon. The following example defines the color and font-size properties for H1 and P elements:
<HEAD>
<TITLE>CSS Example</TITLE>
<STYLE TYPE="text/css">
H1 { font-size: x-large; color: darkred }
P { font-size:
</STYLE>
</HEAD>
You can use grouping of selectors and declarations to decrease repetitious statements within style sheets. For example:
H1, H2, H3, H4 { color: #666666; font-family: Arial }
Selectors are used to associate style declarations with an element or elements. This is done by placing the declarations within a block (enclosed in {}) and preceding it with a selector. For example:
p {color: #008000}
div {color: #cccccc; font-size:
You can take any opening HTML tag and use it as a selector:
h3 {color: red}
These allow you to give elements a particular name. For example:
<P class="zn"> .... </P>
In a style sheet, The syntax as the below:
P.zn { color: blue }
Or like this:
.zn { color: blue }
Pseudo-classes can be assigned to the A element to display links, visited links and active links differently. The anchor element can give the pseudo-classes link, visited, or active. A visited link could be defined to render in a different color and even a different font size and style. The sample style sheet might look like this:
A:link { color: red }
A:active { color: blue; font-size: 150% }
A:visited { color: green }
These selectors are very similar to classes except there can only be one element with a given ID in a document. An ID selector is assigned by using the indicator "#". For example:
#abc { text-style: bold }
To use an ID selector:
<P ID=abc>Welcome to my website</P>
Note: IDs like classes they should be in lowercase, may not start with a number or contain spaces. This selector type should only be used sparingly due to its inherent limitations.
This element may be used as a selector in a style sheet, and it also accepts the STYLE, CLASS, and ID attributes. Some examples of SPAN follow:
<!DOCTYPE HTML PUBLIC "-//W
<HTML><HEAD><TITLE></TITLE>
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
.zn { font-size:
-->
</STYLE>
</HEAD>
<BODY>
<P><SPAN CLASS=zn>These words could be big.</SPAN></p>
<p><SPAN STYLE="font-family: Arial;font-size:12"> And these ones are different.</SPAN>.</P>
</BODY></HTML>
DIV (short for "division") is a block-level element that, in function, is similar to the SPAN. But DIV may contain paragraphs, headings, and tables. For example:
<DIV CLASS=zn>
<H1>Welcome</H1>
<P>Hello World</P>
<P>Welcome to my website!</P>
</DIV>
You can declare a color as the following example:
P {color: red}
H2 { color: #000080 }
LI {color: rgb(12%, 51%, 62%)}
Background-color This sets the background color of an element. For example:
BODY { background-color: white }
H1 { background-color: #000080 }
Note:
1. To help avoid conflicts with user style sheets, background-image should be specified whenever background-color is used. In most cases, background-image: none is suitable.
2. Netscape 4.* does not color in the background of block elements if they are given a background color that is different from BODY - it does not color in the spaces between words. To avoid this, explicitly set border: none
Background-image Specified with background-image. For example:
BODY { background-image: url(/images/cloud.gif) }
P { background-image: url(http://www.internetcollege.com/bg1.gif) }
Background-repeat This states the tiling of the background image. The possible values include: repeat | repeat-x | repeat-y | no-repeat.
The repeat-x value will repeat the image horizontally while the repeat-y value will repeat the image vertically. For example:
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }
In the above example, the image will only be tiled horizontally. IE only draws repeat-x to the right, and repeat-y down, not left and right and up and down as it should do.
Background This allows one or more of the properties to be specified in the order color, image, repeat, attachment, position. For examples:
BODY { background: white url(http://www.internetcollege.com/bg1.gif) }
BLOCKQUOTE { background: #6699ff }
P { background: url(image/line.gif) #e2e9ee fixed }
TABLE { background: #ffeeff url(house.gif) no-repeat top center }
Font-family This allows a specific font to be used. For example:
P { font-family: Times }
You may specify a couple fonts separated by comma. In case that if your preferred font is not available, your second choice is used. For example, font-family: Times, Arial. Note that any font name containing whitespace must be quoted, with either single or double quotes. For example:
P { font-family: "New Times Roman", Times, serif }
Font-size This can be specified as a length, or one of the following keywords: xx-small, x-small, small, medium (initial), large, x-large, xx-large. For example:
H2 { font-size: large }
P { font-size:
LI { font-size: 80% }
Table { font-size: small}
Note: Internet Explorer 3 and Netscape 4.* treat all relative units and % as relative to the element default rather than as relative to the parent element.
Font-style This defines that the font be displayed in one of three ways: normal, italic or oblique (slanted). For example:
P {font-style: italic}
Font-weight This is used for specifying the weight of the font that can be specified as normal (initial value), or bold. For example:
P {font-weight: bold}
It can also be specified as an absolute number, being one of 100, 200, 300, 400 (the same as normal), 500, 600, 700 (the same as bold), 800, or 900, where 100 is the lightest and 900 the most bold. For example:
H1 { font-weight: 800 }
Font This may be used as a shorthand for the various font properties. For example:
P { font: italic bold
This specifies paragraphs with a bold and italic Times or serif font with a size of 12 points and a line height of 14 points.
Text-align The value can be left (initial value), right, center, or justify (aligns to both margins). Text-align only applies to block elements and is inherited. For example:
H1 { text-align: center }
P.newspaper { text-align: justify }
Text-decoration This allows text to be decorated through one of five properties:
underline, overline, line-through, blink, or the default, none. For example:
A:link, A:visited, A:active { text-decoration: none }
Text-transform allows text to be transformed by one of four properties: none (initial value), lowercase, uppercase, or capitalize (capitalize the first letter of every word). It applies to all elements and is inherited. For example:
H1 { text-transform: uppercase }
H2 { text-transform: capitalize }
This property sets the margin of an element by specifying a length or a percentage. Each element can have four margins - left, right, bottom and top. These are defined by the margin-left, margin-right, margin-top, margin-bottom properties. For example:
P {margin-left: 20px}
The margins can be specified for all four sides at once with the margin shorthand. Margins can be negative, and initially margins are 0.
P {margin: 10px 12px
This would give P a top margin of 10 pixel, a right margin of 12 pixel, a bottom margin of 6 pixel and a left margin of 8 pixel.
Inheritance Basically a selector which is nested within another selector will inherit the property values assigned to the outer selector. For example, a font defined for the BODY will also be applied to text in a paragraph.
! important A style can be designated as important by specifying ! important. A style that is designated as important will win out over contradictory styles of otherwise equal weight. A ! important statement like this:
BODY { background: url(man.gif) white; background-repeat: repeat-x ! important }
The weight sort The weight sort sorts declarations according to their weight. Declarations can have normal weight or important weight. Declarations are made important by the addition of !important (or ! important). For example:
P {font-size:
The order sort When two rules have the same weight, the last rule specified wins. Thus:
P {color: red}
P {color: green}
It would result in green.
Case sensitivity All CSS is case insensitive.
posted on 2006-12-15 08:40 JesseZhao 阅读(2882) 评论(6) 编辑 收藏 举报
