Застосування кольору до HTML-елементів за допомогою CSS

Використання кольору - одна з фундаментальних форм людського сприйняття, тому діти експериментують із кольором ще до того, як починають усвідомлено малювати. Можливо, саме тому колір – одна з перших речей, з якою люди хочуть експериментувати, вивчаючи розробку веб-сайтів. За допомогою CSS, існує безліч способів присвоїти колір HTML елементам, щоб надати їм бажаного вигляду. Ця стаття дає базові уявлення про всі засоби застосування кольору до HTML-елементів за допомогою CSS.

На щастя, присвоїти колір до HTML-елементу дуже просто, і це можна зробити практично з усіма елементами.

Завершимо ми статтю роздумами на тему як використовувати колір з розумом: як вибрати відповідний колір, враховуючи потреби людей з різними візуальними здібностями.

Що може мати колір

На рівні елементів HTML, усьому можна присвоїти колір. З точки зору окремих складових елементів, таких як текст, межі і т.д., існує ряд властивостей CSS, за допомогою яких можна надати колір.

На фундаментальному рівні властивість color визначає колір тексту HTML-елемента, а властивість background-color - колір фону елемента. Вони працюють практично всім елементів.

Текст

Ці властивості використовуються для визначення кольору тексту, його фону та будь-якого оформлення тексту.

Властивість color застосовується до тексту та будь-якого оформлення тексту, наприклад: підкреслення, лінії на текст, перекреслення тощо.

Додає та встановлює параметри тіні для тексту. Один із параметрів тіні - це основний колір, який розмивається та змішується з кольором фону на основі інших параметрів. Див. Text drop shadows, щоб дізнатися більше.

За замовчуванням елементи оформлення тексту (підкреслення, перекреслення) використовують колір якості color . Але можна привласнити інший колір за допомогою властивості text-decoration-color .

Колір, який використовується для виділення діакритичних знаків, прилеглих до кожного символу. Ця властивість використовується переважно для східноазіатських мов.

Колір для каретки (курсора введення тексту). Застосовується лише до редагованих елементів, таких як і або елементів, для яких встановлено атрибут contenteditable.

Блоки

Кожен елемент є прямокутним блоком з якимось вмістом, фоном і кордоном.

Див. розділ Borders з переліком властивостей CSS, за допомогою яких можна надати колір межам блоку.

Колір ліній, які поділяють стовпці тексту.

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

Межі

Навколо будь-якого елемента можна створити кордон, тобто. лінії навколо вмісту елемента. Див. Box properties, щоб дізнатися більше про відносини між елементами та їх межами, та статтю Оформляємо Кордони з Допомога CSS, щоб дізнатися більше про те, як застосовувати стилі до кордонів.

Існує короткий запис border, який дозволяє задати відразу всі властивості кордону, включаючи навіть не пов'язані з кольором властивості, такі як товщина лінії (width), стиль лінії (style): суцільна (solid), штрихова (dashed) і таке інше.

Задає колір для всіх сторін межі елемента.

Дозволяє встановити колір відповідній стороні межі елемента: border-left-color - ліва межа, border-right-color - права, border-top-color - верхня, border-bottom-color - нижня.

За допомогою цих властивостей ви можете встановити колір меж, які розташовані найближче до початку та кінця блоку. Для писемності зліва направо початок кордону блоку - верхній край, а кінець - нижній. Не плутайте з початком та кінцем рядка, де початок – це лівий край, а кінець – правий.

Ці властивості визначають колір кордону, розташованої найближче до початку та кінця тексту в блоці. Сторона початку і кінця залежить від властивостей writing-mode, direction і text-orientation, які зазвичай (але не завжди) використовуються для налаштування напряму тексту. Наприклад, якщо текст відображається праворуч наліво, то border-inline-start-color застосовується до правої сторони кордону.

Як можна ще використовувати колір

CSS не єдина web-технологія, яка підтримує колір.

Дозволяє створювати растрову 2D-графіку в елементі . Див. Canvas tutorial, щоб дізнатися більше.

SVG (Scalable Vector Graphics - Векторна Графіка, Що Масштабується)

Дозволяє створювати зображення за допомогою команд, що малюють певні фігури, візерунки, лінії для створення кінцевого зображення. Команди SVG форматуються в XML, і можуть розміщуватись безпосередньо на веб-сторінці, або в елементі , як і будь-яке інше зображення.

