css教程：如何正確的使用CSS？_CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
Examples A
[ 可先修改部分代碼 再運行查看效果 ]
Examples B
[ 可先修改部分代碼 再運行查看效果 ]
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:
當瀏覽器閱讀樣式表，它會依據它（樣式表）來格式化文檔。有三種方法可以插入樣式表：
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:
使用外部樣式表是使樣式應用于多張網頁的理想方法。通過這個方法你只需改動一個文件就能改變整個網站的外觀。使用<link>標簽讓每個頁面都連接到樣式表。<link>標簽在head區域使用：
The browser will read the style definitions from the file mystyle.css, and format the document according to it.
瀏覽器將從mystyle.css文件中讀取樣式定義信息，并依據它來格式化文檔
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:
外部樣式表可以用任何一個文字編輯器來書寫。文件不應該包含任何的html標簽。并保存為一個后綴為.css的文件.下面是一個樣式表文件的內容:
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
內嵌樣式表
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:
一份內嵌樣式表應該在當有單獨文檔有非凡樣式的時候使用。使用<style>標簽在head區域內定義樣式，像這樣：
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.wf0088.com/images/back40.gif")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
瀏覽器將立即讀取樣式定義，并依據它來格式化文檔。
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:
注重：瀏覽器一般會忽略未知的標簽。這就意味著老的瀏覽器不能支持樣式，會忽略<style>標簽，但<style>里的內容會顯示在頁面上。在HTML注釋元素中隱藏它可以來避免這類情況在老的瀏覽器中發生：
Inline Styles
行內樣式
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.
使用行內樣式就失去了樣式表的優勢而將內容和形式相混淆了。一般這類方法在個別元素需要改變樣式的時候使用。
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:
在相關的標簽上用style屬性來加入行內樣式。樣式屬性可以包含任何CSS屬性。鏈子中將展示怎樣給一個段落加上左外補丁并將顏色改為sienna：
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.
假如一些屬性被相同的選擇器設置成不同的樣式，值就會向更為具體的樣式所繼續（具體化）。
For example, an external style sheet has these properties for the h3 selector:
舉個例子，一個外部樣式表有這樣的h3選擇器屬性：
And an internal style sheet has these properties for the h3 selector:
同時有一個內嵌樣式表有這樣的h3選擇器屬性：
If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
假如頁面在有內嵌樣式表的同時又連接到外部樣式表的話h3的屬性將變為:
The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.
顏色是繼續了外部樣式表而文字對齊和文字大小被內嵌的樣式表所替換。
代碼調試框 [www.wf0088.com]
[ 可先修改部分代碼 再運行查看效果 ]
Examples B
代碼調試框 [www.wf0088.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:
當瀏覽器閱讀樣式表，它會依據它（樣式表）來格式化文檔。有三種方法可以插入樣式表：
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:
使用外部樣式表是使樣式應用于多張網頁的理想方法。通過這個方法你只需改動一個文件就能改變整個網站的外觀。使用<link>標簽讓每個頁面都連接到樣式表。<link>標簽在head區域使用：
示例代碼 [www.wf0088.com]
<head>
<link rel="stylesheet" type="text/css"href="mystyle.css" />
</head>
<link rel="stylesheet" type="text/css"href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the document according to it.
瀏覽器將從mystyle.css文件中讀取樣式定義信息，并依據它來格式化文檔
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:
外部樣式表可以用任何一個文字編輯器來書寫。文件不應該包含任何的html標簽。并保存為一個后綴為.css的文件.下面是一個樣式表文件的內容:
示例代碼 [www.wf0088.com]
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.wf0088.com/images/back40.gif")}
p {margin-left: 20px}
body {background-image: url("http://www.wf0088.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
內嵌樣式表
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:
一份內嵌樣式表應該在當有單獨文檔有非凡樣式的時候使用。使用<style>標簽在head區域內定義樣式，像這樣：
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.wf0088.com/images/back40.gif")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
瀏覽器將立即讀取樣式定義，并依據它來格式化文檔。
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:
注重：瀏覽器一般會忽略未知的標簽。這就意味著老的瀏覽器不能支持樣式，會忽略<style>標簽，但<style>里的內容會顯示在頁面上。在HTML注釋元素中隱藏它可以來避免這類情況在老的瀏覽器中發生：
示例代碼 [www.wf0088.com]
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.wf0088.com/images/back40.gif")}
-->
</style>
</head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.wf0088.com/images/back40.gif")}
-->
</style>
</head>
Inline Styles
行內樣式
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.
使用行內樣式就失去了樣式表的優勢而將內容和形式相混淆了。一般這類方法在個別元素需要改變樣式的時候使用。
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:
在相關的標簽上用style屬性來加入行內樣式。樣式屬性可以包含任何CSS屬性。鏈子中將展示怎樣給一個段落加上左外補丁并將顏色改為sienna：
示例代碼 [www.wf0088.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.
假如一些屬性被相同的選擇器設置成不同的樣式，值就會向更為具體的樣式所繼續（具體化）。
For example, an external style sheet has these properties for the h3 selector:
舉個例子，一個外部樣式表有這樣的h3選擇器屬性：
示例代碼 [www.wf0088.com]
h3
{
color: red;
text-align: left;
font-size: 8pt
}
{
color: red;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
同時有一個內嵌樣式表有這樣的h3選擇器屬性：
示例代碼 [www.wf0088.com]
h3
{
text-align: right;
font-size: 20pt
}
{
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:
假如頁面在有內嵌樣式表的同時又連接到外部樣式表的話h3的屬性將變為:
示例代碼 [www.wf0088.com]
color: red;
text-align: right;
font-size: 20pt
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.
顏色是繼續了外部樣式表而文字對齊和文字大小被內嵌的樣式表所替換。
相關CSS教程：
- 相關鏈接：
- 教程說明：
CSS教程-css教程：如何正確的使用CSS？
。