CSS三种样式

插入CSS的三种方法

有三种方式插入样式表：

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

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

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

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

body {
    background-color: lightblue;
}

h1 {
    color: navy;
    margin-left: 20px;
}

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

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

内部样式定义在 <style> 元素里面,在HTML的 <head> 部分:

<head>
<style>
body {
    background-color: linen;
}

h1 {
    color: maroon;
    margin-left: 40px;
}
</style>
</head>

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

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

面的示例显示如何改变<h1>元素的颜色和左边距:

<h1 style="color:blue;margin-left:30px;">这是一个标题.</h1>

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

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

假设一个外部样式表为<h1>提供了如下样式：

h1 {
    color: navy;
}

然后，假设一个内部样式表也为<h1>元素提供了如下样式：

h1 {
    color: orange;    
}

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

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
    color: orange;
}
</style>
</head>

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

<head>
<style>
h1 {
    color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

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

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

所以，内联样式（在一个特定的HTML元素）具有最高的优先级,这意味着它将覆盖定义在<head>标签内的样式,或在一个外部样式表,默认值或浏览器.