1.1 导入式

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

1
2
3
<style type="text/css" media="screen">   
@import url("CSS文件");
</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标签的下面