CSS カラー

指定颜色是通过使用预定义的颜色名称，或 RGB、HEX、HSL、RGBA、HSLA 值。

CSS 颜色名

在 CSS 中，可以使用颜色名称来指定颜色：

番茄色
橙色
DodgerBlue
中海洋绿
灰色
灰蓝色
紫罗兰色
ライトグレー

実際に試してみましょう

CSS/HTML サポート 140種の標準色名。

CSS 背景色

HTML要素に背景色を設定できます：

ようこそ中国へ
中国は偉大な国です！

例

<h1 style="background-color:ドジャーブルー;">中国</h1>
<p style="background-color:トマト;">中国は偉大な国です！</p>

実際に試してみましょう

CSS テキスト色

テキストの色を設定できます：

中国

中国は偉大な国です！

中国、正式には中華人民共和国、は東アジアに位置する国です。

例

<h1 style="color:トマト;">中国</h1>
<p style="color:ドジャーブルー;">中国は偉大な国です！</p>
<p style="color:メディアシーグリーン;">中国、正式には中華人民共和国...</p>

実際に試してみましょう

CSS 枠線色

枠線の色を設定できます：

Hello World
Hello World
Hello World

例

<h1 style="border:2px solid トマト;">Hello World</h1>
<h1 style="border:2px solid ドジャーブルー;">Hello World</h1>
<h1 style="border:2px solid ヴァイオレット;">Hello World</h1>

実際に試してみましょう

CSS 頂点値

CSSでは、RGB値、HEX値、HSL値、RGBA値、またはHSLA値を使用して色を指定できます：

色名「トマト」と同等です：

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

色名「トマト」と同等で、透明度は50%です：

rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
<h3>例</h3> 
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

実際に試してみましょう

色値に関する詳細な情報を学びます

次の章では、以下について学びます RGB、HEX および HSL の詳細な情報。