Важно: эта статья не предназначена для изучения основ CSS, но поможет понять, как использовать CSS-правки в конструкторе страниц и применять их на практике.

1. Как добавить CSS-класс

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

Для этого:

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

2. Как добавить блок со стилями (CSS)

Чтобы вставить собственный CSS-код на страницу, выполните следующие шаги:

1. Перейдите в список доступных элементов при редактировании страницы;

2. Выберите раздел «Вставка»;

3. Найдите и добавьте блок «CSS-код» — в него вы сможете внести свои стили.

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

3. Примеры CSS-селекторов для настройки элементов

В примере использовались следующие классы:

form-01__title — для заголовка

form-01__text — для текста под заголовком

form-01__input — для полей

form-01__btn — для кнопок

Это лишь примеры — вы можете задавать собственные названия классов. Главное — знать, к какому элементу вы хотите применить стиль. Ниже представлены примеры CSS-селекторов, которые можно использовать для настройки разных элементов:

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; }

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

Визуальный результат применения CSS: