顏色對于為您的網站提供良好的外觀和感覺非常重要。
十六進制代碼(十六進制顏色表示)
十六進制是顏色的 6 位表示。前兩位(RR)代表紅色值,接下來兩位是綠色值(GG),最后一位是藍色值(BB)。
可以從任何圖形中獲取十六進制值Adobe Photoshop 等軟件。每個十六進制代碼前面都會有一個井號或井號 #。以下是使用十六進制表示法的幾種顏色的列表。以下是十六進制顏色的一些示例 –
讓我們看一個在 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>
登錄后復制
輸出
RGB 顏色值
RGB 顏色值是使用 rgb( ) 屬性指定的。該屬性采用三個值,紅色、綠色和藍色各一個。該值可以是 0 到 255 之間的整數或百分比。
以下是用 RGB 表示的一些顏色 –
HSL 顏色值
使用 HTML,您還可以設置 HUE,即“H”代表色調,“S”代表飽和度, “L”代表亮度。
讓我們看一個在 HTML 中實現 HSL 樣式來表示顏色的示例 –
示例
?實時演示
<!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顏色樣式的詳細內容,更多請關注www.92cms.cn其它相關文章!