Просто про складне або вивчаємо CSS3. Частина 3. Способи завдання кольору в CSS. Завдання прозорості елементу в HTML-документі

Привіт, шановні читачі сайту remontcompa.ru! Мене звати Роман нахватом і я представляю вашій увазі третю частину з циклу статей з мови стилів CSS. У першій і другій частині ми з вами розглянули способи додавання стилів на веб-сторінку, вивчили таке поняття як селектор CSS і їх типи. Починаючи з даної частини ми приступимо до вивчення властивостей мови CSS, які застосовуються до різних елементів HTML-сторінки: тексту, таблиць, списків, формам і так далі. Саме в цій статті розглянемо способи завдання кольору і прозорості елементів на веб-сторінці, використовуючи властивості color, background-color і opacity.

Просто про складне або вивчаємо CSS3. Частина 3. Способи завдання кольору в CSS. Завдання прозорості елементу в HTML-документі

Створимо наступну структуру HTML-документа, як показано нижче.

Збережемо даний документ як color.html на флеш накопичувачі в папці CSS

Також створимо і збережемо на флеш накопичувачі в папці CSS файл стилів color.css

Додамо на веб-сторінку color.html кілька абзаців (теги

...

з будь-яким текстом (в нашому випадку 4 абзацу)

Отримаємо наступний вигляд веб-сторінки

Пропишемо для кожного абзацу назва класу (class1, class2, class3 і class4) як показано нижче

CSS властивість color дозволяє вказувати колір тексту усередині елемента в HTML-документі. Після властивості color вказується його значення, яке можна прописувати різними способами

Задати будь-який колір в CSS за допомогою таких дій: Використовуючи англійські назви кольорів. Через шістнадцятковий код, який визначає кількість червоного, синього і зеленого кольору. Даний код записується після знака # Значення RGB, яке виражає колір в пропорціях червоного, синього і зеленого по моделі RGB. Значення RGBA є все тим же значенням RGB, до якого долучено чётвертим параметром так званий альфа-канал, який приймає значення від 0.0 (прозорість) до 1.0 (непрозорість) і дозволяє вказувати ступінь непрозорості елемента. Значення HSL, яке було додано в CSS3 як альтернативний спосіб завдання кольору. Дане значення починається з букв hsl, після яких в круглих дужках йдуть параметри, що виражають відтінок, насиченість і світлин кольору. Значення HSLA є тим самим значенням HSL, до якого, як і в випадку із значенням RGBA, четвертим параметром доданий так званий альфа-канал, який приймає значення в діапазоні від 0.0 до 1.0

На сайті https://colorscheme.ru/ в зручній формі представлені імена, шістнадцяткові коди, RGB значення HTML квітів

Також на сайті https://colorscheme.ru/ представлений універсальний конвертер квітів, яким ми в подальшому будемо користуватися. Даний конвертер дозволяє переводити колір з однієї колірної моделі в іншу, наприклад з RGB в HSL, конвертувати шістнадцятковий код кольору в значення RGB і так далі.

Задамо синій колір тексту для першого абзацу (даного абзацу ми присвоїли клас з назвою class1)

У файлі стилів color.css після властивості color як значення вкажемо ім'я кольору (blue)

Як бачимо, текст першого абзацу змінив свій колір на синій (blue)

Змінимо колір тексту другого абзацу (class2) на darkorchid

Як значення для властивості color пропишемо колір darkorchid у вигляді шістнадцятирічного коду, а саме # 9932cc

Як бачимо, колір тексту другого абзацу змінився на darkorchid (# 9932cc)

Змінимо колір тексту третього абзацу (class3) на колір fuchsia (magenta), вказавши його у вигляді RGB значення після властивості color. Можна помітити, що кольори fuchsia і magenta по суті є ідентичними, і мають однакові шіснадцяткові коди (# ff00ff) і значення RGB (255,0,255)

Прописуємо після властивості color RGB значення кольору fuchsia (magenta) наступним чином: color: rgb (255,0,255)

Колір тексту третього абзацу змінився на fuchsia (magenta)

Змінимо колір тексту четвертого абзацу (class4), використовуючи значення HSL. Як вже говорилося вище, значення HSL визначається трьома параметрами: відтінком (hue), насиченістю (saturation) і светлотой (lightness)

Розглянемо кожен з цих параметрів окремо. Для вказівки відтінку (hue) необхідно вказати кут повороту (від 0 ° до 360 °) на колірному колі, як показано на малюнку нижче. Наприклад, зелений колір відповідає куту повороту 120 °, а синій колір куту повороту 270 °

Параметр saturation визначає насиченість обраного відтінку. Насиченість в колірній моделі HSL вказується в процентах в діапазоні від 0% до 100%. Чим ближче значення даного параметра до 100%, тим колір виглядають більш чисто, а якщо насиченість прагне до 0% то колір стає більш бляклим. Параметр lightness визначає яскравість кольору і так само як і параметр saturation, вказується в процентах в діапазоні від 0% до 100%. Чим вище значення даного параметра, тим яскравіше стає колір. Змінимо колір тексту четвертого абзацу на lawngreen

Так як ми хочемо вказати в якості значення для властивості color значення HSL, нам необхідно перетворити колір lawngreen (# 7CFC00 або 124.252.0) в колірну модель HSL. Для цього скористаємося онлайн конвертером квітів за адресою https://colorscheme.ru/color-converter.html. У рядку колірна модель вкажемо наприклад RGB значення кольору lawngreen, а саме 124.252.0, і трохи нижче можемо побачити результат перетворення в HSL (hsl (90,100%, 49%))

Після властивості color вказуємо значення hsl (90,100%, 49%)

Як бачимо, колір тексту четвертого абзацу змінився на lawngreen

Розглянемо ще одну властивість CSS, як background-color. Властивість background-color задає колір фону елементу в HTML документі. Задати значення для властивості background-color можна тими ж способами, які ми розглядали для вказівки кольору тексту: використовуючи англійські назви кольорів, шістнадцятковим кодом кольору, RGB значенням і HSL значенням Змінимо колір фону для чотирьох абзаців, використовуючи властивість background-color різними способами вказівки кольору . Для першого абзацу задамо колір фону, використовуючи англійська назва кольору, наприклад darkgray. У файлі стилів пишемо background-color: darkgray

Колір фону першого абзацу змінився на darkgray

Змінимо колір тексту другого абзацу на aqua (cyan)

Зазначимо шістнадцятковий код кольору aqua (cyan) в якості значення для властивості background-color

отримаємо наступне

Для третього абзацу задамо кольором фону greenyellow, використовуючи значення RGB (173,255,47)

У файлі стилів color.css прописуємо background-color: rgb (173,255,47)

Задамо четвертим абзацом колір фону black, використовуючи значення hsl

У файлі стилів color.css прописуємо властивість background-color зі значенням hsl (0,0%, 0%)

В результаті отримуємо наступне

У мові CSS3 існує кілька способів завдання прозорості елементів в HTML документі:

Властивість opacity, що дозволяє вказати ступінь прозорості елемента і будь-якого з його дочірніх елементів. Властивість opacity приймає значення в діапазоні від 0.0 (повністю прозорий) до 1.0 (непрозорий) За допомогою колірної моделі RGBA, яка дозволяє задати колір таким же чином, як і RGB. На відміну від RGB, в RGBA присутній четвертий параметр, так званий альфа-канал, що дозволяє вказувати ступінь прозорості елемента. Даний параметр приймає значення в діапазоні від 0,0 до 1.0 Колірна модель HSLA, що дозволяє висловити колір через значення відтінку, насиченості і світлини, і так само, як колірна модель RGBA, додає значення прозорості у вигляді четвертого параметра, так званого альфа-каналу. Даний параметр, як і в випадку з RGBA, може приймати значення від 0,0 до 1.0 Розглянемо все способи завдання прозорості (на прикладі тексту) на конкретних прикладах. У файлі color.css видалимо всі властивості background-color

Після властивості opacity вказується його значення, яке може бути в діапазоні від 0.0 до 1.0. Чим ближче значення даного властивості до 1, тим вище непрозорість елемента

Задамо наступні значення для властивості opacity в кожному абзаці: Для першого абзацу (присвоєно клас з назвою class1) в якості значення для властивості opacity вкажемо число 0.2 Для другого абзацу (присвоєно клас з назвою class2) в якості значення для властивості opacity вкажемо число 0.3 Для третього абзацу (присвоєно клас з назвою class3) в якості значення для властивості opacity вкажемо число 0.4 для четвертого абзацу (присвоєно клас з назвою class4) в якості значення для властивості opacity вкажемо число 1.0

В результаті бачимо, що текст перших трьох абзаців (до яких застосовано властивість opacity зі значеннями 0.2, 0.3 і 0.4 відповідно) більш прозорий, ніж текст четвертого абзацу (властивість opacity зі значенням 1.0)

Видалимо з файлу color.css властивості color і opacity і поставимо прозорість тексту абзаців, використовуючи функцію hsla

У функції hsla прозорість задається, як уже було сказано вище, за допомогою параметра, званого альфа-каналом (alpha), який приймає значення від 0.0 до 1.0.

У файлі color.css для кожного абзацу пропишемо значення функції hsla:

В результаті отримаємо все той же результат, що і за допомогою властивості opacity.

Задамо прозорість тексту в абзацах, використовуючи функцію rgba, де четвертий параметр (alpha) відповідає за рівень прозорості і приймає значення від 0.0 до 1.0

Отримуємо такий же результат, як і в випадку з функцією hsla і властивістю opacity

Продовження в статті: Просто про складне або вивчаємо CSS3. Частина 4. 1. Шрифти в HTML документі. Властивості font-family і @ font-face