三种引入方式

最新推荐文章于 2021-10-19 13:25:33 发布

honeyws

最新推荐文章于 2021-10-19 13:25:33 发布

阅读量1.3k

点赞数

分类专栏： Web前端基础文章标签：三种引入方式

本文链接：https://blog.csdn.net/weixin_44802155/article/details/102881895

版权

Web前端基础专栏收录该内容

17 篇文章 0 订阅

订阅专栏

外部引入方式
写法与内部样式的写法完全一样，只是外部引入方式是将CSS代码保存在扩展名为.CSS的样式表中，在HTML文件中引用扩展名为.CSS的样表符。引入的方式用链接式和导入式两种方式。
链接式
是将所有的样式放在一个或多个以.CSS问扩展名的外部样式表中，通过网页的标签中使用标记将外部样式表文件连接到HTML文档中。
语法如下

<link herf=”mystyle.css” rel=”stylesheet“ type=”text/css“>

语法中必须指定标记的三个属性，其中herf是定义链接外部样式表文件url，
可以是相对路径和绝对路径；rel是定义当前文档与被链接文档之间的关系，这里指定为stylesheet，表示被链接的文档是样式表文件；type是定义链接文档的类型，这里类型指定为text/css，表示链接的外部文件为CSS样式表。
这里面涉及三个属性，rel=“stylesheet“规定当前文档与被链接的文档之间的关系。
Type=“text/css“ 规定被链接文档的MIME类型。Herf=”mystyle.css”规定被链接文档的位置
css文件

p{  font-size: 18px;    color:yellow;  text-decoration:underline ;}

链接css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="123.css" rel="stylesheet" type="text/css">
    <title>链接式</title>
</head>
<body>
    <h3 align="center">链接式引入方法</h3>
    <p>通过link便签将扩展名为.css的外部样式表文件链接到HTML文档中</p>
</body>
</html>

导入式
导入式是将一个独立的.css文件导入到HTML文档中，其中在HTML文档标签中应用

<style type=”text/css”>
	@import yrl（css文件路径）；或@import “css文件路径“
/* 此处还可存放其他css样式*/
</style>

导入式会在整个网页加载完后再加载css文件，因此如果网页比较大则会出现先显.示无样式的页面，再出现网页的样式的情况。这是导入式固有的一个缺陷。
虽然导入式和链接式功能基本相同，但大多数网站都是采用链接式引入外部样式表，这是因为两者的加载时间和顺序不同。加载页面时，标签引用的CSS样式表将同时被加载，而@import引用的CSS样式表会等整个网页下载结束后再被加载。可能会显示无样式的页面，造成不好的用户体验。因此，天多数的网站采用链接式的引入方式。
链接式是使用频率最高、最实用的CSS样式表。它可以将HTML代码与CSS代码分离为两个或多个文件，实现类结构和表现的完全分离，是网页的前期制作和后期维护都变得十分方便。
三种方法对比
在实际开发中，为啦提高网站的性能和维护性，一般都是外部引用方式。
比如要给两个不同的标签添加相同的样式，首先查看内部引入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css引入方法</title>
    <style>
        /*这里CSS内部样式*/
  .elem{  color: deeppink;}
  <p class="elem">第一个标签</p>
<p class="elem">第二个标签</p>
<p class="elem">第三个标签</p>
</doby>
</html>

接下来查看行间引用式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css引入方法</title>
    <style>
        /*这里CSS内部样式*/
        #elem1{  color:red}
        #elem2{  color:turquoise}
        #elem3{  color:darkorchid}
   </style>
</head>
<body>
<p id="elem2">第一个标签</p>
<p id="elem1">第二个标签</p>
<p id="elem3">第三个标签</p> 
</body>
</html>

上面示例代码可以看出，使用行间引入方式，直接对每个标签应用样式有它的优点，但是这种引入方式需要逐个地对元素设置样式，而且软件更新时需要逐个地对标签进行样式调整，可维护性差，使用内部引入方式可以通过选择器来改变元素的样式，可以重复使用代码，这样做可以提升性能。如果修改样式，只需修改一次就可以对所有设置此样式的标签同时修改，可维护性好。
相比内部样式，外部样式有更好的提升性和维护性，这是因为可以在不同的页面引入同一个CSS样式文件，可以在多个页面之间复用CSS样式。实现结构和表现的完全分离，使得网页的前期开发和后期维护都变得十分方便。

honeyws

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
三种引入方式

外部引入方式写法与内部样式的写法完全一样，只是外部引入方式是将CSS代码保存在扩展名为.CSS的样式表中，在HTML文件中引用扩展名为.CSS的样表符。引入的方式用链接式和导入式两种方式。链接式是将所有的样式放在一个或多个以.CSS问扩展名的外部样式表中，通过网页的标签中使用标记将外部样式表文件连接到HTML文档中。语法如下<link herf=”mystyle.css” rel=...
复制链接

扫一扫

专栏目录