HTML5学堂-码匠 HTML5学堂

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

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属性会给服务器造成请求的压力

示例:

  1. <head>
  2. <title>HTML5学堂</title>
  3. <link rel="stylesheet" type="text/css"  href="css文件路径">
  4. </head>

2、头部书写:

在head部分加入 标签,CSS代码就写在标签内(style是表明引入文件类型的标签;type是表明文件类型;)

优势:

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

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

劣势:

不易改版与维护

代码较乱不易前后台沟通

欢迎沟通交流~HTML5学堂

示例:

  1. <head>
  2. <title>HTML5学堂</title>
  3. <style type="text/css">
  4. *{CSS样式}
  5. </style>
  6. </head>

3、在标签内直接写CSS:

直接把css标签写在页面标签里;

优势:

优先级最高

劣势:

冗余代码多,代码量大

不利于维护

示例:

  1. <p style="width:20px; height:10px;">HTML5学堂</p>

4、使用@import引入CSS

劣势:

在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程(也就是增加页面的总体加载时间)

在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载,这会阻碍页面的渲染,让人感到页面比较慢。

示例:

  1. @import url('b.css');

使用@import引入CSS—部分参考前端观察文章

相关文章推荐

link和@import的区别

CSS important

CSS文件中url的路径含义及使用

CSS选择器优先级

reset 样式重置

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端

iOS,APP,码集,案例交互,JavaScript学习,WEB前端,HTML5

iOS APP 码集

案例交互式学习JS