Вы просите агента поправить страницу, и в простом проекте появляются файлы с непонятными именами: index.html, style.css, script.js. Или они уже были, а в отчёте агента написано "поменял стили" - и по этой фразе непонятно, что именно он трогал.
Разберём три базовые технологии, которые получает браузер: HTML, CSS и JavaScript. Для наглядности возьмём простую статическую страницу без сборки. В реальном репозитории файлы могут называться и лежать иначе, поэтому перед правкой полезно попросить агента показать структуру проекта и найти файлы, отвечающие за нужный элемент. Верстать руками статья не учит, для этого у вас есть агент.
Страница это текст, который читает браузер
Начнём с простой статической страницы: её исходники - обычные текстовые файлы. Их можно открыть блокнотом и прочитать глазами. Дополнительная сборка здесь не нужна: браузер читает HTML, загружает связанные ресурсы и по ним рисует страницу на экране.
Отправной точкой такого проекта обычно служит файл index.html. Браузер открывает его, разбирает разметку и по ссылкам загружает стили, скрипты, картинки и шрифты.
В проекте со сборкой исходники могут лежать в компонентах, а готовые HTML, CSS и JavaScript создаёт специальный инструмент. Роли ниже остаются полезной картой, но искать именно три файла с такими именами там не нужно.
Для нашего простого примера возьмём три файла с разными ролями:
- HTML - что на странице есть: заголовок, абзац, кнопка, картинка;
- CSS - как это выглядит: цвета, шрифты, отступы, скругления, плавность;
- JavaScript - что происходит: по клику, по вводу текста, по таймеру.
Дальше по одному.
HTML: из чего состоит разметка
HTML это разметка, а не рисование. Вы не описываете, как выглядит кнопка. Вы говорите "здесь кнопка" - и браузер рисует её сам, как умеет.
Основная единица разметки - тег. Почти всегда их два: открывающий и закрывающий, а между ними содержимое.
У каждой части своё имя, а всё вместе называется элементом. Слово пригодится: про страницу чаще говорят "элемент", имея в виду тег вместе с тем, что внутри.
Имена тегов - сокращения от английских слов: p от paragraph, a от anchor, img от image. Учить их наизусть незачем, но догадаться, за что отвечает незнакомый тег, это обычно помогает.
Закрывающий тег отличается косой чертой. Есть и элементы без закрывающего тега. Например, <img> не может содержать текст или вложенные теги, а адрес картинки получает через атрибут src.
Теги вкладываются друг в друга, как коробки в коробках, и закрываются в обратном порядке - сначала внутренний, потом внешний. Если порядок нарушить, браузер не упадёт, он попробует догадаться. Обычно догадывается неудачно.
Второе понятие - атрибут. Это уточнение, которое живёт внутри открывающего тега и что-то про него говорит: куда ведёт ссылка, откуда брать картинку, как этот элемент называть.
<a href="https://example.com">Открыть сайт</a>
<img src="cover.png" alt="Обложка">
<button id="play" class="btn">Играть</button>Атрибут class из последней строки пригодится через две минуты: по нему к кнопке применятся стили. Атрибут id="play" даёт ей уникальное имя, по которому кнопку найдёт скрипт.
Теперь целая страница. Она короче, чем можно подумать:
<!doctype html>
<html>
<head>
<title>Моя страница</title>
</head>
<body>
<h1>Первая страница</h1>
<p>Обычный абзац текста.</p>
<button id="play" class="btn">Играть</button>
</body>
</html>Две части: <head> - служебная, туда идут заголовок вкладки и ссылки на стили; <body> - всё, что читатель видит на экране. Первая строка просто сообщает браузеру, что перед ним современный HTML.
Схема показывает главное свойство разметки: на странице всё лежит внутри чего-то. <body> внутри <html>, кнопка внутри <body>, текст внутри кнопки. Отсюда и лесенка отступов в файле: она не для красоты, а показывает, что во что вложено.
Практический вывод простой. Заголовок вкладки браузера и подключение стилей живут в <head>, и на экране их не видно вообще. Всё остальное - в <body>. Когда агент в отчёте пишет "добавил блок в body", это ровно про вторую коробку: новое встало на страницу, а не в служебную часть.
Тегов в языке больше сотни, но в реальной странице почти всегда крутятся одни и те же:
| Тег | Что делает |
|---|---|
<h1> ... <h6> | заголовки, от главного к самым мелким |
<p> | абзац текста |
<a> | ссылка, адрес лежит в атрибуте href |
<img> | картинка, путь к файлу в атрибуте src |
<button> | кнопка |
<ul> и <li> | список и пункт списка |
<div> | блок-контейнер, коробка для других элементов |
<span> | кусочек текста внутри строки, чтобы выделить его отдельно |
Последние два ничего не значат сами по себе и ничего не рисуют. Это пустые коробки, за которые удобно браться стилям и скриптам, - и как раз поэтому их в любой странице больше всего.
CSS: как страница получает вид
Голая разметка выглядит бедно: чёрный текст на белом, серая системная кнопка, всё прижато к левому краю. Большую часть разницы между этим и оформленной страницей создаёт CSS.
CSS состоит из правил. Правило это ответ на два вопроса: к чему применяем и что меняем.
.btn {
background: #6c5ce7; /* цвет фона */
color: #ffffff; /* цвет текста */
padding: 12px 24px; /* внутренние отступы */
border-radius: 12px; /* скругление углов */
}Первая строка - селектор: он говорит, к каким элементам это относится. Дальше в фигурных скобках идут пары "свойство: значение", каждая заканчивается точкой с запятой.
Точка перед btn означает класс. Помните атрибут class="btn" у кнопки? Вот он и сработал: в разметке вы вешаете на элемент метку, а в стилях обращаетесь к ней. Одну метку можно повесить на десять кнопок - и все десять станут одинаковыми от одного правила.
Свойств в CSS сотни, но чтобы читать чужой файл и понимать, что там происходит, хватит нескольких:
color- цвет текста,background- цвет или картинка фона;font-sizeиfont-family- размер и гарнитура шрифта;padding- отступ внутри элемента,margin- снаружи, между соседями;border-radius- скругление углов, оно же половина ощущения "дорого";transition- плавность: не прыжком, а за 0.2 секунды.
Чаще всего правила лежат в отдельном файле, а страница узнаёт о нём из одной строчки в служебной части:
<head>
<link rel="stylesheet" href="style.css">
</head>Уберите эту строку - файл стилей не загрузится. Текст и элементы останутся в разметке, но привычное расположение и оформление могут исчезнуть, а пользоваться страницей иногда станет сложнее.
На схеме слева и справа одна и та же страница: заголовок, две строки текста, кнопка. Ни одного элемента не добавилось и не исчезло - в этом примере правился только файл стилей.
Это карта поиска, а не техническая стена. Для нового расположения агенту иногда нужно изменить классы или контейнеры в HTML, а неудачное CSS-правило может перекрыть кнопку и помешать клику. Поэтому после визуальной правки смотрят diff, открывают страницу и проверяют затронутые действия.
JavaScript: что происходит по действию
HTML и CSS уже умеют показать страницу и добавить ей плавные переходы или анимацию. Но у кнопки из нашего примера пока нет собственного действия: нажимаем - счёт не меняется.
Произвольную логику на странице обычно добавляет JavaScript. Кнопка уже получила в HTML уникальное имя id="play". Теперь схема простая: найти элемент, дождаться события, что-то изменить.
// находим кнопку по её id
const button = document.getElementById("play");
let score = 0;
// подписываемся на событие: что делать по клику
button.addEventListener("click", function () {
score = score + 1;
button.textContent = "Очки: " + score;
});Первый клик меняет надпись на "Очки: 1", второй - на "Очки: 2". Если ничего не происходит, сначала проверьте, что в HTML написано id="play", а в скрипте - то же имя play.
Здесь три детали. const и let заводят переменную - именованную коробку со значением. addEventListener подписывает страницу на событие: клик, ввод текста, наведение мыши. А внутри фигурных скобок лежит функция - кусок кода, который выполнится, когда событие произойдёт.
Обратите внимание на последнюю строку: скрипт меняет текст кнопки. Это важный момент - JavaScript умеет менять и разметку, и стили прямо во время работы страницы. Он может добавить абзац, спрятать блок, перекрасить кнопку. Поэтому граница между слоями - не стена, а разделение труда.
На практике начинайте поиск в JavaScript, если элемент реагирует на данные, обрабатывает клик или что-то считает. Плавное появление, смену цвета и простое движение часто делает CSS. Это отправная точка, а не окончательный диагноз: после правки откройте страницу и сами проверьте внешний вид и действия - одного скриншота недостаточно.
Одна кнопка в трёх файлах
Соберём всё на одном элементе. Кнопка "Играть" живёт сразу в трёх файлах, и каждый отвечает за своё.
<button id="play" class="btn">Играть</button>.btn {
background: #6c5ce7;
border-radius: 12px;
}const playButton = document.getElementById("play");
playButton.addEventListener("click", function () {
playButton.textContent = "Игра запущена";
});Если файлы подключены, клик меняет надпись "Играть" на "Игра запущена". Теперь пример можно проверить, не придумывая отсутствующую функцию.
А теперь самое полезное - что будет, если убрать по одной строке:
- убрали HTML - исчезло всё: стилизовать и оживлять больше нечего;
- убрали CSS - кнопка на месте и работает, просто выглядит как системная серая кнопка из девяностых;
- убрали JS - кнопка красивая, но мёртвая. Нажимается, и ничего не происходит.
Отсюда простая карта для постановки задачи. Если вам не нравится, как выглядит, начните поиск со стилей. Если не нравится, что происходит, - со скрипта. Если элемента вообще нет, начните с разметки. Именно начните: реальная правка может задеть соседний слой, поэтому вывод агента проверяют по diff и в браузере.
Что лежит в папке проекта
Самый частый набор для простой страницы выглядит так:
index.html разметка, точка входа
style.css стили
script.js поведениеСвязаны они двумя строчками в разметке. Стили подключаются в служебной части, скрипт - в самом конце, перед закрытием </body>, чтобы к моменту его запуска все элементы уже существовали:
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- разметка страницы -->
<script src="script.js"></script>
</body>Бывает и иначе. В большом проекте файлов десятки, они разложены по папкам вроде css/ и js/, а рядом лежат картинки и шрифты. Бывает и наоборот, когда файл всего один, - про этот случай сразу ниже. Роли разметки, стилей и логики всё равно остаются, но имена файлов и способ их подключения могут отличаться.
Когда стили и скрипты лежат внутри страницы
Три файла - расклад самый частый, но не единственный. Один и тот же CSS можно положить в три разных места, и все три вам рано или поздно попадутся.
Первое вы уже видели: отдельный файл плюс строчка <link>. Второе - блок <style> прямо в разметке, без отдельного файла:
<head>
<style>
.btn {
background: #6c5ce7;
border-radius: 12px;
}
</style>
</head>Внутри всё то же самое: селектор, фигурные скобки, пары "свойство: значение". Поменялся только адрес. Так пишут, когда страница одна и заводить под неё отдельный файл незачем.
Третье место - встроенные стили, они же inline styles. Свойства висят прямо на элементе, в атрибуте style:
<button class="btn" style="background: #e17055; font-size: 20px">Играть</button>Селектор здесь не нужен: и так ясно, к чему относится правило - к элементу, на котором оно написано. Поэтому ни фигурных скобок, ни точки перед классом, просто пары "свойство: значение" через точку с запятой, всё в одну строку.
Удобно это ровно один раз. Дальше начинаются минусы. Правило действует на один-единственный элемент: десять кнопок - десять копий, и менять потом придётся все десять. Обычный встроенный стиль обычно имеет приоритет над обычным правилом из файла. Покрасили кнопку через style, потом правите то же свойство в style.css и не понимаете, почему цвет не меняется. Поэтому атрибут style проверяют одним из первых; подробные правила приоритетов пока не нужны.
Со скриптом та же история, только мест два. Отдельный файл подключается через <script src="...">, а можно написать код прямо между тегами:
<script>
document.getElementById("play").addEventListener("click", function () {
alert("Игра запущена");
});
</script>Сведём в одну табличку, чтобы было где подсмотреть:
| Что | Где лежит | Как выглядит в HTML |
|---|---|---|
| стили | отдельный файл | <link rel="stylesheet" href="style.css"> |
| стили | блок в самой странице | <style> ... </style> |
| стили | прямо на элементе | style="color: red" |
| скрипт | отдельный файл | <script src="script.js"></script> |
| скрипт | блок в самой странице | <script> ... </script> |
Крайний случай - когда сложено вообще всё: разметка, блок <style> и блок <script> живут в одном index.html. Ничего страшного тут нет, для небольшой страницы так даже проще: файл один, открыл в браузере и работает, ничего не потеряется по дороге. Неудобства начинаются позже, когда страница разрастается и в этой простыне надо что-то найти. Тогда содержимое обычно растаскивают по файлам, и получается та самая тройка.
Прежде чем просить агента "поменять стили", выясните, где они лежат. Если в проекте один index.html, файла style.css может не быть, и правка окажется внутри разметки. Если элемент не меняется, попросите проверить три вещи: подключён ли нужный файл стилей, подходит ли селектор и нет ли встроенного style или более сильного правила. Так поиск сужается без догадки о виновнике.
Как это работает в связке с Claude Code
Теперь понятно, что происходит, когда агент берётся за страницу:
- в простом статическом проекте агент может сам написать и связать HTML, CSS и JavaScript. В другом проекте сначала попросите его показать структуру и назвать файлы, отвечающие за нужный элемент;
- что именно видно до записи, зависит от настроек и режима работы. Если агент показывает предложение заранее, просмотрите его; после записи в любом случае изучите diff и итоговые файлы. Имя
style.cssподсказывает роль файла, но ещё ничего не гарантирует; - визуальную правку проверяйте глазами и кликом по затронутым элементам, правку поведения - реальными действиями. Скриншот не покажет, что счётчик перестал считать;
- если что-то сломалось, описывайте наблюдаемый симптом, а не угаданный слой: "после правки кнопка видна, но клик ничего не делает". Тогда агент проверит связи между HTML, CSS и JavaScript.
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