Как добавить пользовательский CSS на любой сайт — руководство для новичков

16 мая 2026 · автор JustZix Team

Хочешь изменить, как выглядит сайт — скрыть раздражающий элемент, исправить нечитаемый шрифт или расширить тесную верстку? Это дружелюбное к новичкам руководство показывает, как добавить пользовательский CSS на любой сайт, разбирает честные плюсы и минусы каждого метода и заканчивается практическим разбором, который ты можешь повторить уже сегодня.

Что на самом деле означает «пользовательский CSS»

Каждая веб-страница стилизована с помощью CSS — Cascading Style Sheets — правил, которые управляют цветами, шрифтами, отступами и версткой. «Пользовательский CSS» означает твой собственный дополнительный CSS, наложенный поверх стилей сайта и применяемый только в твоём браузере. Сайт не меняется ни для кого другого. Ты ничего не взламываешь; ты подстраиваешь, как страница представлена тебе, во многом как Режим чтения или блокировщик рекламы.

Метод 1 — DevTools (временно, отлично для тестирования)

В каждом современном браузере есть встроенные Инструменты разработчика. Нажми F12 (или щёлкни по элементу правой кнопкой и выбери «Просмотреть код»). В панели Styles ты можешь редактировать CSS вживую и видеть результат мгновенно.

Загвоздка: это временно. Как только ты перезагрузишь страницу, всё сбросится. DevTools идеален, чтобы понять, какой CSS тебе нужен, но это не способ сохранить изменение.

Метод 2 — встроенные инструменты браузера

Некоторые браузеры позволяют сохранить пользовательскую таблицу стилей, а Режим чтения сводит страницу к тексту. Это нормально для узких случаев, но они ограничены: Режим чтения работает по принципу «всё или ничего», а глобальную пользовательскую таблицу стилей нелегко настроить так, чтобы один сайт обрабатывался иначе, чем другой.

Метод 3 — пользовательский стиль или расширение (постоянно)

Чтобы сделать изменение, которое сохраняется между перезагрузками и применяется автоматически к выбранным сайтам, тебе нужно расширение, которое внедряет CSS за тебя. Это практический ответ для большинства людей. Существуют инструменты только для CSS (рассмотрены в нашем руководстве по альтернативам Stylish), а есть инструменты, которые работают с CSS и JavaScript вместе. Мы пройдёмся по одному из последних, JustZix, потому что он бесплатен и не требует аккаунта.

Сначала — найди правильный селектор

Прежде чем стилизовать что-то, ты должен назвать это в CSS — это селектор. Щёлкни правой кнопкой по элементу, который хочешь изменить, и выбери «Просмотреть код». В подсвеченном HTML посмотри на class или id элемента:

<div class="newsletter-popup" id="signup-modal">
  ... popup content ...
</div>

class пишется с точкой — .newsletter-popup. id пишется с решёткой — #signup-modal. Это твои селекторы.

Разбор — добавляем пользовательский CSS с JustZix

Установи расширение со страницы загрузки (это занимает около двух минут; аккаунт не нужен).
Открой сайт, который хочешь стилизовать.
Щёлкни по иконке JustZix и выбери Новое правило.
Задай шаблон URL, чтобы правило срабатывало только там, где тебе нужно:
- https://example.com/* — весь сайт
- https://example.com/blog/* — только раздел блога
- * — каждый сайт (используй осторожно)
Открой панель CSS и вставь свой CSS.
Сохрани. Правило применяется немедленно и каждый раз, когда ты снова заходишь на подходящую страницу.

Пример 1 — скрыть элемент

Самый частый запрос: заставить что-то исчезнуть. Всплывающее окно подписки, липкая шапка, боковая панель:

/* Hide a newsletter pop-up and its dark overlay */
.newsletter-popup,
#signup-modal,
.modal-backdrop {
  display: none !important;
}

/* Some pop-ups freeze scrolling — restore it */
html, body {
  overflow: auto !important;
}

Ключевое слово !important говорит браузеру, что твоё правило побеждает собственный CSS сайта. Оно будет нужно тебе часто при переопределении существующего дизайна.

Пример 2 — перестилизация для читаемости

Сделай статью удобной для чтения — крупнее текст, больше межстрочного интервала, более узкая колонка:

/* Comfortable reading column */
article, .post-content {
  max-width: 720px !important;
  margin: 0 auto !important;
  font-size: 19px !important;
  line-height: 1.75 !important;
}

Пример 3 — быстрая тёмная правка

Простой тёмный фон для слепяще-белой страницы:

/* Minimal dark tweak */
html, body {
  background: #1a1a1a !important;
  color: #e0e0e0 !important;
}
a { color: #6db3f2 !important; }

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

Советы по CSS, который не ломается

Предпочитай скрытие удалению. display: none обратимо — просто отключи правило.
Ограничивай область своих правил. Конкретный шаблон URL лучше, чем * — это избавляет от сюрпризов на несвязанных сайтах.
Сначала тестируй вживую. Используй панель CSS прямо во вкладке или DevTools, чтобы подтвердить селектор перед сохранением.
Избегай слишком широких селекторов по атрибутам вроде [class*="box"] — они могут совпасть с гораздо большим, чем ты задумал.

Панель CSS JustZix прямо во вкладке здесь удобна: ты редактируешь, страница обновляется по мере набора, и когда всё выглядит правильно, ты сохраняешь это как правило. Смотри страницу возможностей для остального инструментария.

Смотри также

Готов закрепить свой пользовательский CSS? JustZix бесплатен и устанавливается за пару минут — забери его со страницы загрузки и создай своё первое правило сегодня.

Оцени эту статью

Оценок пока нет — оцени первым.