@import
引用CSS资源有两种方式,一种是link 一种是@import
对于Link 但凡用过css的人应该都很了解了,今天说下css另外一种引用方式@import,@import可以在css文件中引入其他的css文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/css.css"/> </head> <body> <form class="form-horizontal"> <h2 class="title">hello</h2> <div class='form-group'> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> </form> </body> </html>
@import url("https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"); h2{ color: red; }
可以看出css只写了h2的样式,但是我们在css中又引入了bootstrap的css样式,于是我们就可以使用boostrap了。
最后总结:不要过多的使用@import 加载速度跟Link比不是一个等级的。