在HTML中引入css方式总共有三种：
- 行内样式
- 内接样式
- 外接样式
3.1 链接式
3.1 导入式
css介绍
现在的互联网前端分三层：
- HTML：超文本标记语言。从语义的角度描述页面结构。
- CSS：层叠样式表。从审美的角度负责页面样式。
- JS：JavaScript 。从交互的角度描述页面行为
CSS：Cascading Style Sheet，层叠样式表。CSS的作用就是给HTML页面标签添加各种样式，定义网页的显示效果。简单一句话：CSS将网页内容和显示样式进行分离，提高了显示功能
HTML的缺陷：
- 不能够适应多种设备
- 要求浏览器必须智能化足够庞大
- 数据和显示没有分开
- 功能不够强大
CSS 优点：
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 使开发效率提高了（耦合性降低，一个人负责写html，一个人负责写css）
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
行内样式:
主要是写在body内的写在行内的，直接在body内对你要操作的内容进行操作
<body><div> ???<p style="color:green"> ???????我是一个段落 ???</p></div></body>
嵌入式
在title标签后添加<style type="text/css"></style>
注意：需要将样式放入<head></head>中
<span style="background-color:rgb(0,0,0);"><</span><span style="color:#000000;">!DOCTYPE html> ?<html lang="en"> ?<head> ?????<meta charset="UTF-8"> ?????<title>css样式使用</title> ?????<span style="color:#FF0000;"><style type="text/css"> ?????????body{ ?????????????background-color: antiquewhite; ?????????} ?????????p{ ?????????????background-color: aqua; ?????????} ?????</style></span> ?</head> ?<body> ?<h1>CSS使用规则</h1> ?<p>CSS使用规则/p> ?</body></span> ?其实嵌入式就是内接式
内接样式：
可以写在body内也可以定义在head内的 的直接在body内对内容操作
<body> ??<style type="text/css"> ???????span{color:yellow} ???</style><span> ???<p>这是span的块</p></span></body>外接样式-链接式
创建css样式表如style.css，再在HTML中链接此style.css样式表。
<link rel="stylesheet" type="text/css" href="style.css">
就是你定义一个css文件写上你的要求，然后你再html文件中的head中吸入link 导入css 文件就可以了
HTML例子：
<!DOCTYPE html> ?<html lang="en"> ?<head> ?????<meta charset="UTF-8"> ?????<title>css样式使用</title> ?????<link rel="stylesheet" type="text/css" href="style.css"> ?/*导入style.css文件的设置*/ ???</head> ?<body> ?<h1>CSS使用规则</h1> ?<p>CSS使用规则/p> ?</body> ?</html> ?
CSS例子：
body{ ?????background-color: antiquewhite; ?????font-size: 17px; ?} ?导入式
创建css样式表如mystyle.css，再在HTML中链接此mystyle.css样式表。
<style type="text/css"> ?????????@import"mystyle.css" ???</style> ?
也几乎和link差不多的 就是把你的css中的内容给导入进来
CSS的引入方法
原文地址：https://www.cnblogs.com/askzyl/p/9074057.html