html三种样式,CSS三种样式

插入CSS的三种方法

有三种方式插入样式表：

外部样式表

内部样式表

行内式样

外部样式表

使用外部样式表，值改变一个文件，您可以改变整个网站的外观！

每个页面必须包含一个外部样式表文件的引用，在 元素里面. 元素包含在

里面:

外部样式表可以使用任何的文本编辑器编写。文件不应该包含任何HTML标签。样式表文件必须保存在为一个以.css为扩展名的文件中。

这里是一个CSS文件 "myStyle.css"像这样:

body {

background-color: lightblue;

}

h1 {

color: navy;

margin-left: 20px;

}

注意：不要在属性值和单位之间增加一个空格(margin-left：20 px )正确的方法是：margin-left: 20px；

内部样式表

如果单个页面具有独特的样式，则可以使用内部样式表。

内部样式定义在

body {

background-color: linen;

}

h1 {

color: maroon;

margin-left: 40px;

}

内联样式

内联样式可用于为单个元素应用唯一样式..

若要使用内联样式，请将样式属性添加到相关元素中。样式属性可以包含任何CSS属性。

面的示例显示如何改变

元素的颜色和左边距:

这是一个标题.

提示：内嵌样式失去样式表的许多优点(通过将内容与样式混合)。有节制地使用这种方法。

多个样式表

如果在不同样式表中为同一选择器(元素)定义了某些属性，则将使用最后一次读取样式表的值。

假设一个外部样式表为

提供了如下样式：

h1 {

color: navy;

}

然后，假设一个内部样式表也为

元素提供了如下样式：

h1 {

color: orange;

}

如果内部样式定义在外部样式之后，那么元素将是"orange".

h1 {

color: orange;

}

如果内部样式定义在外部样式之前，那么元素将是"navy".

h1 {

color: orange;

}

级联顺序

当为一个HTML元素指定多个样式时，该如何使用?

一般来讲，我们可以说将样式表"级联"到一个新的"虚拟的"样式表里面去，依据如下优先级规则：

行内式样; (在一个HTML元素内部)

外部和内部样式表 (在 head 部分)

浏览器默认

所以，内联样式(在一个特定的HTML元素)具有最高的优先级,这意味着它将覆盖定义在

标签内的样式,或在一个外部样式表,默认值或浏览器.