Научись точно нацеливаться на элементы с помощью селекторов по тегу, классу и id, а затем задавать им цвета.
Открыть этот урок в KodokonСелектор - это часть правила CSS, которая говорит, какие элементы оформлять. Самый простой из них - селектор по тегу: ты пишешь имя тега, без угловых скобок. p нацелен на каждый абзац, h1 - на каждый заголовок верхнего уровня. Это работает хорошо, но иногда слишком широко: а что если ты хочешь покрасить только один абзац из десяти? Вот здесь на сцену выходят классы и id.
Класс - это метка, которую ты вешаешь на один или несколько HTML-элементов с помощью атрибута class. Со стороны CSS ты нацеливаешься на неё через точку: .important выбирает каждый элемент с class="important". Id - это уникальная метка: она должна встречаться на странице только один раз, например на шапке. Со стороны CSS ты нацеливаешься на него через решётку: #header.
<h1 id="main-title">My cooking blog</h1>
<p class="highlight">Recipe of the day: the pie.</p>
<p>A perfectly ordinary paragraph.</p>
<p class="highlight">Tip: preheat the oven.</p>#main-title {
color: darkgreen;
}
.highlight {
background-color: yellow;
}
p {
color: black;
}В этом примере заголовок становится тёмно-зелёным, два абзаца с меткой highlight получают жёлтый фон (background-color задаёт цвет фона), а у каждого абзаца чёрный текст. Запомни разницу: класс многоразовый, его можно повесить на сколько угодно элементов, а id уникален в пределах страницы. Если сомневаешься - используй класс.
Теперь поговорим о цветах. CSS принимает несколько записей. Названия цветов (red, blue, orange...) просты, но их выбор ограничен. Шестнадцатеричная запись начинается с #, за которым идут шесть символов, дозирующих красный, зелёный и синий: #ff0000 - чистый красный. Наконец, запись rgb() выражает те же дозы числами от 0 до 255: rgb(255, 0, 0) - тоже чистый красный.
.highlight {
color: tomato;
background-color: #fff3cd;
}
#main-title {
color: rgb(0, 100, 0);
}class="menu"?