Бібліотека Веб-Графіки (The Web Graphics Library) – це кросплатформний API на основі OpenGL ES, використовується для створення високопродуктивної 2D та 3D-графіки у браузері. Див. Learn WebGL for 2D and 3D, щоб дізнатися більше.

Як задати колір

Для того, щоб задати колір у CSS, необхідно знайти спосіб перевести поняття "колір" в цифровий формат, який може використовувати комп'ютер. Зазвичай це роблять розбиваючи колір на компоненти, наприклад скільки одиниць основних кольорів міститься в даному кольорі або ступінь яскравості. Відповідно, є кілька способів, як можна задати колір у CSS.

Докладніше про кожен значення кольору можна прочитати в статті про CSS .

Ключові слова

Існує набір назв кольорів стандартної палітри, який дозволяє використовувати ключові слова замість числового значення кольору.Ключові слова включають основні і вторинні кольори (такі як червоний (red), синій (blue), або помаранчевий (orange)), відтінки сірого (від чорного (black) до білого (white)), включаючи такі кольори як темно-сірий (darkgray) або світло-сірий (lightgrey)), а також безліч інших змішаних кольорів: lightseagreen , Cornflowerblue , і rebeccapurple .

Див. Color keywords – повний перелік усіх доступних ключових слів.

RGB значення

Існують три способи передачі RGB кольору в CSS.

Шістнадцятковий запис у вигляді рядка

Шістнадцятковий запис передає колір, використовуючи шістнадцяткові числа, які передають кожен компонент кольору (червоний, зелений та синій). Запис може також включати четвертий компонент: альфа-канал (або прозорість). Кожен компонент кольору може бути представлений як число від 0 до 255 (0x00-0xFF) або, опціонально, як число від 0 до 15 (0x0-0xF). Кожен компонент необхідно задавати, використовуючи однакову кількість чисел. Так, якщо ви використовуєте однозначне число, то підсумковий колір розраховується, використовуючи число кожного компонента двічі: "#D" перетворюється на "#DD" .

Колір у шістнадцятковому записі завжди починається із символу "#". Після нього починаються шістнадцяткові числа колірного коду. Запис залежить від регістру.

Задає повністю непрозорий колір, у якого компонент червоного кольору представлений шістнадцятковим числом 0xrr, зеленого – 0xgg та синього – 0xbb.

Задає колір, у якого компонент червоного представлений шістнадцятковим числом 0xrr, зеленого – 0xgg та синього – 0xbb. Альфа канал представлений 0xaa; що нижче значення, то прозоріше стає колір.

Задає колір, у якого компонент червоного представлений шістнадцятковим числом 0xr, зеленого – 0xg та синього – 0xb.

Задає колір, у якого компонент червоного представлений шістнадцятковим числом 0xr, зеленого – 0xg та синього – 0xb. Альфа канал представлений 0xa; що нижче значення, то прозоріше стає колір.

Наприклад, ви можете уявити непрозорий яскраво-синій колір як "#0000ff" або "#00f". Для того, щоб зробити його на 25% прозорим, ви можете використовувати "#0000ff44" або "#00f4".

RGB запис у вигляді функції

RGB запис у вигляді функції, як і шістнадцятковий запис, представляє колір, використовуючи червоний, зелений і синій компоненти (також опціонально можна використовувати компонент альфа каналу для прозорості). Але, замість використання рядка, колір визначається CSS функцією rgb() . Ця функція приймає як вступні параметри значення червоного, зеленого і синього компонентів і, опціонально, четвертого компонента - значення альфа каналу.

Допустимі значення для кожного з цих параметрів:

Альфа канал - це числове значення між 0.0 (повністю прозорий) та 1.0 (повністю непрозорий). Також можна вказати значення у відсотках, де 0% відповідає 0.0, а 100% – 1.0.

Наприклад, яскраво-червоний з 50% прозорістю може бути представлений як rgb(255, 0, 0, 0.5) або rgb(100%, 0, 0, 50%).

HSL запис у вигляді функції

Дизайнери часто вважають за краще використовувати колірну модель HSL, де H - Hue (відтінок), S - Saturation (насиченість), L - Lightness or Luminance (світло). У браузерах HSL колір представлений через запис HSL як функції. CSS функція hsl() дуже схожа на функцію rgb().

