在HTML⽂档中嵌⼊CSS的三种常⽤⽅式
在HTML中常⽤以下3种⽅式定义CSS：Embedding（嵌⼊式）、Linking（引⽤式）、Inline（内联式）
⼀、嵌⼊式
使⽤HTML的style元素，在⽂档中定义CSS样式。
复制代码
代码如下:
<head>
引用外部样式表的格式是<style type="text/css">
h1{color:red}
p{color:blue}
</style>
<head>
⼆、内联式
每⼀个HTML元素都包含⼀个style属性，可以直接定义样式。该样式仅能⽤于该元素的内容，对于另⼀个同名的元素则不起作⽤。
复制代码
代码如下:
<p >内联样式</p>
三、外部引⽤式
外部引⽤指HTML⽂档本⾝不含有CSS样式，⽽是动态引⽤外部的CSS⽂件定义⽂档的表现形式。
1、使⽤样式表的处理指令语句
在HTML⽂档的开头部分写⼀个关于样式表的指令处理语句
复制代码
代码如下:
<?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">
<!--下⾯两⾏代码效果⼀样
@import "mystyle.css";
@import url("mystyle.css");
-->
</style>
</head>
任何@import规则必须出现在所有规则之前。参数是⼀个css⽂件的URL地址。在⼀个css⽂件中也可以⽤@import指令将另⼀个css⽂件导⼊。
3、使⽤link元素
复制代码
代码如下:
<head>
<link rel="stylesheet" href="css的url" type="text/css" >
</head>
这也是最常⽤的⽅式。
4、使⽤HTTP消息报头链接到样式表
可以使⽤HTTP消息报头的link字段链接⼀个外部样式表。
复制代码
代码如下:
link:<mystyle.css>;rel=stylesheet;
//等同于<link rel="stylesheet" href="css的url" type="text/css" >
HTTP报头中可以使⽤多个link，从⽽链接多个样式表，且HTTP报头中的link⽐HTML⽂档中的link（head元素中）具有优先级。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。