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

8次阅读

共计 1489 个字符,预计需要花费 4 分钟才能阅读完成。

咱们在编写 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…

正文完
 0