css样式的引入方式总汇
首选来介绍一下什么是css?(英文全称：Cascading Style Sheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言,其实就是一种层叠样式表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
就像造房子一样，如果html是基地的话，那么CSS就是装修，只有装修的房子才可以住，自然至于那些灯光之类的是JS了，这是简单的比例，但也说明了css的重要性。网页的核心就是内容与样式的分离，其中CSS就是分离的一种，那么如果分离了，该如何引用呢?一些网站中很多文件，只有相关的引用才可以实现，其中有四种方式，内链样式，嵌入式样式，外部样式，导入样式，下面为大家介绍一下：
1：内联样式(行间样式)：在标签的style属性添加样式：
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行内样式</title>
</head>
<body>
<!--使用行内样式引入CSS-->
<h1 style="color:red;">惊风随笔</h1>
<p style="color:red;font-size:30px;">惊风随笔</p>
</body>
</html>2、嵌入式样式表(内部样式表)：在style标签内添加(加在head标签内部)
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>我是DIV</div>
</body>
</html>3.外部样式表：将css样式编写在扩展名为.css的文件中，再导入样式，导入在(head标签内部)
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表</title>
<!--链接式:推荐使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</html>4、@import导入其他css文件。就相当于原来的css文件中包含被导入的css文件中的样式。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>导入样式表</title>
<!--导入式-不推荐使用-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</html>不过根据目前网站的做做法，要做到内容与样式的分离，一般都是使用第三种的做法，也就是使用外部式表。这是通用的方式了，第四种一般很少用，因为需要进一步的加载，不利于后期seo的优化。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
