HTML中引入CSS的方式

引入CSS的方式有四种。其中有两种方式是在HTML文件中直接添加CSS代码，另外两种是引入外部CSS文件。

内联方式

内联方式指的是直接在HTML标签中的style属性中添加CSS。

实例：

<div style="background:red"></div>

这通常是一个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个<div>拥有相同的样式,你不得不重复地为每个<div>添加相同的样式,如果想要修改一种样式,又不得不修改所有的style中的代码。很显然，内联方式引入CSS代码会导致HTML代码变得冗长，且使得网页难以维护。

嵌入方式

嵌入方式指的是在HTML头部中的<style>标签下书写CSS代码。

实例：

<head><style>.content{background: red;}</style>
</head>

嵌入方式的CSS只对当前的网页有效。因为CSS代码是在HTML文件中，所以会使得代码比较集中，当我们写模板页面时这通常比较有利，因为查看模板代码的嗯可以一目了然地查看HTML结构和CSS样式。因为嵌入的CSS只对当前页面有效，所以当多个页面需要引入相同的CSS代码时，这样写会导致代码冗余，也不利于维护。

链接方式

链接方式指的是使用HTML头部的<head>标签引入外部的CSS文件。

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

这是最常见的也是最推荐的引入CSS的方式。使用这种方式，所有的CSS代码只存在于单独的CSS文件中，所以具有良好的可维护性。并且所有的CSS代码只存在于CSS文件中，CSS文件会在第一次加载时引入，以后切换页面时只需加载HTML文件即可。

导入方式

导入方式指的是使用CSS规则引入外部CSS文件。

实例：

<style>@import url(style.css);
</style>

比较链接方式和导入方式

链接方式(下面用link代替)和导入方式(下面用@import代替)都是引入外部的CSS文件的方式,下面我们来比较这两种方式,并且说明为什么不使用@import。

link属于HTML，通过<link>标签中的href属性来引入外部文件,而@import属于CSS,所以导入语句应写在CSS中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;

@import是CSS2.1才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;

当HTML文件被加载时,link引用的文件会同时被加载,而@import引用的文件则会等页面全部下载完毕再被加载;

小结:我们应尽量使用<link>标签导入外部CSS文件,避免或者少用其他三种方式。

HTML中引入CSS的方式相关推荐

h5引用项目里css_HTML中引入CSS 的方式
有 4 种方式可以在 HTML 中引入 CSS.其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码,另外两种是引入外部 CSS 文件.下面我们就来看看这些方式和它们的优缺点. 内联方式 ...
html引入css方式,HTML中引入CSS的方式
一.认识CSS CSS:层叠样式表(Cascading Style Sheets) 样式表:如果把HTML比作人,那么样式表就是衣帽服饰,就是用来打扮HTML外观的(俗话说人靠衣服,网页靠CSS,才能 ...
CSS基础（三）引入CSS的方式
在html文件中引入CSS有三种方式: 内联样式嵌入样式外部样式 1.内联样式也叫行内样式,顾名思义,就是在写html元素的那个行中直接引入CSS样式. 这种引入方式的优先级较高(对同一元素同时 ...
在HTML中加入CSS有三种方式,html引入css的几种方式（复习笔记）
一.html引入css的方式 1.内联样式在html标签内的style属性中设定CSS样式,例如: 你好注:在内联样式里无法写hover样式,并且这种方式不推荐使用,因为它只能改变当前标签样式,多 ...
在html中引入CSS的方法
在html中,引入css的方法主要有行内式.内嵌式.导入式和链接式4种 1.行内式即在标记的style属性中设定css样式,这种方式本质上没体现出css的优势,因此不推荐使用. 2.嵌入式 ...
【转】在html中引入CSS的方法
在html中,引入css的方法主要有行内式.内嵌式.导入式和链接式4种 1.行内式即在标记的style属性中设定css样式,这种方式本质上没体现出css的优势,因此不推荐使用. 2.嵌入式在对页面 ...
在html中引入css内部样式表使用,CSS样式学习笔记（三）html文件引入CSS的方法（2）...
一.CSS样式规则 CSS样式规则二.html文件中引入CSS样式的方法有以下三种(行内样式,内部样式表,外部样式表): 2.1 行内样式( 使用style属性引入CSS样式) 实现方式:CSS样式 ...
CSS基础(part1)--引入CSS的方式
学习笔记,仅供参考,有错必纠文章目录 CSS CSS的定义引入CSS的方式行内样式嵌入样式外联CSS样式导入样式 CSS CSS的定义什么是CSS? CSS 指层叠样式表 (Cascad ...
在HTML中引入CSS
在html中,引入css的方法主要有行内式.内嵌式.导入式和链接式4种 1.行内式即在标记的style属性中设定css样式,这种方式本质上没体现出css的优势,因此不推荐使用. 2.嵌入式 ...

HTML中引入CSS的方式

HTML中引入CSS的方式相关推荐

最新文章

热门文章