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.mb5u.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.mb5u.com]
Examples B
代码调试框 [www.mb5u.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.mb5u.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.mb5u.com]
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.mb5u.com/images/back40.gif")}
p {margin-left: 20px}
body {background-image: url("http://www.mb5u.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.mb5u.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.mb5u.com]
<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.mb5u.com/images/back40.gif")}
-->
</style>
</head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("http://www.mb5u.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.mb5u.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.mb5u.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.mb5u.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.mb5u.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？
。