HTML5 and CSS: 51-

51 - Override Class Declarations with Inline Styles

• 用 in-line style

• <h1 style="color: green">

• in-line 的優先度比 id 屬性高

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

52 - Override All Other Styles by using Important

• 你以為 inline 是覆蓋優先層級最高的嘛

• 錯了，還有 !important

• color: red !important;

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

53 - Use Hex Code for Specific Colors

• hexadecimal code, hex code, 十六進位制

• 6個hexadecimal digits 代表 color

• Hexadecimal - Wikipedia

• RGB color model - Wikipedia

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

54 - Use Hex Code to Mix Colors

• FF8080，#80FF80，#8080FF 意外的好看

Color	Hex Code
Dodger Blue	#2998E4
Green	#00FF00
Orange	#FFA500
Red	#FF0000
White	#FFFFFF
Black	#000000
Gray	#808080

55 - Use Abbreviated Hex Code

• 可用簡碼，三碼

<style>
  .red-text {
    color: #F00;
  }
  .fuchsia-text {
    color: #F0F;
  }
  .cyan-text {
    color: #0FF;
  }
  .green-text {
    color: #0F0;
  }
</style>

<h1 class="red-text">I am red!</h1>

<h1 class="fuchsia-text">I am fuchsia!</h1>

<h1 class="cyan-text">I am cyan!</h1>

<h1 class="green-text">I am green!</h1>

56 - Use RGB values to Color Elements

• RGB value

<style>
  body {
    background-color: rgb(0, 0, 0);
  }
</style>

57 - Use RGB to Mix Colors

• Blue rgb(0, 0, 255)

• Red rgb(255, 0, 0)

• Orchid rgb(218, 112, 214)

• Sienna rgb(160, 82, 45)