Від автора: вітаю вас, шановні читачі блогу 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 ви можете додавати кольору в палітру з допомогою зміни насиченості трьох основних кольорів.
Переваги цього способу в тому, що ви вибираєте з мільйонів кольорів, просто змінюючи три числа. При запису з допомогою ключових слів у вашому арсеналі буде всього лише кілька сотень квітів.
Rgba – напівпрозорий текст!
Так, це новий режим запису, який в графічних редакторах є давно, але саме в веб-дизайні з’явився відносно недавно. Записується так:
a{
rgba(255, 12, 22, 0.5);
}
Останнє число запису визначає прозорість. Її можна записувати від 0 до 1, де 1 – повністю непрозорий текст, тобто поведінка за замовчуванням. В цьому випадку всі посилання стануть червоними, але через прозорості яскравість кольору буде значно менше, а якщо під посиланням є інший фон або елемент, то його буде видно.
Неправильний спосіб завдання кольору
В html є застарілий атрибут color і з його допомогою можна було записати колір тексту за допомогою ключового слова. Зараз це може не спрацювати в сучасних браузерах, та й взагалі цей метод порушує загальноприйняті веб-стандарти. А ще він незручний.
Як визначити колір для довільного фрагмента
Ну гаразд, ми тут говоримо про колір шрифту для абзаців, посилань і таблиць, але це цілісні елементи, а що, якщо вам треба визначити колір для одного пропозиції, жодного слова, жодної букви, в кінці кінців?
Просто укладаємо потрібний фрагмент в теги span. Прописуємо всередині тега атрибут class, якому задаємо довільне, але зрозуміле нам значення. Наприклад, так:
Тут текст
Все, тепер залишається тільки звернутися до селектору в css.
.red-fragment{
color: red;
}
Давайте інтуїтивно зрозумілі імена стильовим класів, щоб потім все було зрозуміло при перегляді коду. Ось так легко можна записати все. До речі, стильовий клас можна вішати будь-тегам, в тому числі і тегами форматування тексту. Наприклад:
Текст
Тут ми використовували теги, які зробили шрифт жирним, але оскільки йому ще дописаний стильової клас, то текст стане ще й червоним. Ось так ми скомбінували тег та стилі оформлення.
Більше про оформлення тексту ви можете дізнатися з наших преміум-уроків, а саме підручника з css, в якому є відповідна інформація.
Тепер ви знаєте, як змінити колір шрифту у html, яким способом це можна записати і як робити НЕ потрібно. Підписуйтесь на цей блог, якщо є мета розвиватися в області сайтобудування.