Мал. 1. Циліндрична модель HSL. Hue (відтінок) визначає фактичний колір, заснований на положенні вздовж кольору, представляючи кольори видимого спектра. Saturation (насиченість) є відсотковим співвідношенням відтінку від сірого до максимально насиченого кольору. У міру збільшення значення luminance/lightness (світлоти) колір переходить від темного до самого світлого (від чорного до білого). Зображення представлене користувачем SharkD у Wikipedia, що поширюється на правах ліцензії CC BY-SA 3.0.

Значення компонента відтінок (H) колірної моделі HSL визначається кутом при русі вздовж кола циліндра від червоного через жовтий, зелений, блакитний, синій та маджента, і закінчуючи через 360° знову червоним. Це значення визначає базовий колір. Його можна задати в будь-яких одиницях, що підтримуються CSS-властивістю, а саме - в градусах (deg), радіанах (rad), градієнтах (grad) або поворотах (turn). Але компонент відтінок ніяк не впливає на те, наскільки насиченим, яскравим чи темним буде колір.

Компонент насиченість (S) визначає кількість кінцевого кольору, з якого складається вказаний відтінок. Решта визначається рівнем сірого кольору, який вказує компонент luminance/lightness (L).

Подумайте про це як про створення ідеального кольору фарби:

1. Ви починаєте із базової фарби, тобто. з максимально можливою інтенсивністю цього кольору. Наприклад, найбільш насичений синій, який може бути на екрані користувача. Це компонент hue (відтінок): значення, що представляє кут навколо колірного кола для насиченого відтінку, який ми хочемо використовувати як нашу базу.
2. Далі оберете фарбу сірого відтінку, яка буде відповідати тому, наскільки яскравим ви хочете зробити колір. Це luminance/lightness (яскравість). Ви хочете, щоб колір був дуже яскравим, практично білим або дуже темним, ближче до чорного, чи щось середнє? Даний компонент визначається у відсотках, де 0% - досконалий чорний колір та 100% - досконалий білий (незалежно від насиченості або відтінку). Середні значення – це буквальна сіра область.
3. Тепер, коли у вас є сірий колір і ідеально насичений колір, вам необхідно їх змішати. Компонент saturation (насиченість) визначає, який відсоток кінцевого кольору повинен складатися з ідеально насиченого кольору. Залишок кінцевого кольору формується сірим кольором, що становить насиченість.

Опціонально ви також можете увімкнути альфа-канал, щоб зробити колір менш прозорим.

Ось кілька прикладів кольору в HSL запису:

Color in HSL notation
Example



hsl(90deg, 100%, 50%)
 

hsl(90, 100%, 50%)
 

hsl(0.15turn, 50%, 75%)
 

hsl(0.15turn, 90%, 75%)
 

hsl(0.15turn, 90%, 50%)
 

hsl(270deg, 90%, 50%)
 

Примітка: Зверніть увагу, що коли ви не вказуєте одиницю вимірювання відтінку (hue), то передбачається, що він вказаний у градусах ( deg ).

Використання кольору

Тепер, коли ви знаєте які існують властивості CSS для присвоєння кольору до елементів і які формати опису кольору, ви можете з'єднати це разом, щоб почати використовувати колір. Як ви вже бачили у списку під розділом Що може мати колір, існує безліч речей, до яких можна застосувати колір за допомогою CSS. Погляньмо на це з двох сторін: використовувати колір у таблицях стилів (stylesheet) і додавати, змінювати колір, використовуючи JavaScript код.

Колір у таблицях стилів CSS

Найпростіший спосіб привласнити колір елементу і те, як це зазвичай робиться - це просто вказати колір CSS. Ми не будемо зупинятися на кожній із вищезгаданих властивостей, а просто розглянемо кілька прикладів. Де б ви не використовували колір, принцип той самий.

Давайте почнемо наш приклад із результату, якого нам потрібно досягти:

HTML

HTML, який створює вищезгаданий приклад:

Це є перша коробка.

Це є другий box.

Все диво, як завжди, відбувається в CSS, де ми і будемо надавати колір до даних HTML-елементів.

CSS

CSS розглянемо детальніше, щоб по черзі проаналізувати всі цікаві частини.

Але найбільше нас цікавить властивість межа border, яка встановлює межу навколо зовнішнього краю елемента. Дана межа представлена ​​суцільною лінією, шириною 6 пікселів, світло-бірюзового кольору (mediumturquoise).

