Колір для шрифту html

19

Від автора: вітаю вас, шановні читачі блогу webformyself. Сьогодні хотілося б поговорити про те, як вибрати колір шрифту html-елементів.

Як змінити колір шрифту у html

Якщо ви хоч трохи розбираєтеся у веб-технологіях, то повинні знати, що вся розмітка і вміст документа містяться в html-файлі, а в файлі стилів css при цьому зберігаються стилі, що визначають зовнішній вигляд різних елементів. Так ось, саме css нам потрібно використовувати для зміни кольору шрифту і всього іншого.

В html існують теги, які дозволяють застосувати певні ефекти, але погодьтеся, що придумувати сотні тегів для кожного відтінку було б не зовсім розумно. В css можна керувати цим набагато більш зручно. Наприклад, ось так можна задати колір шрифту html-елемента body, тобто тегу, що включає в себе весь вміст сторінки, яке виводиться на екран.

body{
color: red;
}

Ми записали тілу сторінки червоний колір. Його отримають абзаци, списки, підписи, і всі інші елементи. Це буде до тих пір, поки стилі для цих елементів не будуть замінені на інші.

Формати запису кольору

Можливо, у вас є невеликі пізнання в області веб-дизайну? В такому випадку ви повинні знати про те, що існують різні колірні режими. Наприклад, rgb, rgba, hsl, hex і т. д. Звичайно, найпростіший спосіб задати відтінок – просто написати ключове слово. Ми так і зробили в прикладі вище, значення red робить літери червоними, blue – синіми, brown – коричневими. Це просто назви кольорів англійською.

Єдине, що вам потрібно знати в цьому випадку – назву потрібного кольору. Їх ви можете подивитися в інтернеті у будь-якій таблиці. Наступний популярний спосіб задати колір – записати його шістнадцятковий код. Це так званий hex-формат. Приклади:

p{
color: #000;
}
/* Текст в абзацах буде чорним. */
table{
color: #fff;
}
/* Вміст в таблицях буде білим. */

Як бачите, потрібно записати грати, після чого код кольору. Як його дізнатися? Наприклад, можна відкрити фотошоп або будь-який інший графічний редактор, в якому при підборі кольору відображається його hex-код. Також можна скористатися онлайн-сервісом.

Rgb – ще один популярний формат запису. Він розшифровується просто – red, green, blue. Колір в цьому форматі задається так:

#footer{
color: rgb(234, 22, 56);
}

Елемент з ідентифікатором footer отримає вказаний колір. Частка червоного складе 234, зеленого – 22, синього – 56. Ці значення можна писати від 0 до 255. Відповідно наш відтінок вийде ближче до червоного. В Paint ви можете додавати кольору в палітру з допомогою зміни насиченості трьох основних кольорів.

Колір для шрифту html

Колір для шрифту html

Переваги цього способу в тому, що ви вибираєте з мільйонів кольорів, просто змінюючи три числа. При запису з допомогою ключових слів у вашому арсеналі буде всього лише кілька сотень квітів.

Rgba – напівпрозорий текст!

Так, це новий режим запису, який в графічних редакторах є давно, але саме в веб-дизайні з’явився відносно недавно. Записується так:

a{
rgba(255, 12, 22, 0.5);
}

Останнє число запису визначає прозорість. Її можна записувати від 0 до 1, де 1 – повністю непрозорий текст, тобто поведінка за замовчуванням. В цьому випадку всі посилання стануть червоними, але через прозорості яскравість кольору буде значно менше, а якщо під посиланням є інший фон або елемент, то його буде видно.

Колір для шрифту html

Неправильний спосіб завдання кольору

В html є застарілий атрибут color і з його допомогою можна було записати колір тексту за допомогою ключового слова. Зараз це може не спрацювати в сучасних браузерах, та й взагалі цей метод порушує загальноприйняті веб-стандарти. А ще він незручний.

Як визначити колір для довільного фрагмента

Ну гаразд, ми тут говоримо про колір шрифту для абзаців, посилань і таблиць, але це цілісні елементи, а що, якщо вам треба визначити колір для одного пропозиції, жодного слова, жодної букви, в кінці кінців?

Просто укладаємо потрібний фрагмент в теги span. Прописуємо всередині тега атрибут class, якому задаємо довільне, але зрозуміле нам значення. Наприклад, так:

Тут текст

Все, тепер залишається тільки звернутися до селектору в css.

.red-fragment{
color: red;
}

Давайте інтуїтивно зрозумілі імена стильовим класів, щоб потім все було зрозуміло при перегляді коду. Ось так легко можна записати все. До речі, стильовий клас можна вішати будь-тегам, в тому числі і тегами форматування тексту. Наприклад:

Текст

Тут ми використовували теги, які зробили шрифт жирним, але оскільки йому ще дописаний стильової клас, то текст стане ще й червоним. Ось так ми скомбінували тег та стилі оформлення.

Більше про оформлення тексту ви можете дізнатися з наших преміум-уроків, а саме підручника з css, в якому є відповідна інформація.

Тепер ви знаєте, як змінити колір шрифту у html, яким способом це можна записати і як робити НЕ потрібно. Підписуйтесь на цей блог, якщо є мета розвиватися в області сайтобудування.