`

CSS内联还是外联?

阅读更多

现在是一个推崇结构,表现,行为想分离的时代,最大的好处就是维护起来比较简单,方便,代码重用。把CSS,JS写在HTML里,就像一个大杂烩,很难理解,可读性差,文件大,维护起来非常麻烦。

 

但是CSS到底是内联还是外联呢?我们只要分析它的特点就不难得出答案。

CSS内联:就是把CSS放在HTML Head里使用Style包围。<style type="text/css"></style>

CSS外联:就是把CSS放到一个单独的文件里,然后在HTML通过调用。<link rel="stylesheet" type="text/css" href="">。

 

我们知道HTTP请求是比较昂贵的,CSS内联的话肯定会更快,因为把CSS放到HTML文件里,这意味着减少了一次HTTP请求。而外联的话就是一次HTTP请求,但是可以缓存,当浏览器加载过这个文件时,第二次请求的时候是第缓存里读取的,所以第二次请求时是很快的,外联的CSS还可以重用代码。那到底是使用内联还是外联呢?这就要看需求,如果一个页面不需要缓存时,也就是这个页面不太访问,或者访问不多的时候,比如注册页面,一般情况下人家只会进入一次,不可能第次进入这个网站你都去注册,那就另当别论了,这个页面不需要缓存,把CSS放在Head里时可以缩短加载时间,提高用户体验。对于经常访问的页面,外联肯定是不二的选择。

在一些大的网站,如:Google,Yahoo也可以看到把CSS写在Head里。对于结构表现行为分离的原则,我们对于CSS入在Head里是可以接受的,只要不是写在元素上面。

0
2
分享到:
评论

相关推荐

    浅谈js和css内联外联注意事项

    本文将探讨js和css内联与外联时需要注意的事项。 首先,内联样式和脚本是指将js或css代码直接写在HTML元素的`style`属性或`&lt;script&gt;`标签中。这种方式的优点是代码直观,可以直接看到效果,但缺点也很明显:代码...

    高效、可维护、组件化的CSS

    在当今的Web开发中,编写高效、可维护且具备组件化的CSS对于前端开发人员来说是一项基础且至关重要的技能。...通过遵循以上建议,无论是新手还是追求优化性能的同学,都能够编写出更加高效且易于维护的CSS代码。

    实现css样式的方式

    CSS 样式可以分为内部样式表、内嵌样式和外联样式表三种方式。 内部样式表(Internal Style Sheet) 内部样式表是将 CSS 代码写在 `&lt;head&gt;` 标签中,使用 `&lt;style&gt;` 标签来定义样式表。这种方式只对当前网页有效。...

    豆瓣css规范

    无论是内联还是外联的CSS文件,都必须放在页面的`&lt;head&gt;`标签内。加载顺序依次为:全站级CSS、产品级CSS、页面级(外联)CSS、页面级(内联)CSS、内联CSS。 #### 结语 豆瓣CSS规范是一套综合考虑了兼容性、可维护...

    通过Dreamweaver.CS3学习HTML+DIV+CSS教学PPT第11章__网页样式表CSS

    网页样式表CSS,全称Cascading Style Sheets,是一种用于...无论是初学者还是经验丰富的开发者,理解和掌握CSS都是必要的技能。通过Dreamweaver CS3这样的工具,可以更高效地编写和管理CSS,实现专业级别的网页设计。

    HTML实训总结报告原创实训总结.doc

    * 实训中,学生遇到了JC语言学习和CSS内联、外联样式学习的困难,但是通过寻求同组人帮助和向老师寻求帮助,学生成功地解决了这些问题。 本实训总结报告旨在总结HTML实训的经验和知识,旨在帮助学生掌握HTML5语言的...

    css教程word版

    1. 外联样式(External Stylesheet):CSS规则放在`&lt;head&gt;`标签内的`&lt;style&gt;`标签中,这适用于整个文档的样式定义。例如: ```html div { width: 200; filter: blur(add=true, direction=135, strengh=20); }...

    html5+css代码.pdf

    - 外联式:通过`&lt;link&gt;`标签链接外部CSS文件,如`&lt;link href="css/css1.css" rel="stylesheet"&gt;`。 - Import方式:在CSS文件中使用`@import`导入其他CSS文件,如`@import url("css/css1.css");`。 2. 路径: - ...

    css样式表使用技巧

    最后,将定义好的CSS复制到新建的文本文件中,保存为.css扩展名,即完成了外联式CSS文件的创建。 3. **固定背景图像** 如果不想让背景图像随页面滚动,可以使用CSS的`background-attachment`属性设置为`fixed`。...

    HTML+CSS的入门知识点总结

    CSS可以通过三种方式引入到HTML文档中:行内样式、内联样式和外联样式。行内样式优先级最高,但它使页面变得混乱,不能同时控制多个标签。内联样式适合写小demo,但不适合写项目,不能同时控制多个页面。外联样式...

    CSS + DIV 源文件

    - **内联样式表**: 是将CSS样式写在文档头部的`&lt;style&gt;`标签内,仅应用于当前页面。 - **示例**: ```html &lt;style type="text/css"&gt; hr {color: sienna;} p {margin-left: 20px;} body {background-image: ...

    Dreamweaver可视化编辑与应用CSS样式PPT课件.pptx

    课程中提到了三种创建CSS样式的方法:外联式、内联式和内嵌式。外联式是通过`&lt;link&gt;`标签链接外部CSS文件,内联式是直接在HTML元素中使用`style`属性,内嵌式是在`&lt;head&gt;`标签内使用`&lt;style&gt;`标签定义样式。 CSS的...

    critical-css-inliner:使用Puppeteer和Critical-css-parser在HTML页面中内嵌关键CSS

    与其他流行图书馆的比较关键CSS内衬执行时间: 7.4 s 执行时间: 4.7 s 结果:正确结果:错误 内联: 15.8 KB(越少越好) 内联: 16.4 KB(越少越好) 自动提取: true 自动提取: true执行时间: 3.5 s 执行

    HTML5实训报告-原创实训总结.docx

    10. CSS内联样式和外联样式的代码书写:CSS内联样式和外联样式的代码书写非常重要,了解这些代码书写,可以帮助我们更好地掌握和应用HTML5语言。 11. JC语言的学习和理解:JC语言的学习和理解非常重要,了解JC语言...

    前端CSS规范整理.doc

    2. 文件引入:推荐使用外联方式引入CSS,将和标签置于中,避免直接在HTML中写内联样式。避免在CSS中使用@import,同时,CSS文件的嵌套深度控制在一层以内。 3. 文件命名:文件名由小写字母、数字和中划线组成,采用...

    通过DreamweaverCS学习HTMLDIVCSS网页样式表PPT学习教案.pptx

    - 外联样式表:通过`&lt;link&gt;`标签将外部CSS文件链接到HTML文档,使网页引用样式。 - 内嵌样式表:直接在HTML文档的`&lt;head&gt;`标签内使用`&lt;style&gt;`标签插入CSS样式。 - 导入样式表:使用`@import`指令在内嵌样式表中...

    借助css显示xml内容

    - 外联样式:将CSS代码放在一个单独的`.css`文件中,然后在XML文档的`&lt;xml-stylesheet&gt;`处理指令中引用该文件。 2. **选择器和属性** - XML元素选择器:使用元素名选择XML节点,如`xml元素 {样式属性}`。 - 属性...

Global site tag (gtag.js) - Google Analytics