1,内联样式
内联样式是直接在html标签上定义该标签的css样式,如:
<div style="width:100pxheight:100px"></div>
2,内部样式
内部样式是写在html文件中,且包含在<style></style>代码块中,style写在head里面如:
<style>
div{width:100pxheight:1000px}
</style>
<div></div>
3,外部样式
外部样式是通过在html中引用外部css文件来控制样式,如:
html文件中写入引用语句:
<link href="css文件路径" rel="stylesheet" media="screen" />
我觉得可能加入第4种:
通过js动态加载。
目前有两种引用方式,一种是通过在head里面的link来引用,另外一种是直接通过import来引用,示例代码如下:
第一种:link引用
<link rel="stylesheet" href="/css/mycss.css" />第二种:@import引用
<style type="text/css">@import url(/css/mycss.css)
</style
link和import语法结构不同,前者<link>是html标签,只能放入html源代码中使用,后者可看作为css样式,作用是引入css样式功能。
import在html使用时候需要<style type="text/css">标签,同时可以直接“@import url(CSS文件路径地址)”放入css文件或css代码里引入其它css文件。
本质上两者使用选择区别不大,但为了软件中编辑布局网页html代码,一般使用link较多,也推荐使用link。