极客笔记HTML * { 是什么意思
概述
在HTML（超文本标记语言）中，*代表的是整个HTML文档的通用符号。换句话说，我们可以说这个符号用于目标是HTML的body元素或者HTML的DOM（文档对象模型）。这个符号主要用于CSS（层叠样式表）中，用来选择整个HTML DOM并对其进行特定的更改。在CSS中，我们一般使用类名、id名或标签名来定义一些CSS属性，但是如果要对页面进行一些普遍的更改，我们可以使用这个符号。
语法
下面给出了在HTML中使用上述符号的语法 –
*{
// Content goes here
}
步骤
- 在HTML文档中创建一个HTML文件，并写入HTML模板代码。
-
现在在HTML文档的正文中添加一些内容。
<h3> Deepinout.com </h3>
- 现在在HTML的头部使用内部样式表，并将样式标签添加到文档中
<style></style>
- 用上述符号 *{ 作为选择器来选择 HTML DOM。
<style>
*{
// CSS styling properties
}
<style>
- 现在为选择器添加一些CSS样式。
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
background-color: green;
color: white;
}
</style>
- 在浏览器中打开文件并查看结果。
示例
在这个示例中，我们将学习符号*{的用法，为此我们将创建一个包含默认属性的HTML页面。我们将使用样式属性来重置样式属性。
<html>
<head>
<title> use of *{ in HTML</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-align: center;
background-color: green;
color: white;
}
</style>
</head>
<body>
<h3>Deepinout.com</h3>
</body>
</html
当用户在浏览器中加载上述HTML文档时，将在屏幕上获得一个绿色背景窗口和一个显示为“Deepinout.com”的文本，因为整个绿色背景是一个目标为*的HTML DOM。开发人员在这个符号上定义了一些样式属性，这些属性被应用在body的所有子元素上。
结论
使用这个符号的好处是我们可以一次性地给所有的CSS样式定义属性。我们不需要为所有DOM的子元素定义和定位样式。在整个场景中，*符号充当了一个标签或HTML DOM。在实际应用中，开发人员使用这个符号来重置页面的预定义CSS样式。重置预定义样式意味着页面上可能给出一些边距或填充，这会破坏我们页面的用户界面，因此通过定义样式属性tp *{ 来覆盖页面的样式。