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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-12-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

如何快速修改网页上的文字?

22340
来自专栏ThoughtWorks

TW洞见〡现代Web页面开发流程

现代Web页面开发流程 通常来说,Web页面开发的流程大致是这样的:设计师(设计师不是美工,就像程序员不是码农一样)提供设计稿,通常是图片格式。然后前端的开发...

40760
来自专栏walterlv - 吕毅的博客

像黑客一样!Chrome 完全键盘操作指南(原生快捷键 + Vimium 插件)

发布于 2018-07-01 11:56 更新于 2018-07...

23020
来自专栏ThoughtWorks

前端不止:Web性能优化 - 关键渲染路径以及优化策略

我问你:“当你从搜索引擎的结果页面选择打开一条搜索结果时,你觉得多长时间之后,如果页面还处于白屏或者没有加载到关键信息,你会选择关掉这个窗口?”

14520
来自专栏程序员的知识天地

微信小程序的组件用法与传统HTML5标签的区别

小程序刚开放公测,互联网圈内开始了各种解读和猜测。其中有观点认为小程序和HTML5有着紧密关联,甚至小程序就是基于HTML5开发。

29520
来自专栏贺嘉的专栏

如何用Baas快速在腾讯云上开发小程序之系列4:实现客户侧商品列表、商品详情页程序

本文将分享如何在腾讯云上实现小程序的商品展示和数据库查询操作。通过实现商品列表、商品详情页程序,熟练掌握云端数据表查询操作,包括掌握小程序调试方法、掌握小程序操...

1.3K00
来自专栏前端儿

Web--CSS控制页面(link与import方式区别)

【1】         “Table”和“DIV”这两个网页元素诞生的目的不同,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构

16910
来自专栏编程微刊

三个Bootstrap免费字体和图标库

32140
来自专栏Youngxj

杨小杰工具箱网页源码

18540
来自专栏前端知识分享

第176天:页面优化

从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽...

14120

扫码关注云+社区

领取腾讯云代金券