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 条评论
登录 后参与评论

相关文章

来自专栏数据小魔方

动态图表5|列表框(offset函数)

今天要跟大家分享的是动态图表5——列表框(offset函数)。 制作思路与前一篇中使用index函数制作思路基本一致,先用列表框制作菜单,然后使用offset函...

3225
来自专栏公有云大数据平台弹性MapReduce

yarn UI中appliaction展示个数分析

客户在使用我们的EMR产品时一天大概提交2000个appliaction,但是yarn的UI界面仅仅展示出了100多个历史application信息,影响了客户...

3785
来自专栏chafezhou

小说python的类型提示(type hints)

大家都知道python是一门动态类型的语言,但作者Guido van Rossum在2014年创建PEP-484添加了类型提示,在python3.5的版本中正式...

681
来自专栏Crossin的编程教室

【Python 第38课】 模块

如果说我比别人看得更远些,那是因为我站在了巨人的肩上。 -- 牛顿 python自带了功能丰富的标准库,另外还有数量庞大的各种第三方库。使用这些“巨人的”代码...

26810
来自专栏前端杂货铺

History API与浏览器历史堆栈管理

移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由,这种实现不存在...

3825
来自专栏知晓程序

【技术牛人分享】如何在微信小程序里实现跨页面通信?

933
来自专栏Python攻城狮

Python数据科学(四)- 数据收集系列1.数据型态2.结构化vs半结构化vs非结构化数据3.Python IO与档案处理

◆ 定性分析: 分析: _ 知几写了很多篇文章 ◆ 定量分析: 分析:_ 知几写了107篇文章。

712
来自专栏JetpropelledSnake

Django学习笔记之URL标签的使用

期初用django 开发应用的时候,完全是在urls.py 中硬编码配置地址,在views.py中HttpResponseRedirect()也是硬编码转向地址...

681
来自专栏自动化测试实战

《selenium2 python 自动化测试实战》(18)——webdriver错误截图

3526
来自专栏Python小屋

时间都去哪儿了之Python程序测试与优化

有时候我们需要知道自己的代码运行了多久,time模块的方法提供了这个功能,但是不很准确,例如下面的代码,当循环次数小的时候得到的结果为0,显然这是不可能的。 i...

2768

扫码关注云+社区