Два кольорові блоки мають ряд однакових властивостей, тому далі встановимо клас .box , який визначить ці загальні властивості:

Коротко клас .box встановлює розмір кожного блоку та параметри шрифту.Також ми використовуємо CSS Flexbox, щоб легко відцентрувати вміст кожного блоку. Ми включаємо режим flex за допомогою display: flex , і присвоюємо значення центр justify-content і align-items. Потім ми створюємо окремі класи кожного з двох блоків, які визначать індивідуальні властивості.

Клас .boxLeft , який використовується для стилізації лівого блоку, вирівнює контейнер по лівому краю і надає кольори:

• background-color визначає колір фону блоку значенням rgb(245, 130, 130).
• outline, на відміну від звичного нам властивості border, не впливає на положення блоку та його ширину. Outline представлений суцільною, темно-червоною лінією, шириною 2 пікселі. Зверніть увагу на ключове слово darkred, яке використовується для визначення кольору.
• Зверніть увагу, що ми не визначаємо значення кольору тексту. Це означає, що властивість color буде успадковано від найближчого батьківського елемента, у якого ця властивість визначена. За промовчанням це чорний колір.

Клас .boxRight визначає властивості правого блоку. Блок вирівнюється праворуч і стає поруч із попереднім блоком. Потім визначаються такі кольори:

• background-color визначається значенням HSL: hsl(270deg, 50%, 75%). Це світло-фіолетовий колір.
• Outline блоку визначає, що навколо блоку має бути переривчаста лінія, шириною в чотири пікселі, фіолетового кольору трохи темніше, ніж колір фону (rgb(110, 20, 120)).
• Колір тексту визначається властивістю color, значення якого hsl(0deg, 100%, 100%). Це один із багатьох способів задати білий колір.
• За допомогою text-decoration ми додаємо зелену хвилясту лінію під текстом.
• І нарешті, властивість text-shadow додає невелику темну чорну тексту.

Надаємо можливість користувачеві вибрати колір

Там є багато місць в яких ваш веб-сайт може необхідний для того, щоб скористатися кольором. Perhaps You have customizable user interface, або you're implementing a drawing app.Maybe ви маєте editable text і потрібний для літа користувача, щоб вибрати колірний текст. Або припустити вашу app lets the user assign colors for folders or items. Більше історично, що це буде необхідно до виконання вашого свого кольорового picker, HTML зараз забезпечує support для браузеров для забезпечення одного для вашого використання через елемент, за допомогою "color" як значення його типу типу.

Елемент представляє фарбу тільки в hexadecimal string notation охопленого вище.

Example: Picking a color

Let's look at simple simple example, у яких користувач може choose a color. Як user adjusts the color, the border around the example changes to reflect the new color. Після завершення і зафіксувати кінець кольору, чорний picker's value is displayed.

Примітка: На macOS, ви знайдете те, що ви зробили зйомку кольору під час забарвлення чорний picker window.

HTML

HTML є створеними в коробці, що містить чорний контроль пікселя (з міткою, створеної за допомогою елемента) і empty paragraph element ( ) в якому ми будемо випускати деякий текст з нашого JavaScript code.

CSS

CSS simple establishes a size for box and some basic styling for appearances. Border є також встановлений з 2-pixel width and border color that won't last, courtesy of the JavaScript below.

JavaScript

Підпис сюди спрямовує штрих updating starting color of border to match color picker's value. Там є два варіанти handlers є прихильним до майна з введенням з елемента.

let colorPicker = document.getElementById("colorPicker"); let box = document.getElementById("box"); let output = document.getElementById("output"); box.style.borderColor = colorPicker.value; colorPicker.addEventListener( "input", function (event) < box.style.borderColor = event.target.value; >, false, ); colorPicker.addEventListener( "change", function (event) < output.innerText = "Color set to " + colorPicker.value + "."; >, false, );

The input event is sent every time the value of the element changes; that is, every time the user adjusts the color в color picker. Всі часи цієї угоди, ми маємо box's border color to match the color picker's current value.

Зміна, яку можна отримати, коли кольоровий picker's value is finalized. We respond by setting the contents of the

element with the ID "output" to a string describing the finally selected color.

Using color wisely

