本文详细介绍了CSS的四种引入方式：行内式、内嵌式、链接式和导入式，并对比了它们各自的优缺点。行内式适用于简单的样式设置；内嵌式方便管理但不便于复用；链接式能够实现样式和内容分离，但会增加HTTP请求次数；导入式虽能保持样式表的模块化，但会导致页面加载初期无样式。
1.行内式
行内式通过直接设置元素的style属性来引入css
<div style="width: 100px; height: 100px;">行内式</div>优点：元素的样式简单明了
缺点：代码不易维护
2.内嵌式
通过在head标签中加入style标签来引入CSS
<head>
<style type="text/css">
/*样式*/
</style>
</head>缺点：不能被多个页面重复使用
3.链接式
通过link标签来引入CSS文件
<head>
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>优点：页面在加载元素的同时也会加载其样式
缺点：增加了http请求
4.导入式
通过在head标签中加入style标签及@import来引入CSS
<head>
<style type="text/css">
@import""
</style>
</head>缺点：导入式会在整个页面加载完毕后，再加载CSS文件，这样会导致页面在打开时，先显示的是无样式的页面，闪烁一下之后，页面才有了样式
结语：一般来说，做网站时把样式多写在多个样式表文件中，因此我们先用链接式引入一个总的CSS文件，然后在这个CSS文件中再使用导入式来引入其他的CSS文件。但如果通过JavaScrip来动态引入CSS文件则只能使用链接式
（完）
扫一扫
376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
