css教程：如何正確的使用CSS？_CSS教程

編輯Tag賺U幣

教程Tag：暫無Tag,歡迎添加,賺取U幣!

Examples A

代碼調(diào)試框 [m.ghpqjb.com]

[ 可先修改部分代碼再運行查看效果 ]

Examples B

代碼調(diào)試框 [m.ghpqjb.com]

[ 可先修改部分代碼再運行查看效果 ]

How to Insert a Style Sheet
怎樣插入樣式表

When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
當(dāng)瀏覽器閱讀樣式表，它會依據(jù)它（樣式表）來格式化文檔。有三種方法可以插入樣式表：

External Style Sheet
外部樣式表
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
使用外部樣式表是使樣式應(yīng)用于多張網(wǎng)頁的理想方法。通過這個方法你只需改動一個文件就能改變整個網(wǎng)站的外觀。使用<link>標(biāo)簽讓每個頁面都連接到樣式表。<link>標(biāo)簽在head區(qū)域使用：

示例代碼 [m.ghpqjb.com]

The browser will read the style definitions from the file mystyle.css, and format the document according to it.
瀏覽器將從mystyle.css文件中讀取樣式定義信息，并依據(jù)它來格式化文檔
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:
外部樣式表可以用任何一個文字編輯器來書寫。文件不應(yīng)該包含任何的html標(biāo)簽。并保存為一個后綴為.css的文件.下面是一個樣式表文件的內(nèi)容:

示例代碼 [m.ghpqjb.com]

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://m.ghpqjb.com/images/back40.gif")}

Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.
請不要在屬性值和其單位間加上空格！假如你用"margin-left: 20 px“來代替"margin-left: 20px"的話，這也許在IE6中能正常工作,但在Mozilla/Firefox或Netscape中就無法正常顯示了。

Internal Style Sheet
內(nèi)嵌樣式表
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag, like this:
一份內(nèi)嵌樣式表應(yīng)該在當(dāng)有單獨文檔有非凡樣式的時候使用。使用<style>標(biāo)簽在head區(qū)域內(nèi)定義樣式，像這樣：
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://m.ghpqjb.com/images/back40.gif")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
瀏覽器將立即讀取樣式定義，并依據(jù)它來格式化文檔。

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:
注重：瀏覽器一般會忽略未知的標(biāo)簽。這就意味著老的瀏覽器不能支持樣式，會忽略<style>標(biāo)簽，但<style>里的內(nèi)容會顯示在頁面上。在HTML注釋元素中隱藏它可以來避免這類情況在老的瀏覽器中發(fā)生：

示例代碼 [m.ghpqjb.com]

Inline Styles
行內(nèi)樣式
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when a style is to be applied to a single occurrence of an element.
使用行內(nèi)樣式就失去了樣式表的優(yōu)勢而將內(nèi)容和形式相混淆了。一般這類方法在個別元素需要改變樣式的時候使用。
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:
在相關(guān)的標(biāo)簽上用style屬性來加入行內(nèi)樣式。樣式屬性可以包含任何CSS屬性。鏈子中將展示怎樣給一個段落加上左外補丁并將顏色改為sienna：

示例代碼 [m.ghpqjb.com]

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

Multiple Style Sheets
多重樣式表

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
假如一些屬性被相同的選擇器設(shè)置成不同的樣式，值就會向更為具體的樣式所繼續(xù)（具體化）。
For example, an external style sheet has these properties for the h3 selector:
舉個例子，一個外部樣式表有這樣的h3選擇器屬性：

示例代碼 [m.ghpqjb.com]

h3
{
color: red;
text-align: left;
font-size: 8pt
}

And an internal style sheet has these properties for the h3 selector:
同時有一個內(nèi)嵌樣式表有這樣的h3選擇器屬性：

示例代碼 [m.ghpqjb.com]

h3
{
text-align: right;
font-size: 20pt
}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
假如頁面在有內(nèi)嵌樣式表的同時又連接到外部樣式表的話h3的屬性將變?yōu)?

示例代碼 [m.ghpqjb.com]

color: red;
text-align: right;
font-size: 20pt

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
顏色是繼續(xù)了外部樣式表而文字對齊和文字大小被內(nèi)嵌的樣式表所替換。