芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
2

CSS 的外联,内联和嵌入

css
作者 芒果/分类 代码/发布于 2009-06-19 12:03

CSS 全称级联样式表 (Cascading Style Sheets),在实际应用中,一般有以下三种级联方式。

1. 外联式
外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式。在 HTML 中的外部级联采用 <link> 标记或者 @import 语句来引入。示例代码如下:

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

<link> 和 @import 的异同可参考此文:CSS 外部引用中 link 与 @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>

这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。

总体而言,外联和内联各有优点,可综合实际情况选择适合的级联方式。

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/css-outreach-inline-and-embedded/" title="CSS 的外联,内联和嵌入" rel="bookmark">CSS 的外联,内联和嵌入 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 2 条群众意见

  1. ken /2009-06-19 13:34

    @import url(“style.css”); //@import 导入,好像需要内嵌的。 回应

    #1
  2. bolo /2009-06-19 20:57

    临时建立样式的话就用嵌入。 回应

    #2

下面我简单说几句