CSS引入方式
HTML5学堂：CSS引入方式存在三种，分别为标签内联书写、页面头部书写、外部引入，那么这三者有何区别？本文给大家讲解了从不同的角度分析他们的优势与劣势。
1、外部引入：
在HTML的head部分<link rel="stylesheet" type="text/css" href="css文件路径">，引入外部的CSS文件;
优势：
一个CSS文件可控制多个页面
易改版、便于维护
减少代码量、代码简洁规范易于分工协作
有效利用缓存机制
劣势：
相对于单页有垃圾代码
外部引入中的href属性会给服务器造成请求的压力
示例：
<head>
<title>HTML5学堂</title>
<link rel="stylesheet" type="text/css" href="css文件路径">
</head>2、头部书写：
在head部分加入 标签，CSS代码就写在标签内（style是表明引入文件类型的标签；type是表明文件类型；）
优势：
速度快，没有服务器请求压力
相对于外部引入单页代码量少
劣势：
不易改版与维护
代码较乱不易前后台沟通
示例：
<head>
<title>HTML5学堂</title>
<style type="text/css">
*{CSS样式}
</style>
</head>3、在标签内直接写CSS:
直接把css标签写在页面标签里;
优势：
优先级最高
劣势：
冗余代码多，代码量大
不利于维护
示例：
<p style="width:20px; height:10px;">HTML5学堂</p>4、使用@import引入CSS
劣势：
在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）
在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。
示例：
@import url('b.css');使用@import引入CSS—部分参考前端观察文章
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2015-12-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录