CSS Кольори
Кольори в CSS вказуються з використанням передвизначених назв кольорів або значень RGB, HEX, HSL, RGBA, HSLA.
CSS Назви кольорів
В CSS колір можна вказати за допомогою попередньо визначеного імені кольору:
CSS/HTML підтримує 140 стандартних назв кольорів.
CSS Background Color - Колір фону
Ви можете встановити колір фону для HTML-елементів:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Приклад
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Спробуйте самі »
CSS Text Color - Колір тексту
Ви можете встановити колір тексту:
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Приклад
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Спробуйте самі »
CSS Border Color - Колір межі
Ви можете встановити колір меж:
Hello World
Hello World
Hello World
Приклад
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Спробуйте самі »
CSS Значення кольору
В CSS кольори також можуть бути вказані з використанням значень RGB, значень HEX, значень HSL, значень RGBA та значень HSLA:
Те саме, що і назва кольору 'Tomato':
Те саме, що і назва кольору 'Tomato', але на 50% прозоріше:
Приклад
<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 в наступних розділах підручника по CSS на нашому сайті W3Schools українською.
CSS — Кольори — W3Schools Відеоурок
Це відео є вступом до кольорів CSS.
Частина серії відеоуроків для вивчення CSS для початківців!
