CSS在实际应用中,一般有以下三种级联方式。
1. 外联式
外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式。在 HTML 中的外部级联采用 <link> 标记或者 @import 语句来引入。示例代码如下:
<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入
2. 内联式
门户网站的 CSS 代码通常采用嵌入式,即通常所说的内联方式 (Inline Style),其使用 <style> 标记将样式定义为内部块对象。示例代码如下:
<style type="text/css">
<!--
body{font-family:Arial,Helvetica,sans-serif;}
-->
</style>
内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
3. 嵌入式
最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。示例代码如下:
<div style="font-family:Arial,Helvetica,sans-serif;">芒果</div>
这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。
总体而言,外联和内联各有优点,可综合实际情况选择适合的级联方式。
总结一下:外联优点:css在同一个文件中,当页面需要修改的时候只需要修改一个文件即可,方便维护。
缺点:HTTP请求多,浏览器要加载完CSS才能渲染页面,因此影响页面的性能。
内置优点:内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
缺点:每次修改css的时候需要修改多个页面
Javascrip内联和外置的区别其实也差不多