Make the right choices коли selecting colors when designing web site може бути тріски процеси, особливо якщо ви не є добре розрізнені в стилі, дизайн, або в глибокий основний колір теорії. Вгору кольоровий вибір може повідомити вашу мережу безперешкодно, або навіть worse, натиснувши вміст необхідний для проблем з contrast або conflicting colors. Worse still, якщо використовувати круті кольори можуть вплинути на ваш вміст, щоб залишатися неможливими для людей з певними поглядами проблем, особливо кольору blindness.

Finding the right colors

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

Base color

The first step is to choose your base color. Це є фарба, що в певній мірі defines свій веб-сайт або суб'єкт matter of the site. Just as we asociated green with beverage mountain daw and one might think of color blue in relationship with sky or the ocean, choosing appropriate base color to represent your site is good place to start. Там є повний спосіб, щоб вибрати колір кольору; a few ideas include:

• Чорнота, що є природно поєднана з манерою свого вмісту, така як існуюча фарба identified з продукцією або ідеєю або фарбою репрезентативної емоції ви будете шукати.
• A color that comes from imagery asocied with what your content is about.Якщо ви створюєте веб-сайт про життєвий пункт або продукт, вибираємо колір, що є фізично визнаним на цьому місці.
• Browse web sites що років ви бачите на безлічі існуючих кольорових palettes і іміджів до find inspiration.

Якщо я хотів би зробити основний колір, ви можете помітити, що браузер розширення, що ви робите кольори з веб-контенту, щоб бути особливо приємним. offers an extension (Chrome / Firefox) that offers an eyedropper інструмент для забарвлення кольорів від веб-сайту.

Примітка: Advantage to averaging colors can be that often what looks like a solid color is actually surprisingly varied number of related colors all used in concert, blending to create a desired effect. its own looks very out of place.

Fleshing out the palette

Одного разу ви будете вирішувати на вашу основу кольору, там є безліч інструментів, які можуть бути використані для palette відповідних кольорів, щоб скористатися вашою основою кольору, використовуючи колір теми до вашої основи кольору, щоб визначити відповідні кольори. tools also support viewing the colors filtered so you can бачити, що вони можуть виглядати як люди з різними формами кольору blindness.

Більшість прикладів (все, що можна використовувати як час, цей лист був останньою зміною):

Якщо designing вашу palette, тому що, щоб пом'якшити в думці, що в додатку до кольорів цих інструментів типово генерується, ви збираєтеся також потрібні, щоб скористатися деякими neutral кольори, як білий (або чорний білий), чорний (або найближчий чорний), and some number of shades of gray.

Примітка: Зазвичай, ви far better off використовуючи невелику кількість colors possible.Якщо ви використовуєте фарбу до послідовності, тому що ви можете скористатися кожним, що на сторінці, ви можете написати свій вміст, щоб скористатися ними і фарбами ви будете використовувати більше impact.

Color theory resources

Докладний відгук кольору теорії є за межами цієї сторінки, але є величезна кількість елементів про кольорову теорію доступна, як добре, як курси ви можете піти на близькості школи і університети. A couple of useful resources про color theory:

У режимі он-лайн курси, які встановлюють концепції, так, як колір є, як він розпізнається, і як використовувати кольори до express ideas. Presented by Pixar artists and designers.

Color and accessibility

Існують кілька способів кольору може бути accessibility проблемою. Improper або бездоганний використання кольору може бути результатом в веб-сайті або додатку, що відсоток вашого списку аудиторії може бути неможливим для використання належним чином, в результаті невеликої стратегії, невпинного бізнесу, і можливо навіть громадських відносин проблеми. Тож це важливо для розгляду вашого використання кольору надійно.

Ви повинні дотримуватися глибокого basic research в color blindness. There are several kinds; найбільшим є red-green color blindness, які спричиняють людей до unable to differentiate між colors red і green. Існують інші, те, що змінюються від можливості до тих, що відрізняються між певними кольорами до повної здатності до мети кольору на всіх.

Примітка: Найважливіша мова: невикористання кольору, як тільки вказує на деякий час. Якщо, наприклад, ви нагадуєте успіх або рішучість дій, змінюючи фарбу зображення в білий на green для успіху і červenий для неспроможності, користувачі з červenо-зеленим кольором-безпеки не можуть бути використані для вашого сайту належним чином. Instead, perhaps use both text and color together, так, що кожен може understand what's happening.

Для більш докладної інформації про барвистість, див.

