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元素指定多个样式时,该如何使用?

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

  1. 行内式样; (在一个HTML元素内部)
  2. 外部和内部样式表 (在 head 部分)
  3. 浏览器默认

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

让我试试