Урок №17. Отладка CSS-кода

Степень завершённости урока: 30%   

Отладка CSS-кода требуется в тех случаях, когда отображение веб-страницы не соответствует желаемым параметрам. Например, отступы в параграфах, цветовая гамма и т.п. Можно использовать консоль разработчика в браузере, чтобы изменить CSS-код и удостовериться в том, что всё работает должным образом.

Сначала необходимо открыть сайт, на котором предполагается отладка CSS-кода, а потом запустить консоль разработчика. Я открыл сайт https://www.historian.by в браузере Vivaldi, затем для открытия консоли разработчика нажал клавишу F12.

Для просмотра стилей, которые использует открытая веб-страницы, перейдём на вкладку "Источники".

На вкладке "Источники" можно просмотреть не только используемые стили (на снимке это файл style.css), но и любые другие подключённые файлы. Именно этим объясняется наличие в списке сайтов fonts.googleapis.com, fonts.gstatic.com, mc.yandex.ru, site.yandex.net, yastatic.net.

CSS-код можно редактировать в реальном времени. Например, можно изменить цвет фона меню, внеся изменения в строчку под номером 8.

nav {background: #413F3C;}

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

Результат изменений сразу виден на веб-странице.

Аналогичным образом можно менять значения всех свойств CSS.

Страница обновлена 8 октября 2023 года.