首页 > 软件开发 > HTML >

html引用css的三种方法

来源:互联网 2023-03-16 19:16:55 65

在web编程中,html定义结构,css则定义表现。二者相互结合才能开发出漂亮好看的网页。77k办公区 - 实用经验教程分享!

在html中引用css通常有3中方法,它们不仅各有优点,并且还涉及到优先级的问题。本文就详细介绍如何在html中引用css。

77k办公区 - 实用经验教程分享!

77k办公区 - 实用经验教程分享!

工具/原料

  • 浏览器
  • 记事本等编辑器

方法/步骤

  • 1

    内嵌方式:在标签的style属性中设置CSS样式。例如:div style="color:red;font-size:14px">设置文字的颜色为红色,字体大小为14px/div>77k办公区 - 实用经验教程分享!

    这里css样式代码写在标签的style=""双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

  • 2

    内嵌式这种方法不建议使用,因为会让页面的标签很多,看起来很累赘,体现不了css的优势,当标签太多的时候,想比要改起来都无从下手。77k办公区 - 实用经验教程分享!

    一般只在不经常更改的地方可以用一用,但是还是不推荐。77k办公区 - 实用经验教程分享!

  • 3

    嵌入式方法:我们可以将页面中所有标签需要设置css属性统一写到style>中,并一般放在head>与/head>之间;77k办公区 - 实用经验教程分享!

    这种方法对于单一的网页是挺方便的,但是对于较多的页面的网站,如果对每一个页面都以内嵌的方式设置各自的样式,就会失去了css的优点了。77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

  • 3该信息未经许可获取自百度经验
  • 4

    使用link标签引用外部文件方式:就是将一个独立的css文件引入html文件中;例如:linkhref="style.css"rel="stylesheet"type="text/css">77k办公区 - 实用经验教程分享!

    这种方法适合用在一些较大的网站,只需几个语句就可以分别导入css文件了,并且css也很方便修改维护。比较推广使用这种方法把css引入html中。77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

  • 5

    值得一提的是,如果一个标签的css上面3中方法都使用了,那么最终以内嵌式的为准。这就是这三种方法的优先级。内嵌式->嵌入式->引用外部文件方法。77k办公区 - 实用经验教程分享!

    例如下面的最终结果:

    77k办公区 - 实用经验教程分享!

    77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

    html引用css的三种方法77k办公区 - 实用经验教程分享!

  • 注意事项

    • 推荐:引用文件,嵌入式,内嵌式
    • 优先级:内嵌式,嵌入式,引用文件

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!77k办公区 - 实用经验教程分享!


    标签: CSSHTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码