一篇极好的 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: 10pt;

font-family: Arial; margin-left: 10%}

Linking and Embedding

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.

External style sheets

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:

</HEAD>

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

Embedded Style Sheets

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:

<!--

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  to hide the content in browsers without CSS support which would otherwise be displayed.

Importing Style Sheets

You can import a style sheet with CSS's @import statement:

<!--

@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

Inline style is the style attached to one specific element. Any opening tag may take the style attribute:

<P style="font-size: 10pt">.

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:

Syntax

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>

H1 { font-size: x-large; color: darkred }

P { font-size: 12pt; color: darkblue }

</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

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: 14pt}

Tag selectors

You can take any opening HTML tag and use it as a selector:

h3 {color: red}

Class selectors

These allow you to give elements a particular name. For example:

In a style sheet, The syntax as the below:

P.zn { color: blue }

Or like this:

.zn { color: blue }

Pseudo-class selectors

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 }

ID selectors

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.

Span

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 "-//W3C//DTD HTML 4.0//EN">

<!--

.zn { font-size: 28pt }

-->

</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

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:

<H1>Welcome</H1>

<P>Hello World</P>

<P>Welcome to my website!</P>

</DIV>

Properties

Color

You can declare a color as the following example:

P {color: red}

H2 { color: #000080 }

LI {color: rgb(12%, 51%, 62%)}

Background

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 }

Fonts

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: 10pt }

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 12pt/14pt Times, serif }

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

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 }

Margin

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 6cm8pt}

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.

Rules

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: 36pt !important} P {font-size: 16pt}

36 pt will result because that declaration has greater weight.

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.

转载于:https://www.cnblogs.com/jessezhao/archive/2006/12/15/592813.html