大众计算机学习网欢迎诸位!收藏本站注 册登 陆
常用教程:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 教程 > 文章页

CSS联样式表之内联式、外联式和嵌入式

Admin | 2018-5-16 15:20:59 | ReadNums | 657 | 标签 网页制作 | 打印本页
     

  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>

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

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

问题未解决:在线咨询我要在线咨询问题

网友评论

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日