css如何在html中使用（html引入css的四种方法）

1. 行内式：直接写在标签内，通过标签属性style引入
  - 媒介：style属性<style type="text/css">选择器{}</style>
    1
    2
    <div style="css属性名:属性值；"></div>
    <img style="css属性名:属性值；"alt="">
css想要生效，html中必须有这个元素才可以
1. 内嵌式（内联式）:将css代码写在style元素内，通过css选择器选择html元素，将css样式添加个这个元素
  - 媒介：style标签+选择器
style这个元素一般放在head元素内
- style元素：盛装css样式
  1
  2
  3
  4
  5
  <style>
  div{height:100px;}
  </style>
  <div></div>
1. 外联式（外链式）：将css代码单独放置在一个css文件中，再通过link标签将这个css文件引入到html文件中
  - 媒介：link标签+选择器
    1
    <link rel="stylesheet" herf="css文件链接地址" type="text/css">
css这个文件中不能出现标签
1. 导入式：都是引入一个单独的css文件
  - 媒介：@import”css文件链接地址”;
    - 当有多个css文件的时候，可以使用导入式先导入到一个css文件中，再用外链式link外链进html文件
  - @import”css文件链接地址”;既不是html标签，也不是css属性，他是一条声明语句
  - 这条语句必须写在style元素内,或者css文件内
  - 这条语句必须在所在文件内的第一行

外链式和导入式的差别：

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