HTML-Farbstile-HTML-Tutorial-php.cn

HTML-Farbstile

PHPz

Freigeben： 2023-09-14 12:25:05

nach vorne

811 Leute haben es durchsucht

Farbe ist sehr wichtig, um Ihrer Website ein gutes Erscheinungsbild zu verleihen.

Hex-Code (Hex-Farbdarstellung)

Hex ist eine 6-stellige Farbdarstellung. Die ersten beiden Ziffern (RR) stellen den Rotwert dar, die nächsten beiden Ziffern sind der Grünwert (GG) und die letzte Ziffer ist der Blauwert (BB).

Kann mit Adobe Photoshop und anderer Software Hexadezimalwerte aus jeder Grafik abrufen. Jedem Hexadezimalcode wird ein Raute- oder Nummernzeichen # vorangestellt. Nachfolgend finden Sie eine Liste verschiedener Farben in hexadezimaler Schreibweise. Hier sind einige Beispiele für hexadezimale Farben –

HTML-Farbstile

Sehen wir uns ein Beispiel für die Implementierung von Hex-Stilen in HTML zur Darstellung von Farben an –

Beispiel

Live-Demo

<!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>

Nach dem Login kopieren

Ausgabe

HTML-Farbstile

RGB-Farbwerte

RGB-Farbwerte werden mit dem rgb( )-Attribut angegeben. Diese Eigenschaft nimmt drei Werte an, jeweils einen für Rot, Grün und Blau. Der Wert kann eine ganze Zahl oder ein Prozentsatz zwischen 0 und 255 sein.

Hier sind einige in RGB dargestellte Farben –

HTML-Farbstile

HSL-Farbwerte

Mit HTML können Sie auch HUE festlegen, wobei „H“ für Farbton, „S“ für Sättigung und „L“ steht. steht für Leichtigkeit.

Sehen wir uns ein Beispiel für die Implementierung von HSL-Stilen in HTML zur Darstellung von Farben an –

Beispiel

Live-Demonstration

<!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>

Nach dem Login kopieren

Dadurch wird die folgende Ausgabe erzeugt –

HTML-Farbstile

Das obige ist der detaillierte Inhalt vonHTML-Farbstile. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!