HTML5和CSS学习笔记（三）

(36)设置元素的ID
id 属性应该是唯一的，虽然浏览器并不强制唯一，但基于最佳实践，这一点是被广泛认可的，所以请不要给一个以上的元素设置相同的 id 属性。
如：设置 form 元素的id属性为 cat-photo-form。

<form action="/submit-cat-photo" id="cat-photo-form">
</form>

（37）使用ID属性设置元素的样式
和类选择器一样,声明一个叫cat-photo-element的ID选择器 ，并设置背景色为绿色。
注意：在你的 style 元素内部，定义类选择器必须添加 . 为前缀，定义ID选择器必须添加 # 为前缀。

<style>
#cat-photo-element{
    background-color: green;
  }
</style>
<form action="/submit-cat-photo" id="cat-photo-element">
</form>

(38)调整元素的填充
有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。
元素的 padding 控制元素内容 content和元素边框 border 之间的距离。
当你加大绿方块的 padding, 它将扩大元素内容和元素边框的距离。
如：修改绿方块的 padding 以使它与红方块相匹配

<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }
  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }
  .red-box {
    background-color: red;
    padding: 20px;
  }
  .green-box {
    background-color: green;
    padding: 20px;
  }
</style>
<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box green-box">padding</h5>
</div>

（39）调整元素的页边距
元素的外边距 margin 控制元素边框 border 和元素实际所占空间的距离。
如：修改绿方块的 margin 以使它与红方块匹配

<style>
      .injected-text {
        margin-bottom: -25px;
        text-align: center;
      }
      .box {
        border-style: solid;
        border-color: black;
        border-width: 5px;
        text-align: center;
      }
      .red-box {
        background-color: red;
        padding: 20px;
        margin: 20px;
      }
      .green-box {
        background-color: green;
        padding: 20px;
        margin: 20px;
      }
    </style>
    <div class="box yellow-box">
      <h5 class="box red-box">padding</h5>
      <h5 class="box green-box">padding</h5>
    </div>

（40）向元素添加负边距
将一个元素的 margin 设置为负值，元素将会变大
如：把绿方块的 margin 设置为 -15px，以使它将父容器(黄方块)的横向宽度填满

 .green-box {
            background-color: green;
            padding: 20px;
            margin: -15px;
          }

（41）在元素的每一侧添加不同的填充
有时你想要自定义元素，使它的每一个边具有不同的 padding。
CSS 允许你使用 padding-top、padding-right、padding-bottom和padding-left来控制元素上右下左四个方向的 padding。
如：使绿方块的顶部和左侧具有 40px 的 padding，而底部和右侧则是 20px

.green-box {
    background-color: green;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left:40px;
  }

（42）在元素的每一侧添加不同的边距
CSS 允许你使用 margin-top、margin-right、margin-bottom 和 margin-left 来控制元素上右下左四个方向的 margin。
如：使绿方块的顶部和左侧具有 40px 的 margin，而底部和右侧则是 20px。

.green-box {
    background-color: green;
    margin-top: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 40px;
  }

（43）使用顺时针表示法指定元素的填充或边距
除了分别指定元素的 padding-top、padding-right、padding-bottom 和 padding-left
或 margin-top、margin-right、margin-bottom 和 margin-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px;
margin: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。
如：使用顺时针方式设置 “.green-box” class，使其顶部和左侧具有 40px 的 padding或margin，而底部和右侧具有 20px 的 padding 或margin

.green-box {
    background-color: green;
    padding:40px 20px 20px 40px;
    margin: 40px 20px 20px 40px；
  }

4.CSS继承
（1）样式化HTML主体元素
每一个 HTML 页面都有一个 body 元素
通过将其 background-color 设置为黑色，我们可以证明 body 元素的存在
如：

<style>
  body {
  background-color: black;
}
</style>

（2）从Body元素继承样式
首先，创建一个文字为 Hello World 的 h1 元素。
然后，让我们通过向 body 元素的样式声明部分添加 color: green; 使页面上的所有元素的颜色为 green。
最后，通过向 body 元素的样式声明部分添加 font-family: Monospace; 将 body 元素的 font-family（字体）设置为 Monospace。

<style>
  body {
    background-color: black;
     color: green; 
    font-family: Monospace;
  }
</style>
<h1>Hello World</h1>

(3)一种风格优先于另一种风格
有时你的 HTML 元素会得到相互冲突的多个样式。
例如，你的 h1 元素不能同时为绿色和粉色。
让我们来看看当我们创建一个使其文字为粉色的 class 时会发生什么，然后将其应用到某元素。我们的 class 会 override（覆盖） body 元素的 color: green; CSS 属性吗？
创建一个使元素颜色成为粉色的名为 pink-text 的 CSS class。
设置 h1 元素的 class 为 pink-text。

<style>
  body {
    background-color: black;
    font-family: Monospace;
    color: green;
  }
  .pink-text{
  color: pink;   
  }
</style>
<h1 class="pink-text">Hello World!</h1>