After introducing Bootstrap’s CSS style, labels,
Are tags that come with HTML such as tags overwritten? A: Overwritten.
Why do you say that? Where is the evidence?
Just write an example and take a look at it in debug mode.
Let’s first look at the CSS style without introducing Bootstrap.
code show as below:
<!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>
We open the above code with a browser, then enter debugging mode with F12, and find that the style of h1 is as follows:
It can be seen that this h1 uses the client style.
Let’s look at the introduction of Bootstrap’s CSS style.
code show as below:
<!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>
We open the above code with the browser again, then F12 enters the debugging mode, and finds that the style of h1 is as follows:
We then click on the _type.scss file in the screenshot above and get the source file as follows:
It can be seen that this _type.scss file is from For bootstrap.
Let’s use the same content again and compare the two styles, as shown in the figure below:
Obviously, the styles of the two are different. Note: After introducing Bootstrap's CSS style, HTML tags such as the <h> tag and the <p> tag are overwritten.
So after the introduction of Bootstrap's CSS style, which HTML tags have been overwritten?
This can only be collected slowly... The
ones I know so far include <h> tags and <p> tags. I will record them when I find new ones in the future.