引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。

这篇具有很好参考价值的文章主要介绍了引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引入Bootstrap的CSS样式后,标签、

标签等HTML自带的标签被覆写没有?答:覆写了。

为什么这么说?证据呢?
写一个实例,然后调试模式看一下不就得了。

先看没有引入引入Bootstrap的CSS样式情况。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用标题类</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
</head>
<body>
	<h1>这是一个未引入bootstrap的CSS样式的h1标题</h1>
</body>
</html>

我们用浏览器打开上面的代码,然后F12进入调试模式,发现h1的样式如下:
引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。,Bootstrap,css,html,bootstrap
可见,这个h1使用的是客户端的样式。

再看引入了Bootstrap的CSS样式的情况。

代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用标题类</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
	<h1>这是一个引入了Bootstrap的CSS样式的h1标题</h1>
</body>
</html>

我们再次用浏览器打开上面的代码,然后F12进入调试模式,发现h1的样式如下:
引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。,Bootstrap,css,html,bootstrap
我们再点击上面截图中的 _type.scss 文件,得到源文件如下:
引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。,Bootstrap,css,html,bootstrap
引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。,Bootstrap,css,html,bootstrap
可见,这个_type.scss 文件是来自于bootstrap的。

我们再用相同的内容,对比下两种样式,如下图所示:
引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。,Bootstrap,css,html,bootstrap
引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。,Bootstrap,css,html,bootstrap
很明显,二者的样式是不一样的。说明引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写了。

那么在引入Bootstrap的CSS样式后,有哪些HTML自带的标签被覆写了呢?
这就只有慢慢收集了…
目前知道的有<h>标签、<p>标签,以后发现新的再记录过来吧。
以后发现的:
表格相关标签进行了优了,如<table><tr><td>等。文章来源地址https://www.toymoban.com/news/detail-697981.html

到了这里,关于引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写没有?答:覆写了。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 08-HTML-样式和语意标签

    1、style 标签用于为 HTML 文档定义样式信息。type 属性是必需的,定义 style 元素的内容。唯一可能的值是 \\\"text/css\\\"。style 元素位于 head 部分中。  2、div 可定义文档中的分区或节(division/section)。div 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且

    2024年02月04日
    浏览(14)
  • css-选择器、常见样式、标签分类

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1] CSS 能够对网页中元素位

    2024年02月11日
    浏览(42)
  • 【CSS扩展】VUE如何使用或修改element plus中自带的CSS全局变量来定义样式

    目录 一、CSS声明全局变量 二、使用el plus 和 el ui的自带样式 1、element plus—— var.scss位置 2、element ui—— var.scss位置 三、修改el plus 和 el ui中的自定义样式变量(方法一致) 本萌新最近在写网页时使用到了element plus中自带的CSS全局样式定义,本文将从CSS声明全局变量的方法出

    2024年01月22日
    浏览(45)
  • Web大学生网页作业成品 bootstrap响应式网站开发 基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月08日
    浏览(46)
  • 1.1 css style 样式定义:行内 style 属性、单页 <style> 标签、多页 <style> 标签

    首先创建一个 staic 文件夹,用于存放图片、音视频、css 等文件夹资源: 把长宽等样式定义在某个标签的 style 属性中,仅对当前标签产生影响,如: img src=\\\"/images/mountain.jpg\\\" alt=\\\"\\\" style=\\\"width: 300px; height: 200px;\\\" style 里面不能省略掉像素单位 px 两种定义属性的方式: 不用 style:

    2024年02月06日
    浏览(39)
  • css定义超级链接a标签里面的title的样式

    效果: 代码: 总结:此css 使用于任何元素,不仅仅是a标签!

    2024年02月15日
    浏览(36)
  • HTML样式CSS、图像

    HTML样式-CSS: CSS (Cascading Style Sheets) 用于渲染HTML元素标签的样式。CSS可以通过以下方式添加到HTML中:1)、内联方式:在HTML元素中使用“style”属性;2)、内部样式表:在HTML文档头部head区域使用style元素来包含CSS;3)、外部引用:使用外部CSS文件。 、内联样式: p style=“co

    2024年02月06日
    浏览(60)
  • HTML&CSS(二)---HTML常见标签

             HTML标题标签用于定义文档中的标题和子标题。HTML提供了六个级别的标题,分别是 h1 到 h6 ,其中 h1 表示最高级别的标题, h6 表示最低级别的标题。这些标签通常用于创建内容结构,帮助搜索引擎和读者理解文档的重要性和层次结构。 下面是标题标签的示例: 在

    2024年04月16日
    浏览(27)
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-5 CSS3 动画

    上述代码中: 第10行代码定义animation属性实现动画效果; 第10~17行代码定义rotate动画让图片从0%到100%顺时针旋转360度; 第18~20行代码通过animation动画实现当鼠标指针悬停在图片上时让图片不停的旋转。 CSS3 动画 CSS3可以创建动画,它可以取代许多网页动画图像、Flash动画和Ja

    2024年02月02日
    浏览(30)
  • 响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例3-4 CSS 立方体

    上述代码中: 第8~17行代码定义了3D环境容器,设置transform-style:的值为preserve-3d(设置3D环境); 第13行代码设置perspective:的值为1000px(元素距视图的距离为1000px); 第11行代码设置position的值为relative(相对定位); 第16行代码的作用是设置3D容器的位移和旋转角度; 第23~28行代

    2024年02月01日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包