在HTML文本文档中嵌入CSS的3种常见方法

在HTML中常见下列3种方法界定CSS:Embedding(嵌入式)、Linking(引入式)、Inline(内联式)

1、嵌入式

应用HTML的style元素,在文本文档中界定CSS款式。

拷贝编码
编码以下:

<head>
<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>

2、内联式

每个HTML元素都包括1个style特性,能够立即界定款式。该款式仅能用于该元素的內容,针对另外一个同名的元素则不起功效。

拷贝编码
编码以下:

<p style="color:#FFF;font-weight:bold;">内联款式</p>

3、外界引入式

外界引入指HTML文本文档自身不含有CSS款式,而是动态性引入外界的CSS文档界定文本文档的主要表现方式。

1、应用款式表的解决命令句子

在HTML文本文档的开始一部分写1个有关款式表的命令解决句子

拷贝编码
编码以下:

<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
命令句子
</html>

但是仅有应用xml英语的语法文件格式撰写的html文本文档才适用应用该命令,大多数数访问器仅当被储存为xhtml或xml文件格式才合理,且JS不可以解决这类CSS,因此不提议应用。

2、应用@import指令

在style元素之间应用@import指令导入外界的css文档

拷贝编码
编码以下:

<head>
<style type="text/css">
<!--下面两行编码实际效果1样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>

任何@import标准务必出現在全部标准以前。主要参数是1个css文档的URL详细地址。在1个css文档中还可以用@import命令将另外一个css文档导入。

3、应用link元素

拷贝编码
编码以下:

<head>
<link rel="stylesheet" href="css的url" type="text/css" >
</head>

这也是最常见的方法。

4、应用HTTP信息报头连接到款式表

可使用HTTP信息报头的link字段连接1个外界款式表。

拷贝编码
编码以下:

link:<mystyle.css>;rel=stylesheet;
//等同于于<link rel="stylesheet" href="css的url" type="text/css" >

HTTP报头中可使用好几个link,从而连接好几个款式表,且HTTP报头中的link比HTML文本文档中的link(head元素中)具备优先选择级。