在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提供各种各样的样式。
语法格式： 选择器 {属性名N：属性值N；}
说 明：
1、 花括号“{}”和冒号“：”还有分号“;”都是英文下
2、 属性名和属性值直接必须有冒号“：”
3、 属性值后面必须写分号结果“;”
4、 “选择器” 选择不同的标签，添加不同的属性（点名/选择谁）
都是写在head中的style内的
行内样式:
主要是写在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中的内容给导入进来