引用CSS样式有四种方法,它们包含了：文档内部样式的引用、文档外部样式表的引用。
1.LINK 元素
LINK元素在HTML和XHTML中创建，用来引用外部样式表到当前文档中
通用的语法
<link rel="..." type="text/css" href="..." media="...">
属性
rel="..."
此属性描述当前文档与链接文件的关系。对于外部样式表，有两种可能的值：stylesheet（样式表）和alternate stylesheet(备用样式表)。rel的stylesheet值定义该文档将使用链接文档的样式。alternate stylesheet值指的是文档在没有默认渲染的情况下使用的样式表，在理论上，它可以由用户选择是否使用，从而改变文档的样式。浏览器必须提供一种机制，以便该这样做的工作，但是，不幸的是大多数浏览器不提供这样的机制。此属性是必需的。
href="..."
此属性的值是外部样式表的链接。它的值可以使用绝对URL（absolute URL）或者相对URL（relative URL)。此属性是必需的。
type="text/css"
此属性用来声明链接文档的数据类型。当链接的是一个CSS样式表时，只允许它的值为text/css。其他的样式表语言需要写不同的值（例如，text/xsl）。此属性是必需的。
media="..."
使用这个属性，可以声明一个样式表只适用于某些设备。默认值是all(所有),这意味着样式文档将被用于在所有设备中。CSS认可的值有如下：all(所有设备)、screen（计算机屏幕）、print（打印预览模式/打印页面）、projection（投影）、aural（音响）、braille（盲人点字法反馈设备）、embossed（压花）、handheld（手持终端小屏幕、有限带宽），tv（电视机类型设备低分辨率、有限的滚屏能力）。以上所有值都可以在media属性中使用，如果同时使用多个值可以使用逗号分隔的样式将它们格式化。 此属性是可选的。
注意：
在该方法中，在自身的文档中引入外部样式表。这些样式表的文件扩展名（也称为文件的后缀名，是操作系统用来标志文件类型的一种机制）通常是css，如main-style.css。
link元素必须放在HTML和XHTML的head元素中，但基于XML的标记语言，可能有其他的要求。
案例
<link rel="stylesheet" type="text/css" href="http://www.my.site/styles/basic.css" >
<link rel="stylesheet" type="text/css" href="article.css" media="screen,projiction">
<link rel="stylesheet" type="text/css" href="printout.css" media="print">
浏览器支持
所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。
提示：在全屏模式中，Opera 也支持 "projection" 属性值。
2.STYLE 元素
STYLE元素可以在HTML和XHTML中创建一个嵌入式样式表的容器。
通用的语法
<style type="text/css" media="...">
属性
type="text/css"
此属性与链接元素上的属性相同操作。此属性是必需的。
media="..."
此属性与链接元素上的属性相同操作。这属性是可选的。
注意
styel必须放在HTML和XHTML的head元素中。
案例
<style>
h1{color: purple; border-bottom: 1px solid maroon;}
h2{color: blue; background: cyan;}
</style>
<style type="text/css" media="all">
pre,code,tt{font-family: monospace; color:#333;}
pre{margin-left:3em;}
</style>
3.STYLE 属性
HTML和XHTML 1.1版本下，任何元素都可以采取style属性。
通用的语法
<elem style="...styles...">
注意
此属性的值是样式声明的任意组合。因为这种方法是通过文档的内部放置的元素信息来将样式和元素紧密的结合在一起。当有更好的解决方案（例如：嵌入式或外部样式表。）的时候，不建议使用style样式属性。
案例
<p style="color: red;">这段文字将是红色的。</p>
<h1 style="font-family: sana-serif; color:magenta; padding: 0.5em; border-bottom:2px solid green; background: cyan;">这个h1标签会给你造成视觉上的震撼。</h1>
[email protected] 规则
@import 规则类似链接元素导入一个外部样式表。详细信息以后会介绍。
原文地址：https://www.cnblogs.com/qingtianmingyue/p/8982811.html