Оформление стилей элемента с кастомным классом

Обратите внимание!

Данная статья не заменяет базовых знаний о CSS. Но даёт представление о том, как можно применять CSS в конструкторе страниц.

Чтобы добавить собственную стилизацию элементу, ему нужно добавить класс.

1. Для того, чтобы добавить класс, наведите на нужный элемент и нажмите на шестерёнку.
2. Введите в поле теги смысловой класс на английском языке, например: form-01__title, form-01__text, form-01__btn и т.д.
3. Сохраняем настройки.

Чтобы добавить блок стилей, нужно:

1. Зайти в список создаваемых элементов
2. Выбрать пункт меню «Вставка»
3. Выбрать блок «CSS-код»

В нашем примере использовался следующий список классов:

• form-01__title — для заголовка
• form-01__text — для текста под заголовком
• form-01__input — для полей
• form-01__btn — для кнопок

Это не значит, что вы должны делать точно так же, это лишь название элемента. Название классов вы можете выбрать сами, но это ещё не всё.

Рассмотрим примеры использования селекторов, к которым нужно обращаться, когда вы хотите изменить стилевые свойства у элемента:

1) Для заголовка

.ваш-класс-заголовка .f-header > p {

 text-decoration: underline;

}

2) Для текста

.ваш-класс-текста .f-text > p { color: blue;

 text-decoration: line-through;

}

3) Для поля

.ваш-класс-поля .field-content > input {

border-color: red;

}

4) Для заголовка рядом с полем

.ваш-класс-поля .field-content > .field-label {

 color: green;
 border: 1px solid blue;

}

5) Для кнопки

.ваш-класс-кнопки > button.f-btn {

 text-transform: uppercase;
 border-radius: 30px;
 transition: all .3s;

}

6) Для кнопки при наведении

.ваш-класс-кнопки > button.f-btn:hover {

 border-radius: 20px;

}

7) Для кнопки при нажатии на кнопку

.ваш-класс-кнопки > button.f-btn:active {

 border-radius: 10px;

}

Рассмотрим пример использования кода:

Результат применения описанного кода: