CSS all

CSS 关键字 unset 在应用于属性时,如果该属性自然地从其父级继承,则将其设置为继承值;否则为初始值,以防没有继承。

关键字 unset 可以应用于任何 CSS 属性,包括 CSS 简写属性 all.

CSS unset - 基本示例

  • 在以下示例中,CSS 关键字 unset 应用于元素 h1、p 和 ul 的 margin-top、font-size 和 color 属性。

  • 此关键字将这些属性重置为其继承值,从而允许这些元素继承或者回退到浏览器或父元素定义的默认样式。

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
      color:red;
   }
   header {
      background-color: #333;
      color: white;
      padding: 10px;
      text-align: center;
   }
   nav {
      background-color: #555;
      color: white;
      padding: 10px;
      text-align: center;
   }
   .content {
      margin: 20px;
      padding: 20px;
      background-color: #fff;
      border: 1px solid #ddd;
   }
   .sidebar {
      width: 150px;
      background-color: #eee;
      padding: 10px;
      float: left;
   }
   .main-content {
      margin-left: 220px; 
   }
   .footer {
      clear: both;
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px;
   }
   h1, p, ul {
      margin-top: unset;
      font-size: unset;
      color: unset;
   }
   ul {
      list-style-type: none;
      padding: 0;
      display: flex;
   }
   li {
      margin: 10px;
   }
</style>
</head>
<body>
<header>
   <h1>Header</h1>
</header>
<nav>
<ul>
   <li>首页</li>
   <li>关于</li>
   <li>联系</li>
</ul>
</nav>
<div class="content">
   <div class="sidebar">
      <h2>Sidebar</h2>
      <p>这是侧边栏内容。</p>
   </div>
   <div class="main-content">
      <h2>主要内容</h2>
    <p>这是包含各种元素的主要内容区域。</p>
     
   </div>
</div>
   <div class="footer">
      <p>页脚</p>
   </div>
</body>
</html>