• Medline Plus: Color Blindness (United States National Institute of Health)
• American Academy of Ophthamology: What Is Color Blindness?
• Color Blindness & Web Design (Usability.gov: United States Department of Health and Human Services)

Palette design example

Let's consider quick example of selecting appropriate color palette for a site. Імідж, що ви збираєтеся на веб-сайті для нової гри, що займається місцем на планеті Mars. So let's do a Google search for photos of Mars. Багато чудових прикладів Martian coloration there. We carefully avoid mockups and photos from movies. І ми вирішили використати фото, щоб один з Mars ланцюжки людства були розташовані на території над останніми кількома decades, без гри грати на місці на планеті. We use a color picker tool to select a sample of the color we choose.

Використовуючи eyedropper інструмент, є значущість кольору, як і визначить, що фарба в питанні є #D79C7A , який є пристосований rusty oranžovo-red color that's з стереотипною з Martian surface.

Маючи вибраний наш колір кольору, ми повинні реалізувати свою palette. We decide to use Paletteon to come up with thether colors we need. Upon opening Paletton, we see:

Далі, буде введено наш колірний hex code ( D79C7A ) в "Base RGB" box в нижній частині інструмента:

We now see a monochromatic palette заснований на барвисті we picked from the Mars photo. Якщо вам потрібна велика кількість пов'язаних кольорів для деяких умов, то є добре, щоб бути хорошими ones. Однак, скільки реально want is an accent color. Хтось думає, що буде торкати біля сторони кольору кольору. Для того, щоб зробити те, що натисніть "Add complementary", щоб підняти підготовку до menu, що літа ви можете вибрати тип palette (в даний час "Monochromatic"). Paletton computes an appropriate accent color; натиснувши на сильний колір ліворуч внизу праворуч corner tells us that this color is #508D7C .

Якщо ви нерозумієтеся з фарбою, що вона підходить до вас, ви можете змінити колір scheme, щоб дізнатися, якщо ви бачите, що ви збираєтеся.Для прикладу, якщо ми не можемо написати greenish-blue color, ми можемо клацнути на Triad color scheme icon, які ви можете використовувати з наступним:

Що greyish blue в top-right looks pretty good. Clicking on it, we find that it's #556E8D . Те, що можна використовувати як сильний колір, можна використовувати стійко до того, як вони stand out, так як в headlines або в highlighting tabs або інших indicadors на сайті:

Тепер ми маємо свій колір і наш accent. На верху того, що мають кілька complementary shades of each, just in case we need them for gradients and the like. Colors можуть бути exported в номері форматів, якщо ви можете використовувати їх.

Після того, як ви маєте ці кольори, ви будете доволі потрібні для того, щоб вибрати відповідні neutral кольори. Загальний дизайн працездатності є для того, щоб зробити свіжий кут, де є тільки приємний contrast, що текст є crisp і readable, але не приємний contrast, щоб бути приємним для очей. Це добре для того, щоб скористатися в одному способі або іншим чином, щоб отримати повідомлення про ваші кольори на один раз, які вибрано ним і мають те, що ви можете використовувати. Якщо contrast is too low, ваш текст буде спрямований на те, щоб бути звільнений з background, leaving it unreadable, але якщо ваш contrast is too high, the user may find your site garish and unpleasant to look at.

Дивіться також

Колір заголовка html: Як додати колір фону до заголовка тексту?

»колір заголовкаабо як «Задати/змінити кольори заголовків css/html“. З прикладами та стилями.

Колір заголовка h2-h6 за замовчуванням

Взагалі ... мені самому стало цікаво, а який колір заголовків за умовчанням (я, звичайно, припускаю, що це не наїсти чорний). Перше, що ми зробимо… Якщо ми спробуємо дізнатися, який колір заголовка за промовчанням (властивість тегів за промовчанням).І ми побачимо на скрині, що за замовчуванням немає жодного кольору у заголовка смайли, що автоматично означає найчорніший. Але ми хочемо точно дізнатися!

Дізнаємося колір заголовка за замовчуванням

Змінимо колір у тега заголовка

Тут текст заголовка h2

Колір заголовка

Колір заголовка

Зміна кольору заголовка класом

Ви напевно знаєте, що є деякі атрибути, за допомогою яких ми можемо впливати на властивості тега.

Колір заголовка через class

Код зміни кольору заголовка через атрибут класу:

Колір заголовка через class

Приклад зміни кольору заголовка через атрибут

