乐趣区

关于前端:web前端学习教程详解引入CSS的4种方式

jiezi

咱们在编写 HTML 文件的时候，为了使网页的内容和属性更加丰盛，难免会引入 CSS 来达到咱们的目标。CSS 是一种用来体现 HTML 文件款式的计算机语言，仅能够动态地润饰网页，还能够配合各种脚本语言动静地对网页各元素进行格式化。

引入 CSS 有 4 种形式，其中有 2 种形式是在 HTML 文件中间接增加 CSS 代码，另外 2 种是引入内部 CSS 文件。

上面咱们一起来学习一下引入 CSS 的 4 种形式，理解过的小伙伴也能够温故知新。

1. 内联形式

内联款式即只在某个元素内应用 style 属性，它只针对某个元素，而不会影响整个文件，所以能够管制某个 HTML 元素的外观体现，适宜用于代码调试，不倡议应用。

示例：

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

这通常是个很蹩脚的书写形式，它只能扭转以后标签的款式，如果想要多个 <div> 领有雷同的款式，你不得不反复地为每个 <div> 增加雷同的款式，如果想要批改一种款式，又不得不批改所有的 style 中的代码。很显然，内联形式引入 CSS 代码会导致 HTML 代码变得简短，且使得网页难以保护。

2. 嵌入形式

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

示例：

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

嵌入形式的 CSS 只对以后的网页无效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比拟集中，当咱们写模板网页时这通常比拟无利。因为查看模板代码的人能够高深莫测地查看 HTML 构造和 CSS 款式。因为嵌入的 CSS 只对以后页面无效，所以当多个页面须要引入雷同的 CSS 代码时，这样写会导致代码冗余，也不利于保护。链接形式链接形式指的是应用 HTML 头部的 <head> 标签

3. 引入内部的 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>

4. 引入链接的形式

链入内部样式表，就是把样式表保留为一个样式表文件，而后在页面中用 

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

引入内部 css 文件。

这种办法能够说是当初占统治位置的引入办法。如同 IE 与浏览器。这也是最能体现 CSS 特点的办法；最能体现 DIV+CSS 中的内容与显示拆散的思维，也最易改版保护，代码看起来也是最好看的一种。

它与导入式不同的是链接式应用 HTML 规定引入内部 CSS 文件，它在网页的 <head></head> 标签中应用 <link> 标记来引入内部样式表文件。（就是办法样子不同一个用 style，一个用 link）

以上就是 CSS 引入的 4 种形式，实际上，在书写 CSS 款式的时候，咱们大多数都是应用 link 标签去链接款式，这种形式应用的最多，是咱们的重点把握对象。

能源节点老杜讲的 css 教程，也有对引入链接形式从而引入 CSS 的重点解说，能够看视频重点学一下。

CSS 视频教程

https://www.bilibili.com/vide…

CSS 材料下载

http://www.bjpowernode.com/?s…

退出移动版