HTML5 and CSS: 41-50

41 - Add a Negative Margin to an Element

• 好詭異，Margin 竟然設成負的

42 - Add Different Padding to Each Side of an Element

• 設定上下左右的 padding

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

43 - Add Different Margins to Each Side of an Element

• 設定上下左右的 margin

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

44 - Use Clockwise Notation to Specify the Padding of an Element

• 順時針排列 padding 的四個屬性，上右下左

• padding: 10px 20px 10px 20px;

45 - Use Clockwise Notation to Specify the Margin of an Element

• 順時針排列 margin 的四個屬性

• margin: 10px 20px 10px 20px;

46 - Style the HTML Body Element

• 講講 css 在 html 裡的繼承 inherit

• 每個 html 都有 body element

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

47 - Inherit Styles from the Body Element

• 網頁中的其他 element，會繼承 body 的 css 屬性

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

</style>

<h1>Hello World</h1>

48 - Prioritize One Style Over Another

• 哪個 style 會更優先被呈現 override

• body 的 color: green，被 .pink-text 的 color: pink 蓋過

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

  .pink-text {
    color: pink;
  }

</style>
<h1 class="pink-text">Hello World!</h1>

49 - Override Styles in Subsequent CSS

• css style 的呈現會受順序影響

• element 的 class 命名順序沒關係

• style 的宣告順序有關系。後宣告的會被優先渲染

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

50 - Override Class Declarations by Styling ID Attributes

• class 和 id 的呈現，誰優先層級比較高?

• id 比較高

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