首页 > 软件开发 > HTML >

html中引入css样式的方式

来源:互联网 2023-03-16 19:10:56 150

html引入css样式可以有更好显示效果。下面是html中引入css样式的方式的简单案例。C0f办公区 - 实用经验教程分享!

html中引入css样式的方式C0f办公区 - 实用经验教程分享!

方法/步骤

  • 1

    首先的话是——行内引入:C0f办公区 - 实用经验教程分享!

    在一个标签中,通过style属性来引入css样式,语法:C0f办公区 - 实用经验教程分享!

    div style="font-size:50px;color:blue;">樱木花道说他是个天才!/div>C0f办公区 - 实用经验教程分享!

    具体如下图。C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

  • 2

    可以通过浏览器来查看上面代码的效果,可以发现style属性值发生了作用,改变了字体大小和颜色。C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

  • 3

    第二种方式:内部引入——可以在head头部通过style标签来引入css样式。C0f办公区 - 实用经验教程分享!

    语法:C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

  • 4

    通过浏览器可以查看上面代码的效果图如下,内部引入css已经生效。C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

  • 5

    外部引入css样式一:在一个外部css文件中编写css代码。C0f办公区 - 实用经验教程分享!

    然后能过 link 引入到html中。C0f办公区 - 实用经验教程分享!

    语法:C0f办公区 - 实用经验教程分享!

    link rel="stylesheet" type="text/css" href="../css/style.css" />C0f办公区 - 实用经验教程分享!

    其中href是相对路径。C0f办公区 - 实用经验教程分享!

    具体的可以通过观看下图,提高理解。C0f办公区 - 实用经验教程分享!

    20如何理解和使用html中img标签src的相对路径?C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

  • 6

    外部引入css可以让html中的代码看起来更简洁。而且以后如果修改html的显示效果,可以只修改css样式文件。C0f办公区 - 实用经验教程分享!

    上面的代码效果如下图。C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

  • 6本页面未经许可获取自百度经验
  • 7

    其实还有一种引入方式,既使用到了内部style>标签,又引入了外部的css样式。C0f办公区 - 实用经验教程分享!

    具体如下图,它的效果和上图一样。不过这种使用较少。C0f办公区 - 实用经验教程分享!

    html中引入css样式的方式C0f办公区 - 实用经验教程分享!

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


    标签: CSSHTML

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