1.1 导入式

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。

  1. <style type="text/css" media="screen">   
  2.     @import url("CSS文件");   
  3. </style>


1.2 外链式

引入一个外部的css样式表
语言:link标签 href=”css样式路径名称” 可以放在head标签或者body标签里面

  1. <link rel="stylesheet" type="text/css" href="index.css">

1.3 外链式和导入式的区别

  • link和@import虽然都是引入外部的css文件，但是他们是有天差地别的区别的
  • link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中。
  • 他们的加载顺序也是有区别的，当一个页面被加载的时间，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载。
  • 当使用JavaScript控制DOM去改变css样式的时间，只能使用link标签，因为import是不能被DOM控制的

1.4 行内式

通过style这个标签属性，将css键值对直接写入标签内

  1. <p style="width:100px;height:100px;background-color:red;"</p>

1.5 内嵌式

可以放在head或者body里 建议放在head标签里面title标签的下面