您当前位于：HTML+CSS ——> CSS引入方式 | 三种基本的引入方式以及区别

上一篇：CSS选择器以及选择器优先级下一篇：CSS样式 | HTML标签的默认样式

CSS引入方式 | 三种基本的引入方式以及区别

2015/05/27 21:13:50 | 作者：HTML5学堂（码匠） | 分类：HTML+CSS | 关键词：CSS,样式,引入方式

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是表明文件类型；）

优势：

速度快，没有服务器请求压力

相对于外部引入单页代码量少

劣势：

不易改版与维护

代码较乱不易前后台沟通

欢迎沟通交流~HTML5学堂

示例：

<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—部分参考前端观察文章

极客编程技术分享

CSS引入方式 | 三种基本的引入方式以及区别

CSS引入方式

1、外部引入：

优势：

劣势：

示例：

2、头部书写：

优势：

劣势：

示例：

3、在标签内直接写CSS:

优势：

劣势：

示例：

4、使用@import引入CSS

劣势：

示例：

相关文章推荐

HTML5学堂

原创视频课程

小程序-决胜前端

HTML5布局之路