TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Підручник з кольорів CSS для початківців

157

Кольори роблять веб -сторінку значущою. Сторінка буде виглядати просто і нудно без різних кольорів. Ви можете використовувати два типи властивостей кольору з CSS на веб -сторінці. Один із них – колір переднього плану (зазвичай як колір) для зміни кольору тексту або шрифту. По -друге, колір фону для додавання кольору фону до різних елементів HTML. У цьому підручнику давайте вивчимо, як використовувати властивості кольору CSS з різними атрибутами.

Зміна кольору тексту в CSS

Розглянемо приклад зміни кольору елемента абзацу

до червоного. Ви можете зробити це за допомогою наведеного нижче визначення стилю в CSS:

p { color: red; }

Він видасть у браузері такий результат:

Це абзац червоного кольору.

Зміна кольору фону в CSS

Ви можете змінити колір фону будь -якого елемента HTML, використовуючи наведене нижче визначення стилю CSS:

p { background-color:red;color:white; }

Це дасть такий результат:

Це абзац червоного кольору.

Зверніть увагу, що ми використовували білий колір тексту, щоб він був чітко читається на червоному тлі.

Визначення кольорів у CSS

У наведених вище прикладах ми використовували червоний і білий кольори з назвою. Ви можете створити мільйони кольорів, поєднавши три основні кольори – червоний, синій та зелений. Неможливо запам’ятати назву кольорів, а також більшість кольорів не мають фактичної назви. Щоб спростити використання, CSS дозволяє наступними способами визначити значення кольору:

  • Назви для таких кольорів, як червоний, зелений або білий
  • Використання комбінації червоних, зелених та синіх десяткових значень, таких як rgb (20,50,200)
  • Використання шістнадцяткових значень для червоного, зеленого та синього, наприклад #ffffff
  • Відсоткове значення для червоного, синього та зеленого кольорів, таких як rgb (10%, 80%, 25%)
  • Використання відтінку, насиченості та освітленості, таких як hsl (0,80%, 70%)
  • Додавання непрозорості до значень RGB, таких як rgba (0,0,0,0,8)
  • Додавання непрозорості до значень HSL, таких як hsla (200,75%90%0,6)

Використання імен кольорів у CSS

Ми вже бачили, як використовувати ім’я в кольорових та фонових властивостях CSS. Браузери можуть визначити лише близько 150 назв кольорів. Ми рекомендуємо використовувати кольори замість імен для кольорів. Ви також можете ознайомитися з кодами кольорів для популярних сайтів соціальних мереж у цій статті.

Використання кольорів RGB у CSS

У методі RGB червоний, синій та зелений кольори позначаються з десятковими числами від 0 до 255. Наприклад, колір томатів позначається як rgb (255,99,71).

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

Він видасть у браузері такий результат:

Цей текст матиме колір фону томата зі значенням RGB як rgb (255,99,71).

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

Використання шістнадцяткових значень кольору

Колір томатів rgb (255,99,71) можна перетворити в еквівалентне шістнадцяткове значення як FF6347. Це просто перетворення 255 у FF, 99 у 63 та 71 у 47. Ви можете використовувати інструменти перетворення кольорів для перетворення між RGB у шістнадцяткові коди.

Ви можете використовувати шістнадцяткові значення кольору в CSS, як показано нижче:

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

"Padding: 15px;" використовується для додавання відступів до текстового вмісту всередині

елемент. Він видасть у браузері такий результат:

Цей текст матиме колір фону томатів із значенням шістнадцяткового коду як #FF6347. Не забудьте використовувати символ # перед значенням шістнадцяткового коду та використовувати колір тексту як #FFFFFF. Крім того, і маленький регістр #ff6347, і великий регістр #FF6347 дадуть однаковий результат.

Використання значень RGB як відсотків

Замість десяткових діапазонів чисел від 0 до 255 можна також згадати відсоткове значення для червоного, зеленого та синього.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Це дасть наступний результат:

Цей текст матиме колір фону томата зі значенням шестигранного коду як #FF6347. Не забудьте використовувати символ # перед значенням шістнадцяткового коду. Також і малий регістр #ff6347, і великий регістр #FF6347 дадуть однаковий результат.

Додавання непрозорості до кольорів RGB

У CSS3 у вас є можливість згадати значення альфа або непрозорості для кольорів. Альфа -значення додається як десяткове число від 0,0 до 1,0 як четверте значення. Значення 0 являє собою повністю прозоре, що становить 0% непрозорості, а 1,0 означає непрозоре зі 100% непрозорістю.

Нижче наведено синтаксис використання альфа -значення в кольорі rgb з непрозорістю 20%:

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

Давайте покажемо червоний колір зі значеннями непрозорості 20%, 40%, 60%, 800%та 100%, щоб зробити його більш зрозумілим.

Підручник з кольорів CSS для початківців

Пам’ятайте, що існує також окрема властивість CSS під назвою “непрозорість: яку також можна використовувати з тією ж метою. Перевагою непрозорості є те, що її також можна використовувати на зображеннях. Але це підтримується не всіма браузерами. Нижче описано, як окремо можна використовувати властивість непрозорості:

p { background-color: rgb(255,0,0); opacity: 0.5; }

Використання кольорів HSL у CSS

CSS3 має додаткову можливість визначати колір за допомогою методу HSL. HSL означає відтінок, насиченість, легкість і має три значення:

  • Відтінок – це ступінь, зазначена у колірному колі з посиланнями на 0 = червоний, 120 = зелений, 240 – синій.
  • Насиченість – це відсоткове значення сірого кольору.
  • Світлість – це відсоткове значення світлого або темного, де 0% темного (чорний) і 100% світлого (білого).

Нижче наведено приклад створення зеленого фону з кольором HSL у CSS:

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL з непрозорістю

Подібно до RGBA, ви також можете додати непрозорість до кольору HSL як четверте значення. Непрозорість або альфа вказується десятковим числом від 0,0 до 1,0, де 0,0 означає повністю прозору, а 1,0 – непрозору. Нижче наведено приклад створення зеленого кольору з непрозорістю 50% за допомогою оголошення HSLA у CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

Наступні рамки демонструють зелений колір на різних рівнях альфа:

Підручник з кольорів CSS для початківців

Повний приклад використання кольорів у CSS

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

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

Остаточний результат буде показаний так:

Ось елемент абзацу.

Це заголовок H2.

Ось ще один абзац.
Це підкреслений текст всередині абзацу.
Це підкреслений текст поза абзацом.

  • Якщо ви визначаєте кілька кольорів у CSS для одного і того ж елемента, останній матиме пріоритет над усіма попередніми оголошеннями. У наведеному вище прикладі з цієї причини абзац матиме колір #ffffff.
  • Конкретні стилі матимуть пріоритет над батьківським або загальним стилем. Колір h1 буде #008754, а не жовтий.
  • Ви також можете використовувати властивість скорочення фону для визначення кольору фону.

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

Джерело запису: www.webnots.com

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі