（1）链接式  ： 在网页的<head></head>标签对中使用<link>标记来引入外部样式表文件，使用html规则引入外部css  (用得比较多) :

　　　　　　　　　　<link href="./mystyle.css" rel="stylesheet" type="text/css"/>

（2）导入式 ： 将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

<style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style>

比较：link引用和import引用区别是：link是html加载前就引用，而import是html加载后才引用。举例，采用impor引用，会先显示无样式的页面，然后再把样式放进去。如果用JavaScript动态引用CSS，得使用link引用方式才可实现。

（3）内联css文件，直接在header 里面写css，如：

<style type="text/css">
div{margin: 0;padding: 0;border:1px red solid;}
</style>

这种方法的使用情况要少的多，最长见得就是访问量大的门户网站。或者访问量较大的企业网站的首页。与第一种方法比起来，优点突出，弊端也明显。优点：速度 快，所有的CSS控制都是针对本页面标签的，没有多余的ＣＳＳ命令；再者不用外链ＣＳＳ文件。直接在ＨＴＭＬ文档中读取样式。缺点就是改版麻烦些，单个页 面显得臃肿，ＣＳＳ不能被其他ＨＴＭＬ引用造成代码量相对较多，维护也麻烦些。但是采用这种方法的公司大多有钱，对他们来说用户量是关键，他们不缺人进 行复杂的维护工作。

（4） 直接在标签里面写样式

<div style="border:1px red solid;">测试信息</div>

不经常改的地方 。可以一用，，但是 还是 谨慎使用，很不符合大众。

CSS 文件的4种引入方式的更多相关文章

  1. CSS文件的三种引入方式

    CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...

  2. CSS简单的四种引入方式

    CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...

  3. CSS的4种引入方式及优先级

    第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...

  4. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  5. html(常用标签,标签分类)，页面模板， CSS(css的三种引入方式)，三种引入方式优先级

    HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...

  6. CSS【03】：CSS 基础选择器与三种引入方式

    基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...

  7. 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作

    一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...

  8. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  9. 前端 CSS 三种引入方式

    CSS三种引入方式 行内样式 内接样式 外部样式 链接式 导入式 行内样式 就是在标签加上style属性设置样式 <!DOCTYPE html> <html lang="e ...

随机推荐

  1. JDBC 数据库连接池

    http://www.cnblogs.com/lihuiyy/archive/2012/02/14/2351768.html JDBC 数据库连接池 小结   当对数据库的访问不是很频繁时,可以在每次 ...

  2. Apache 隐藏入口文件以及防盗链.htaccess 文件

    Apache 隐藏入口文件以及防盗链.htaccess 文件 RewriteEngine on # 隐藏入口文件 RewriteCond %{REQUEST_FILENAME} !-d Rewrite ...

  3. mysql安装使用----1 安装和启动

    1 安装 Fedora16/17 Mysql 安装及配置 1.安装 Mysql Server # yum install mysql mysql-server 2.开启 MySQL server 及开 ...

  4. mousewheel,DOMMouseScroll判断滚轮滚动方向

    firefox使用DOMMouseScroll,其他浏览器使用mousewheel 首先绑定一个滚动事件 //firefox使用DOMMouseScroll,其他浏览器使用mousewheel$(do ...

  5. Animation动画

    Animation:  1,AlphaAnimation, 透明度动画, 2, RotateAnimation, 旋转动画, 3,ScaleAnimation, 缩放动画 4,TranslateAni ...

  6. Sencha Extjs4.2 皮肤制作

    1                 UI组件基础 学习ExtJs就是学习组件的使用.ExtJs4对框架进行了重构,其中最重要的就是形成了一个结构及层次分明的组件体系,由这些组件形成了Ext的控件. E ...

  7. Nginx安装及配置虚拟主机

    nginx安装部分 依赖环境 yum -y install gcc zlib openssl-devel zlib-devel 1. 下载好下面两个包:nginx-1.8.1.tar.gz pcre- ...

  8. (简单) POJ 2492 A Bug's Life，二分染色。

    Description Background Professor Hopper is researching the sexual behavior of a rare species of bugs ...

  9. (简单) POJ 3074 Sudoku, DLX+精确覆盖。

    Description In the game of Sudoku, you are given a large 9 × 9 grid divided into smaller 3 × 3 subgr ...

  10. POJ3169差分约束系统

    题意:有n头牛,编号为1到n,对于关系好的ml头牛,al和bl之间的距离不大于dl,关系差的md头牛,ad和bd之间的距离不大于dd,求第1头牛和第n头牛之间的距离 分析:这是一道差分约束系统的题目, ...