Колір заголовка через class

Зміна кольору заголовка за допомогою id

Колір заголовка через ID

Код зміни кольору заголовка через ID:

Колір заголовка через ID

Приклад зміни кольору заголовка через ID

Колір заголовка через ID

колір заголовка в html
колір заголовка таблиці html
як змінити колір заголовка в html
як змінити колір заголовка в html
html колір заголовка h
як зробити колір заголовка в html
як задати колір заголовка в html

Як змінити колір заголовків неактивних вікон у Windows 10

Головна » Реєстр Windows 22. 08.2020 Артем Синявин 1 У цій статті показані дії, за допомогою яких можна змінити колір заголовків неактивних вікон в операційній системі Windows 10. У операційній системі Windows 10 заголовки неактивних вікон за промовчанням мають білий колір. Крім того, у налаштуваннях персоналізації відсутні опції для зміни кольору заголовків неактивних вікон. Якщо вас такий стан справ не влаштовує, то за допомогою редактора системного реєстру Windows можна змінити колір заголовків неактивних вікон. Щоб змінити колір заголовків неактивних вікон, спочатку потрібно увімкнути відображення кольору в заголовках активних вікон. Тепер потрібно внести невеликі зміни до реєстру, але перш ніж вносити будь-які зміни до реєстру, настійно рекомендується створити точку відновлення Отже, відкрийте редактор реєстру, для цього натисніть клавіші + R і у вікні Виконати введіть regedit і натисніть клавішу Enter ↵. У вікні редактора реєстру перейдіть наступним шляхом:

Далі, натисніть правою кнопкою миші на розділі DWM або натисніть правою кнопкою миші на порожній області у правій частині вікна та в контекстному меню виберіть Створити > Параметр DWORD (32 біти). Надайте створеному параметру ім'я AccentColorInactive. Потім двічі клацніть на AccentColorInactive і введіть значення з таблиці в полі Значення і натисніть кнопку OK . Зміни набирають чинності відразу. У таблиці нижче представлені основні системні кольори Windows, копіюйте та вставляйте їх як є.

Також вибрати відповідний колір можна за допомогою універсальної палітри кольорів на сайті https://www. microsoft.com/en-us/design/color Скопіюйте потрібний код , а потім, потрібно знати, що для правильного відображення кольорів потрібно поміняти між собою місцями перший і останній байт, тому що Windows як кодування кольорів використовується BGR, а не RGB Наприклад, ви скопіювали колір, що має код 00188F, то для того, щоб отримати правильне відображення темно-синього кольору заголовка вікна, вам потрібно ввести 8F1800, приклад на зображенні нижче. Якщо перший і останній байт мають однакове значення, відповідно нічого змінювати не потрібно. Тепер за допомогою наведених вище дій, можна змінити колір заголовків неактивних вікон.

html - як змінити колір фону заголовка?

запитав 4 роки 5 місяців тому Змінено 4 роки, 5 місяців тому Переглядів 25 тисяч разів Я хочу змінити фон заголовка на червоний в меню навігації.

однак мій html/css не працює належним чином. можеш сказати, що я зробив не так? Я думав, що цей селектор заголовків є контейнером мого розділу topnav.не впевнений, чому зміни кольору фону через стиль заголовка нічого не робить. якщо я поставлю bakcground-color під .topnav a, між плаваючими елементами буде проміжок

<голова> тіло <box-sizing: кордон-коробка; маржа: 0; колір тла: #4c8b41; >заголовок < колір фону: червоний; >.topnav < плисти ліворуч; колір: #f8f8f8; вирівнювання тексту: по центру; текстове оформлення: ні; відступ: 10px 10px; >.topnav: наведіть < колір фону: чорний; >#topnav-право
<тело>
<заголовок>
Головна
Увійти
Зареєструватись

<тело>
<заголовок>
Головна
Увійти
Зареєструватись

Наступне правило працюватиме лише з елементами, що мають , а не з елементом заголовка. Натомість використовуйте: заголовок

Селектори CSS використовують наступний синтаксис:

Зверніть увагу, що тегу нічого не передує, що ви хочете зробити у випадку з заголовком.

ОБНОВЛЕННЯ : Проблема ще й у тому, що елемент заголовка не має висоти, тому фон не видно. Зверніть увагу, що це відбувається через плаваючі теги прив'язки в елементі .topnav . Зверніть увагу на оновлення CSS для .topnav:after, які забезпечують чітке виправлення.

