最近讲课中,有些学员对调用样式表老是有含糊不清?大体说来有四种方式:

  1、外部文件引用方式;(推荐使用)

  2、使用@import引用外部CSS文件;

  3、内部文档头方式也叫内嵌法调用;

  4、直接插入式也叫行内样式。

  它们主要的差别在于它们规定的风格使用的范围不同:

  一、外部文件引用方式

  外部文件引用方式即将CSS写成一个文件,在HTML文档头通过文件引用来进行风

  格控制。也就是把写好的CSS属性的文件保存为文件扩展名为.CSS文件。

  CSS文件的引用是在HTML的标记之间写下列语句:

<link Rrel="stylesheet" href="mystyle.css">

如当前文件目录下有一CSS 文件名为mystyle.css,内容如下:

  p{
  font-family:'宋体';
    font-size:9pt;
    color:#000;
}
  h2{
font-family:'宋体';
   font-size:13pt;
   color:#fff;
  }
<link Rrel="stylesheet" href="mystyle.css">

当然,你可以复制这句,然后改下引用文件的路径及文件名就可以了。

  应用CSS文件的一个最大好处就是,你可以在每个HTML文件中引用这个文件,从而

  可使整个站点的HMTL文件在风格上保持一致,避免重复的CSS属性设置;另外,当你遇

  上改版或作某些重大调整要对风格进行修改时,可直接修改这个CSS文件,当然了,

  HTML文件一直引用最近更新的样式单,而不必每个每个HTML文件进行修改,如果在建

  站之初没有网站风格的统一规划并形成CSS文件,以后内容一多,想调整一下风格会累

  死你的。

二、使用@import引用外部CSS文件

  这种方式在文档头之间使用style标签引用外部css(不建议使用,引用没有先后顺序,容易出错)

   <style type="text/css">
  <!-- @import url(mystyle.css);/*这里是通过@import引用CSS的样式内容*/-->
  </Style>

  三、内部文档头方式

  这种方式与外部文件方式区别在于这种方式是将风格直接定义在文档头

  之间,而不是形成文件。这种风格定义产生作用的范围也只局限于

  本文件,其格式如下(套用上边的CSS)

<style type="text/css">
  <!--
  p{
      font-family:'宋体';
   font-size:9pt;
   color:#000     }
  h2{
     font-family:'宋体';
   font-size:13pt;
   color:#fff;
  }
  -->
  </style>

  这种方式的主要用处是,在一些方面统一风格的前提下,可针对具体页面进行具体调整。这两种方式并不相排斥,而是相互结合,比如在CSS文件中定义了P标志

  的字体大小font-size为10pt,而在内部文档中可定义P标志字体颜色font-color为Red;

  而在另一个HTML文件中定义颜色为Green,从这里,你也可能明白为什么风格样式单叫

  层叠式样单了。

  四、直接插入式

  直接插入式很简单,只是在每个HTML标记后书写CSS属性就可以了。这种方式很直

  接,如我们想规定一个Table标志中的字为红色,字体大小为10pt,则可书写如下:

<table style="color:red;font-size:10pt" />

   这种方式主要用于对具体的标记做具体的调整,其作用的范围只限于本标记。

综上所述,这几种方式各有用途,在统一整个站点风格上,用第一种方式在整个

页面风格统一上,用第三种方式在页内某个标记的具体微调上,第三种方式也有用

武之地,所以各有千秋吧!前三种的目的在于一是统一风格,二是减少繁琐的标记属性

设置,真是功不可没哟!

延伸了解:引用外部CSS的link和import方式的分析与比较

CSS样式表引用方式的更多相关文章

  1. css样式表的引入方式

    一般来说,css 有两种样式表的引入方式,在这里我记录一下,比较这两种引入方式的区别: <link rel="stylesheet" type="text/css& ...

  2. HTML基础(三)——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  3. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  4. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  5. 【2017-03-24】CSS样式表

    CSS样式表:层叠式样式表 一.样式表的分类 1.内联式 写在标记的属性位置,优先级最高,重用性最差. 格式: <div style="width:100px;height:100px ...

  6. CSS样式表的写作规范

    推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...

  7. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

  8. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  9. 当css样式表遇到层

    (附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...

随机推荐

  1. Rust 学习 0

    安装Rust 后,本地有文档: file:///usr/local/share/doc/rust/html/index.html file:///usr/local/share/doc/rust/ht ...

  2. MDAC 在WINDOWS XP SP3 不能安装 的解决方法

    MDAC 在WINDOWS XP SP3 不能安装 的解决方法 解决步骤如下: c:/windows/inf 下找出mdac.inf 然后点右键->安装.在弹出提示路径选取c:/windows/ ...

  3. Debian8 加载NTFS 磁盘出错 解决方法

    执行 ntfsfix  /dev/sdb2 // sd*  a代表第一块硬盘 b代表第2块硬盘 数字是分区号 执行后 就可以正常使用了.

  4. autolayout高度动态改变的一些体会

    autolayout这个东西就不在此说明了,网上已经有很多大神做了很详细的讲解,自己也看了不少好文章,在这里只是想记录一下自己初步的一些认识与体会,这个东西毕竟还是很强大,如果要用到更高级的用法还得在 ...

  5. Quartz2D 图像处理

    首先感谢一片枫叶总结出这么好的文章,文章出处:http://www.cnblogs.com/smileEvday/archive/2013/05/25/IOSImageEdit.html 本文将为大家 ...

  6. Objective-C 【关于导入类(@class 和 #import的区别)】

    之前我们分析过 #include 和 #import 的区别,#import不会引起交叉编译,#import 确定一个文件只能被导入一次,使在递归包含中不会出现问题. 那么 #import 和 @cl ...

  7. C# WinForm打开IE浏览器并访问网址

    C# WinForm 打开浏览器并访问网址代码: System.Diagnostics.Process.Start("iexplore.exe", "http://kel ...

  8. (转)使用Amoeba 实现MySQL DB 读写分离

    Amoeba(变形虫)项目是一个开源框架,于2008年开始发布一款 Amoeba for Mysql软件: 这个软件致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当SQ ...

  9. (转)持续化集成工具CruiseControl.NET

    持续化集成工具CC.NET[ 引言: 团队开发需要 进行集中的项目文件管理与有效的协调,我们采用源代码管理工具协助我们管理,卓有成效.限定重要文件的访问权限.使用悲观锁杜绝成员同时编辑同一份文件. 不 ...

  10. css笔记--web端小于1px设计的处理方法

    HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...