Коротко: код страницы смотрят и копируют через инструменты разработчика: F12 → Elements даёт HTML, вкладка Sources — CSS и файлы. Быстрый способ — Ctrl+U или правой кнопкой «Просмотр кода страницы». Чужой дизайн копировать нельзя без разрешения.
Способы посмотреть код
| Способ | Что показывает |
|---|---|
Ctrl+U |
исходный HTML страницы |
Инспектор F12 |
DOM и применённые стили |
Вкладка Sources |
CSS, JS и файлы ресурсов |
| Сохранить страницу | HTML вместе с ресурсами |
Инспектор и стили
Кликнув по элементу, в панели справа видно все применённые CSS-правила, откуда они пришли и какие значения итоговые. Это лучший способ разобраться в чужой вёрстке.
F12 → вкладка Elements
→ выбрать элемент
→ справа Styles: список CSS-правил
→ Computed: итоговые значенияВкладки: что и где искать
Разметку копируют из вкладки Elements: правый клик по тегу → «Copy outerHTML». Но помните, что DOM в браузере может отличаться от исходного PHP-шаблона.
Стили смотрят в Styles или во вкладке Sources, где лежат файлы .css. Можно скопировать правило и разобрать, как оно работает, — но не выдавать чужое оформление за своё.
Sources → Network
→ фильтр по CSS / JS / Font
→ у каждой записи виден URL и размерЗдесь видно, какие шрифты и библиотеки использует сайт. Это подсказка для обучения: какие технологии применяют коллеги.
Практика: изучить чужой код правильно
- Откройте сайт-пример и включите
F12. - Выберите интересующий элемент.
- Изучите его CSS-правила в панели Styles.
- Запишите приёмы: сетка, отступы, шрифты, эффекты.
- Соберите похожее решение самостоятельно, со своим кодом.
- Не копируйте чужие изображения и тексты.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Скопированная вёрстка «поехала» | не перенесены стили и шрифты | собирать код заново |
| Не видно стилей | они в отдельном файле | открыть вкладку Sources |
| DOM отличается от исходника | его меняет JavaScript | смотреть исходный код |
| Претензии правообладателя | скопированы чужие материалы | убрать и сделать своё |
| Не найдены шрифты | подключены с внешнего домена | смотреть вкладку Network |
Проверьте себя
Вопросы и ответы
Потому что JavaScript меняет структуру страницы уже после загрузки. Исходный код покажет Ctrl+U, а итоговую разметку — инспектор.
Технически — да, но без серверного кода и базы данных сайт не заработает полноценно. А юридически копирование чужого сайта незаконно.
В инспекторе посмотрите свойство font-family в правилах элемента, а во вкладке Network — какой файл шрифта загружается.
Смотрите на реальные проекты в инспекторе: анализ живого кода даёт больше, чем учебные примеры. Главное — повторять приёмы своим кодом, а не копировать файлы.
Итоги
- Код страницы смотрят через
F12,Ctrl+Uи вкладку Sources. - Инспектор показывает DOM и применённые CSS-правила.
- Чужой код изучают для обучения, но не копируют в проект.
- Изображения и тексты защищены авторским правом.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.