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

news/2024/10/18 18:23:44/

引入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的样式如下:
在这里插入图片描述
可见,这个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的样式如下:
在这里插入图片描述
我们再点击上面截图中的 _type.scss 文件,得到源文件如下:
在这里插入图片描述
在这里插入图片描述
可见,这个_type.scss 文件是来自于bootstrap的。

我们再用相同的内容,对比下两种样式,如下图所示:
在这里插入图片描述
在这里插入图片描述
很明显,二者的样式是不一样的。说明引入Bootstrap的CSS样式后,<h>标签、<p>标签等HTML自带的标签被覆写了。

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


http://www.ppmy.cn/news/1103738.html

相关文章

详解 Cent OS JDK 8.0 安装配置

环境配置 云服务器云耀云服务器L操作系统CentOS 7.9 64bit | 公共镜像JDK版本64 bit JDK 1.8 下载地址 JDK官网下载地址Java Downloads | Oraclehttps://www.oracle.com/java/technologies/downloads/#java8百度网盘 ARM64 链接&#xff1a;https://pan.baidu.com/s/1wQ1mp…

ICCV 2023 LLIE,MEC,MEF相关论文列表

ICCV 2023&#xff0c;实际paper list还没有开源出来&#xff0c;只是从会议的网站上看得到标题&#xff0c;用这个标题去搜&#xff0c;如果作者有放预印版在arxiv&#xff0c;就能搜得到&#xff08;半数是有的&#xff09; 直接领域 Iterative Prompt Learning for Unsupe…

自学Python02-学会Python中的if语句

亲爱的同学们&#xff0c;今天我们将学习 Python 中的一个非常重要的语句&#xff0c;那就是 if 语句。if 语句可以帮助我们判断一个条件是否成立&#xff0c;如果条件成立&#xff0c;它将执行相应的代码块。现在&#xff0c;让我们一起来学习如何使用 if 语句吧&#xff01; …

L3 Hive操作

示例&#xff1a; 1.建表 create table t_dml (detail_id bigint,sale_date date,province string,city string,product_id bigintcnt double,amt double, )row format delimited fields terminated by ,; //列分隔符create table t_product(product_id bigint,product_name …

探索GreatADM:如何快速定义监控

引文 在数据库运维过程中&#xff0c;所使用的运维管理平台是否存在这样的问题&#xff1a; 1、默认监控粒度不够,业务需要更细颗粒度的监控数据。2、平台默认的监控命令不适合,需要调整阈值量身定制监控策略。3、不同类型的实例或组件需要有不同的监控重点,但管理平台监控固…

你不能不了解的Java23中设计模式之【抽象工厂模式】

目录 一.介绍抽象工厂模式 1.概念 2.结构&#xff1a; 抽象工厂模式包含以下角色&#xff1a; 3.工作原理&#xff1a; 4.应用场景&#xff1a; 抽象工厂模式适用于以下情况&#xff1a; 5.使用方法&#xff1a; 二.具体实例通过抽象工厂模式实现计算器 1.创建Maven工程…

无涯教程-JavaScript - DDB函数

描述 DDB函数使用双倍余额递减法或您指定的某些其他方法返回指定期间内资产的折旧。 语法 DDB (cost, salvage, life, period, [factor])争论 Argument描述Required/OptionalCostThe initial cost of the asset.RequiredSalvage 折旧结束时的价值(有时称为资产的残值)。 该…

数据结构 - 双向链表

文章目录 目录 文章目录 前言 一、什么是双向链表? 双向链表有什么优势? 二、双向链表的设计和实现 1.设计思想 尾增 : 在链表的末尾添加新的元素 头插 : 在链表头部插入节点 删除 : 根据val的值删除节点 查找 : 根据索引的值查找并返回节点 总结 前言 大家好,今天给…