Что такое классы
Продолжим изучение CSS на реализации стилей на нашем сайте. Посмотрите на дизайн. Видите крупные закруглённые картинки с зелёными логотипами? Видите чёрную кнопку «Отправить» с закруглёными краями? Видите ссылку внизу страницы «Наша история», оформленные определённым образом? Всё это делается через CSS с помощью классов.
Классы — это способ присвоить имя элементу или группе элементов и применить к ним особые стили. Представьте школьный класс. Учитель говорит: «Все откройте учебники». Это как селектор по тегу, обращение ко всем. Учитель говорит: «Группа А, выходите к доске». Это как класс, обращение к конкретной группе.
В HTML добавляете атрибут class к элементу. В CSS пишете правила для этого класса с точкой перед именем. Класс можно использовать многократно: добавьте его десяти элементам, все получат одинаковые стили.
Стилизация картинок
Начнём с картинок. На главной странице ADC видите фотографию студентов за компьютерами? Картинка большая, занимает пространство, с закруглёными углами. Без стилей картинка была бы в полный размер, растянутая или сжатая.
У нас уже есть HTML с картинкой, добавим к нему класс:
<section class="about-section">
<h2>Наш ADC</h2>
<img src="students.png" alt="Студенты Школы дизайна" class="hero-image" />
<h3>Наша история</h3>
<p>
История создания и развития ADC — как идея объединения дизайна и
программирования переросла в активное комьюнити.
</p>
<button>Посмотреть</button>
</section>Класс hero-image присвоен картинке. Теперь в CSS оформите её:
.hero-image {
width: 100%;
max-width: 1048px;
border-radius: 12px;
}width: 100% растягивает картинку на всю ширину контейнера. max-width: 1048px ограничивает максимальную ширину. border-radius: 12px закругляет углы.
Тот же класс добавьте и картинке перед формой. У неё таже ширина и скругление краёв. А высоту браузер автоматически расчитает с учетом соотношения сторон.
У нас есть самая большая картинка после заголовка «ADC Community», давайте стилизуем её, но сначала добавим класс:
<h1>ADC Community</h1>
<img src="main.png" alt="Митап в Школе дизайна" class="main-picture">Напишем CSS:
.main-picture {
width: 100%;
max-width: 1818px;
border-radius: 12px;
}Стилизация логотипов
Осталось добавить стилей для ссылок в виде картинок, логотипа и телеграм. Обратите внимание, что в хедере размер иконок меньше, чем в футере, нельзя будет просто скопировать класс.
<header>
<img src="logo.png" alt="Логотип ADC" class="logo-image">
<a href="history.html">Наша история</a>
<a href="https://t.me/artdesigncoding">
<img src="telegram.png" alt="Telegram ADC" class="logo-telegram-small">
</a>
</header>
<main>
<!-- Весь наш предыдущий код -->
</main>
<footer>
<a href="history.html">Наша история</a>
<a href="https://t.me/artdesigncoding">
<img src="telegram.png" alt="Telegram ADC" class="logo-telegram-big">
</a>
<p>© ADC Community</p>
</footer>Пропишем CSS свойства:
.logo-image, .logo-telegram-small {
width: 48px;
}
.logo-telegram-big {
width: 54px;
}Посмотрите, если у нас есть классы, у которых повторяются стили, то мы можем их указать через запятую, после поставить фигурные скобки и написать свойства, которые им всем принадлежат.
Стилизация кнопок
Теперь кнопки. На странице регистрации ADC видите чёрную кнопку «Отправить»? Она широкая, закруглённая, с белым текстом. Без стилей кнопка маленькая, серая, непривлекательная.
HTML с кнопкой у нас уже есть, добавим классы:
<form class="contact-form">
<input type="text" placeholder="Имя" class="form-input" required>
<input type="text" placeholder="Фамилия" class="form-input" required>
<input type="tel" placeholder="Номер телефона" class="form-input" required>
<button type="submit" class="submit-button">Отправить</button>
</form>Класс submit-button присвоен кнопке. В CSS оформите её:
.submit-button {
width: 100%;
font-size: 16px;
color: white;
background-color: #313131;
border-radius: 900px;
cursor: pointer;
}padding: 16px 32px делает кнопку высокой, первое значение — это отступы сверху и снизу, а второе соответственно — слева и справа. border-radius: 900px максимально закругляет края. cursor: pointer меняет курсор на руку при наведении. font-size: 16px задает тексту размер. color: white меняет цвет текста на белый, а background-color: #313131 задаёт цвет фону кнопки.
Стилизация полей формы
Теперь поля формы. На главной странице видите три светло-серых поля для ввода? Они широкие, с отступами внутри, без рамок. Класс form-input уже присвоен им выше.
В CSS оформите поля:
.form-input {
width: 100%;
font-size: 16px;
border-radius: 8px;
background-color: #E5E5E5;
}
.form-input::placeholder {
color: #898A93;
}Здесь всё нам знакомо, кроме placeholder. Он стилизует текст подсказки внутри полей формы.
Стилизация ссылок
Теперь ссылки. Внизу страницы ADC видите навигацию «Наша история»? Ссылка чёрная без подчёркивания. По умолчанию браузер показывает ссылки синими с подчёркиванием.
Добавим ссылке класс nav-link:
<a href="history.html" class="nav-link">Наша история</a>В CSS оформите:
.nav-link {
color: #313131;
text-decoration: none;
font-size: 16px;
}text-decoration: none убирает подчёркивание.
Присвоим тот же класс и ссылке в хедере:
<header>
<img src="logo.png" alt="Логотип ADC" class="logo-image">
<a href="history.html" class="nav-link">Наша история</a>
<a href="https://t.me/artdesigncoding">
<img src="telegram.png" alt="Telegram ADC" class="logo-telegram-small">
</a>
</header>У нас есть ещё ссылки с иконками, помните?
<a href="https://design.hse.ru/">
<div>
<p>Сайт Школы дизайна</p>
<img src="arrow.svg" alt="Ссылка на сайт Школы дизайна" class="arrow-image">
</div>
</a>
<a href="https://www.hse.ru/">
<div>
<p>Сайт НИУ ВШЭ</p>
<img src="arrow.svg" alt="Ссылка на сайт НИУ ВШЭ" class="arrow-image">
</div>
</a>Добавим стилей картинкам:
.arrow-image {
width: 24px;
}Стилизация секций
Посмотрите на страницу со списком направлений ADC. Видите заголовки «Веб-вёрстка и веб-программирование», «UX/UI дизайн и прототипирование»? Под каждым описание и тонкая серая линия. Это оформление через классы.
Чуть-чуть допишем нашу секцию про программу курса:
<section class="programs-section">
<h2>Что изучают студенты ADC</h2>
<div class="program-item">
<h3 class="program-title">Веб-вёрстка и веб-программирование</h3>
<p class="program-description">
HTML, CSS, JavaScript, создание многостраничных сайтов
</p>
<hr />
</div>
<div class="program-item">
<h3 class="program-title">UX/UI дизайн и прототипирование</h3>
<p class="program-description">Figma, FigJam, интерактивные прототипы</p>
<hr />
</div>
<div class="program-item">
<h3 class="program-title">Креативное программирование, генеративная графика</h3>
<p class="program-description">Статичные и динамические веб-плакаты</p>
<hr />
</div>
</section>Мы обернули блок с контентом в тег <section>, говоря тем самым, что всё, что внутри, связано между собой, а заголовки с параграфами поместили внутрь <div> по той же причине. В дальнейшем это нам очень поможет в правильном расположении элементов между собой.
В CSS оформите секцию:
.programs-section {
max-width: 1048px;
}
.program-title {
font-size: 32px;
color: #313131;
}
.program-description {
font-size: 22px;
color: #313131;
}
.program-item hr {
border: none;
border-top: 1px solid #313131;
}border: none убирает стандартную рамку, border-top: 1px solid #313131 создаёт тонкую серую линию сверху. Каждое направление выглядит как отдельный блок с разделителем.
Позже мы добавим правильные отступы между элементами.
Заключение
Запомните главное. Классы присваиваются через атрибут class в HTML. В CSS пишутся с точкой перед именем. Один класс можно использовать многократно для группы элементов. Картинки стилизуются через border-radius для закругления, max-width для ограничения размера. Кнопки через padding, border-radius, background-color. Поля формы через padding, border, background-color. Ссылки через text-decoration, color.
Стилизуйте также картинки и ссылки на странице статьи.
Как в CSS обратиться к элементу с классом button?
Какое свойство убирает подчёркивание у ссылок?
Какое свойство закругляет углы элемента?
Классы в CSS — справочник на MDN