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

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方式。

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

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值