CSS语法：
选择器{
声明 ;
声明 ；
}
声明 => 属性名 : 属性值
可以放一条或多条声明，而且每条声明用分号隔开，最后一条声明后面的分号可以省略。
CSS引入方式
CSS引入方式有四种：行内式、内嵌式、外链式、导入式。
CSS引入方式 — 行内式
通过style这个标签属性，将css键值对直接写入标签内。
<div style="100px;height:100px;background-color:red;color:#000">css引入方式之行内式</div>
语法：写在开始标签里面 打一个空格隔开 style="声明 ; 声明 ; ......"
CSS引入方式 — 内嵌式（嵌入式）
使用style标签将css属性名和属性值引入到html页面中，通常style标签放置在head标签中。
为什么css样式要放置在head标签中呢？因为代码从上到下执行，如果先加载结构，那么用户看到的就将是干巴巴的内容，而没有通过美化；而先加载样式后加载结构，就相当于孩子出生就是穿着衣服的。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ background-color: red;/*背景颜色*/ color: #000;/*字体颜色 黑色 black #000 rgb(0,0,0)*/ } </style> </head>
语法：<style type="text/css">
选择器{
声明 ;
声明 ;
......
}
</style>
内嵌式可以放在head或者body里，建议放在head标签里面title标签的下面。
CSS引入方式 — 外链式（外联式）
通过link标签将独立的css文件引入到html文件中。
<!-- rel="stylesheet"描述了当前页面与href所指定文档的关系，即说明的是，href连接的文档是一个新式表。 type="text/css"是指定MIME类型，也就是css文档。 href="css/index.css"规定被链接文档的位置。 --> <link rel="stylesheet" type="text/css" href="css/index.css">
语法：link标签 href="css样式路径名称" 可以放在head标签或者body标签里面。引入一个外部的css样式表。
CSS引入方式 — 导入式
通过@import ‘url' 或者 @import url('url') 引入一个独立的css文件
/* index.html文件 */ <style> @import 'css/index.css'; @import url(css/index1.css); </style>
/* index.css文件 */
@import "index1.css";
div.content{
background-color: yellow;/*背景颜色*/
color: #000;/*字体颜色 黑色 black #000 rgb(0,0,0)*/
}
语法：导入式要依赖css样式文件，所以它要放在style标签或者css样式表中。
@import "css样式路径"
如果style标签里面既有内嵌的样式，又有导入的样式，导入式要放在内嵌式的上面，放在下面会报错，导致导入式的样式直接失效。
外链式和导入式的区别（面试题）
link和@import虽然都是引入外部的css文件，但是存在着很大的区别：
1、 link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中。
2、加载顺序不同。当一个页面被加载的时候，link引入的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载。
3、当使用JavaScript控制DOM去改变css样式的时候，只能使用link标签，因为@import不能被DOM控制的。