CSS入门基础之三种引用方式

2021-08-24 11:32:58 阅读：108 来源： 互联网

CSS的三种引用方式

在HTML中，引入CSS共有三种方式，分别是外部样式表，内部样式表，内联样式表。

1、外部样式表

外部样式表是最理想的CSS引用方式，在实际开发中，为了提高网站的性能和维护性，一般都是使用外部样式表。所谓的外部样式表，就是把CSS代码单独放在一个文件中，然后通过HTML文档中link标签，导入样式表。

语法：

<link href="文件路径" rel="stylesheet" type="text/css">

示例代码：

<html>
  <head>
    <title>外部样式表</title>
    <link href="1.css" rel="stylesheet" type="text/css>
  </head>
  <body>
    <div></div>
  </body>
</html>

link标签，是在head内部使用的，通过导入css文件，来达到代码分离的目的。

2、内部样式表

内部样式表，就是HTML代码和CSS代码在同一个文件中。css代码放在<style></style>标签内，并且把<stytle></style>放在<head>内部。

语法：

<style type="text/css">
......
</style>

示例代码：

<html>
  <head>
    <title>内部样式表</title>
    <stytle type="text/css">
      div
      {
        .......
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

对于内部样式表，css样式代码必须放在style标签内部，并且style放在head内部。

3、内联样式表

内联样式表，也是把HMTL和CSS代码放在一个文件中，但是不是放在<head>内部，而是通过<style>标签放置在HTML的各个元素标签内。

语法：

<div style="width:100px;height:100px;"></div>

示例代码：

<html>
  <head>
    <title>内联样式表</title>
  </head>
  <body>
    <p style="color:Red">CSS入门基础</p>
    <p style="color:blue">CSS入门基础</p>
    <p style="color:green">CSS入门基础</p>
  </body>
</html>

大家注意观察，内联样式表直接对所在标签起作用，如果需要标签实现效果，需要针对每个标签都写css代码，容易造成冗余，维护css代码时还需要找到标签，这对于维护大型网站来说，工作量大，还容易出错。

在HTML入门学习时，不建议大家使用Dreamweaver那种“点点点”的方式开发网页，该工具生成的网页代码均是使用的内联样式代码，后期维护起来非常麻烦，冗余较多，也不便于初学者理解。

在实际开发中，我们都会使用外部样式表，这样代码分离，需要修改样式时，只需要修改css样式代码文件，网页就会自动产生效果，很方便。但是分享学习过程中，我会使用内部样式表的方式，因为这样CSS代码和HTML代码在同一个文件中，方便修改和测试。

除了上面提到的三种引用方式，CSS还有一种@import方式，这种方式类似于外部样式表的调用，但是在实际开发中，极少用到@import方式，原因在于，@import方式先加载HTML后再加载CSS，link方式是先加载CSS后加载HTML，如果HTML先与CSS加载，网页的观感会非常差，影响用户体验，所以一般我们都是使用link方式。

了解前端培训开发技术知识，关注我，有更多精彩内容与您分享！

标签：入门,标签,代码,HTML,三种,样式表,css,CSS
来源： https://www.cnblogs.com/xiaobaizaixianzhong/p/15179525.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

CSS入门基础之三种引用方式