HTML5和CSS学习笔记（三）

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

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

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

  
padding
  
padding

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

    

      
padding
      
padding
    

（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 元素的存在
如：

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

Hello World

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

Hello World!