CSS собственной HTML-вставки может неожиданно изменить заголовки, ссылки и кнопки всего сайта. Причина часто в слишком общем селекторе: правило для p или a применяется далеко за пределами учебного блока. Ограничивайте стиль собственным контейнером и проверяйте соседние элементы.
Найдите область действия
В учебном примере T123 содержит карточку с пояснением. Нужен цвет текста только этой карточки. Правило p { color: ... } затронет обычные абзацы страницы. Вместо него используйте уникальный класс контейнера.
Названия должны отличаться от распространённых системных классов. Класс вроде button может совпасть с другим кодом; pp-note-demo понятнее ограничивает конкретную вставку. Уникальность класса не обеспечивает безопасность или изоляцию данных: это способ управлять стилями.
Самостоятельный пример
Добавьте T123 из категории «Другое» и вставьте учебный HTML/CSS:
<style>
.pp-note-demo {
padding: 24px;
border: 1px solid #c8d0df;
border-radius: 12px;
}
.pp-note-demo p {
margin: 0;
color: #24324a;
}
.pp-note-demo a {
text-decoration: underline;
}
</style>
<div class="pp-note-demo">
<p>Подготовьте содержание перед сборкой страницы.
<a href="/contacts">Обсудить задачу</a>
</p>
</div>Замените адрес действующим. Каждый дочерний селектор начинается с класса контейнера. Поэтому правило абзаца не применяется к обычному тексту вне него. Размеры и цвета учебные; выбирайте их по фактическому дизайну и контрасту.
Что проверить в чужом коде
- Найдите селекторы без собственного префикса: body, p, a, *.
- Проверьте, нужны ли они для задачи одной вставки.
- Ограничьте локальные правила контейнером.
- Проверьте ID на уникальность, если они используются в JavaScript.
- Не меняйте системные классы Tilda без понимания конкретного элемента и проверки.
Официальная справка Tilda рекомендует уникальные имена классов и ID и предупреждает о влиянии общей стилизации. T123 выполняет код после публикации, поэтому редакторская картинка не является окончательной проверкой.
Приёмка и откат
Откройте опубликованную страницу. Сравните вставку, первый экран, обычные абзацы, меню и форму. На телефоне проверьте ширину, переносы, внутренние отступы и кнопку. С клавиатуры убедитесь, что ссылка сохранила видимый фокус.
Если соседний блок изменился, найдите конкретное правило, а не добавляйте глобальный сброс в противоположную сторону. Для отката удалите или отключите только собственный стиль и повторите проверку. Код в общих настройках сайта может действовать сразу на нескольких страницах, поэтому его область особенно важно знать.
- Изменились все ссылки: проверьте общий селектор a.
- Вставка не стилизуется: сравните класс HTML и селектор.
- Правило перекрыто: исследуйте порядок и специфичность, не начинайте с массового !important.
- Текст на телефоне обрезан: проверьте свои фиксированные размеры.
Продолжите с фокусом и повторным подключением скриптов. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.