Важно отметить!
Эта статья не заменяет основных знаний о CSS, но предоставляет представление о том, как можно использовать CSS в конструкторе страниц.
1. Добавление класса
Для того чтобы придать элементу собственный стиль, необходимо присвоить ему класс.
Для добавления класса следует навести курсор на нужный элемент и нажать на иконку шестеренки. Введите в соответствующее поле смысловой класс на английском языке, например: form-01__title, form-01__text, form-01__btn и так далее. После этого сохраните изменения.
2. Создание блока стилей
Для вставки блока стилей выполните следующие шаги:
- Перейдите в список создаваемых элементов.
- Выберите опцию "Вставка" в меню.
- Выберите блок "CSS-код".
3. Список возможных селекторов
В приведенном примере мы использовали следующий набор классов:
ваш-класс-заголовка— для заголовка,ваш-класс-текста— для текста под заголовком,ваш-класс-поля— для полей,ваш-класс-кнопки— для кнопок.
Эти наименования классов можно выбирать самостоятельно, они представляют собой всего лишь имена элементов. Важно также учесть следующие примеры использования селекторов для изменения стилевых свойств элементов:
Рассмотрим примеры использования селекторов, к которым нужно обращаться, когда вы хотите изменить стилевые свойства у элемента:
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;
}
авторизуйтесь