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

Важно отметить!

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

Для того чтобы придать элементу собственный стиль, необходимо присвоить ему класс.

Для добавления класса следует навести курсор на нужный элемент и нажать на иконку шестеренки. Введите в соответствующее поле смысловой класс на английском языке, например: form-01__title, form-01__text, 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;

}