Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

สไตล์สี HTML


สีมีความสำคัญมากในการทำให้เว็บไซต์ของคุณดูดี

รหัสฐานสิบหก (การแสดงสีฐานสิบหก)

เลขฐานสิบหกคือการแสดงสี 6 หลัก ตัวเลขสองหลักแรก (RR) แทนค่าสีแดง สองหลักถัดไปคือค่าสีเขียว (GG) และค่าสุดท้ายคือค่าสีน้ำเงิน (BB)

ค่าเลขฐานสิบหกสามารถนำมาจากซอฟต์แวร์กราฟิกใดๆ เช่น Adobe Photoshop แต่ละรหัสเลขฐานสิบหกจะขึ้นต้นด้วยปอนด์หรือเครื่องหมายแฮช # ต่อไปนี้คือรายการสีสองสามสีที่ใช้สัญกรณ์ฐานสิบหก ต่อไปนี้เป็นตัวอย่างสีเลขฐานสิบหก -

สไตล์สี HTML

เรามาดูตัวอย่างการใช้รูปแบบ Hex ใน HTML เพื่อแสดงสี -

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color:#00FF00;">
      <col style = "background-color:#00FFFF;">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

ผลลัพธ์

สไตล์สี HTML

ค่าสี RGB

ค่าสี RGB ถูกกำหนดโดยใช้คุณสมบัติ rgb( ) คุณสมบัตินี้ใช้สามค่า โดยแต่ละค่าสำหรับสีแดง สีเขียว และสีน้ำเงิน ค่าอาจเป็นจำนวนเต็มระหว่าง 0 ถึง 255 หรือเป็นเปอร์เซ็นต์

ต่อไปนี้เป็นสีบางส่วนที่แสดงด้วย RGB −

สไตล์สี HTML

ให้เรามาดูตัวอย่างการใช้รูปแบบ RGB ใน HTML เพื่อแสดงสี -

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color:rgb(255,0,0);">
      <col style = "background-color:rgb(255,255,0);">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

ผลลัพธ์

สไตล์สี HTML

ค่าสี HSL

เมื่อใช้ HTML คุณยังตั้งค่า HUE ได้ เช่น 'H' ย่อมาจาก hue, 'S' แทนความอิ่มตัว และ 'L' สำหรับความสว่าง

ให้เรามาดูตัวอย่างการใช้รูปแบบ HSL ใน HTML เพื่อแสดงสี -

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 2px solid black;
   }
</style>
</head>
<body>
<h2>Result</h2>
<table>
   <colgroup>
      <col span = "3" style = "background-color: hsl(300, 75%, 85%); ">
      <col style = "background-color: hsl(200, 30%, 40%);">
   </colgroup>
   <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Percentage</th>
      <th>Rank</th>
   </tr>
   <tr>
      <td>009</td>
      <td>Tom</td>
      <td>98</td>
      <td>1</td>
   </tr>
   <tr>
      <td>011</td>
      <td>Kieron</td>
      <td>97</td>
      <td>2</td>
   </tr>
   <tr>
      <td>039</td>
      <td>Gayle</td>
      <td>95</td>
      <td>3</td>
   </tr>
   <tr>
      <td>017</td>
      <td>Shaun</td>
      <td>92</td>
      <td>4</td>
   </tr>
   <tr>
      <td>009</td>
      <td>Kane</td>
      <td>91</td>
      <td>5</td>
   </tr>
   <tr>
      <td>025</td>
      <td>Steve</td>
      <td>87</td>
      <td>6</td>
   </tr>
   <tr>
      <td>013</td>
      <td>Jack</td>
      <td>85</td>
      <td>7</td>
   </tr>
   <tr>
      <td>023</td>
      <td>Tim</td>
      <td>84</td>
      <td>8</td>
   </tr>
</table>
</body>
</html>

สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -

สไตล์สี HTML