У кодуванні часто існує багато різних рішень даної проблеми. Це особливо актуально, коли справа стосується стилізації елемента HTML.
Змінити одне з найпростіших - це колір тексту. Але іноді здається, що нічого, що ви намагаєтесь, не працює:
h2 .red-text { color: red; } CatPhotoApp
То як можна змінити колір елемента H2 на червоний?
Варіант №1: Вбудований CSS
Одним із способів було б використання вбудованого CSS для стилізації елемента безпосередньо.
Як і в інших методах, форматування є важливим. Погляньте ще раз на код вище:
CatPhotoApp
Щоб використовувати вбудований стиль, обов’язково використовуйте styleатрибут та оберніть властивості та значення у подвійні лапки ("):
CatPhotoApp
Варіант No2: Використовуйте селектори CSS
Замість того, щоб використовувати вбудований стиль, ви можете відокремити свій HTML або структуру та вміст сторінки від стилю або CSS.
По-перше, позбудьтеся вбудованого CSS:
h2 .red-text { color: red; } CatPhotoApp
Але потрібно бути обережним щодо використовуваного вами селектора CSS. Погляньте на елемент:
h2 .red-text { color: red; }Коли є пробіл, селектор h2 .red-textкаже браузеру націлити елемент на клас, red-textякий є дочірнім h2. Однак у елемента H2 немає нащадка - ви намагаєтесь стилізувати сам елемент H2.
Щоб виправити це, видаліть пробіл:
h2.red-text { color: red; }Або просто націліться на red-textклас безпосередньо:
.red-text { color: red; }