<голова> тіло <box-sizing: кордон-коробка; маржа: 0; колір тла: #4c8b41; >заголовок < колір фону: червоний; >.topnav: після < ясно: обидва; дисплей: блок; зміст: ""; >.topnav < плисти ліворуч; колір: #f8f8f8; вирівнювання тексту: по центру; текстове оформлення: ні; відступ: 10px 10px; >.  topnav: наведіть < колір фону: чорний; >#topnav-право
<тело>
<заголовок>
Головна
Увійти
Зареєструватись

Видаліть крапку, щоб стилі застосовувалися правильно. Синтаксис із точкою призначений для вибору класу. Заголовок – це елемент HTML, тому точка не потрібна. Причина, за якою заголовок не відображає колір фону, полягає в тому, що всі елементи всередині нього налаштовані на плавання. Плаваючі елементи div не впливають на висоту батька. У вашому випадку, оскільки всі елементи плавають, висота батьківського елемента div стає рівною нулю, і, отже, ви не бачите колір тла

, якщо не працює, додайте ідентифікатор до розділу заголовка

<заголовок>
Головна
Увійти
Зареєструватись

подобається це Потім додайте css

Або змініть .header на header в css, або додайте тег to header . Це має вирішити вашу проблему. .header у css відноситься до класу в html.

Редагувати

Схоже, що div заголовок не має висоти. Ось оновлений код.

<тело>
<заголовок>
Головна
Увійти
Зареєструватись

Ви намагаєтеся застосувати CSS до заголовка класу, а не до елемента.

Спробуйте застосувати його до вашого div.

РЕДАКТУВАТИ 2: спробуйте додати висоту

Зареєструйтесь або увійдіть до системи

Зареєструйтесь за допомогою Google

Зареєструватися через Facebook

Зареєструйтесь, використовуючи електронну пошту та пароль

Опублікувати як гість

Обов'язково, але не відображається

Опублікувати як гість

Потрібно, але не відображається

як змінити колір заголовка в HTML

Немає відповіді на це запитання.

Ваша відповідь

Пов'язані питання в HTML

Чи можна друкувати сторінки HTML із унікальним … ДЕТАЛЬНІШЕ

12 липня 2022 р. в HTML від Ашвіні • 2,960 балів • 1819 переглядів

• CSS
• заголовок
• друк
• таблиця стилів
• нижній колонтитул

Я використовував Градієнт, щоб встановити колір. ДЕТАЛЬНІШЕ

26 липня 2022 р. в HTML від Ашвіні • 2960 балів • 309Перегляди

На моїй сторінці HTML/JS є … ДЕТАЛЬНІШЕ

19 серпня 2022 р. в HTML від Теджашвіні • 540 балів • 67 переглядів

як додати прогалину в HTML крім ... ДЕТАЛЬНІШЕ

3 червня 2022 р. в HTML від Теджашвіні • 3 470 балів • 78 переглядів

Я спробував змінити колір заповнювача. ДЕТАЛЬНІШЕ

4 липня 2022 р. в HTML від Теджашвіні • 3 470 балів • 57 переглядів

Мені потрібно створити вертикальну лінію. ДЕТАЛЬНІШЕ

4 липня 2022 р. в HTML від Теджашвіні • 3 470 балів • 67 переглядів

ПРИВІТ.. SQL — це мова структурованих запитів, яка … ДЕТАЛЬНІШЕ

відповів 8 серпня 2020 р. в PHP від ​​анонімний • 5859 переглядів

Так, ти можеш. Просто зворотна коса риса (\) двокрапка. Подобається… ДЕТАЛЬНІШЕ

відповів 14 листопада 2018 р. в інших від ДатаКінг99 • 8 240 балів • 1867 переглядів

CSS Selector є комбінацією елементів … ДЕТАЛЬНІШЕ

відповів 21 листопада 2018 р. в аналітиці даних від Калги • 52 350 балів • 358 переглядів

• css-селектор
• CSS
• р-програмування
• HTML
• перегляд веб-сторінок
• веб-скрейпінг із використанням r

Div слід використовувати для перенесення розділів. ДЕТАЛЬНІШЕ

відповів 16 січня 2020 р. у веб-розробці від Нірадж
редаговано 21 січня 2020 р. від Нірой • 2541 перегляд