Как посмотреть css сайта

Как открыть код сайта и зачем это нужно?

Все браузеры позволяют просматривать исходный код страницы. В этой статье приводится информация о том, как открыть код страницы в наиболее популярных браузерах:

Как посмотреть код сайта — вводная информация

Просматривая исходный код страницы важно помнить, что информация и код, не обработанные сервером не будут отображаться. Например, почти все поисковые системы обрабатывают информацию на сервере, и затем отображают результаты на веб-странице.

Это правило применимо ко всем скриптам, выполняемым на стороне сервера, SSI и к программному коду. Следовательно, поисковые системы, форумы, опросы, чаты не отображают свой код. Копирование информации из исходного кода может привести к серьёзным ошибкам или отправить обратно на страницу.

Как посмотреть код страницы в браузере Microsoft Edge

Чтобы просмотреть исходный код страницы в браузере Microsoft Edge , следуйте приведенным ниже инструкциям.

1. Откройте Microsoft Edge и перейдите на веб-страницу;
2. Кликните иконку « More » в верхнем правом углу экрана;
3. Выберите пункт F12 Developer Tools ( Инструменты разработчика ) из появившегося выпадающего меню.

Совет : В Microsoft Edge инструмент DOM предоставляет возможность взаимодействия с исходным кодом и настройками CSS , позволяя мгновенно увидеть, как изменения в коде влияют на веб-страницу.

Как открыть код страницы в браузере Microsoft Internet Explorer

Как открыть исходный код страницы в Microsoft Internet Explorer :

1. Откройте Internet Explorer и перейдите на веб-страницу;
2. Нажмите Alt , чтобы вызвать панель меню браузера;
3. Выберите View ( Просмотр ) и Source ( Источник ) из появившегося выпадающего меню.

Совет : В последних версиях Internet Explorer нажатие клавиши F12 вызывает инструмент DOM . Он позволяет мгновенно увидеть, как изменения в коде влияют на веб-страницу.

Как открыть код страницы в браузерах Mozilla Firefox и Netscape

Чтобы просмотреть исходный код страницы в Mozilla Firefox , следуйте приведенным ниже инструкциям.

1. Откройте Mozilla Firefox и перейдите на веб-страницу;
2. Нажмите Alt , чтобы вызвать панель меню браузера;
3. Выберите Tools ( Инструменты ), Web developer ( Веб-разработчик ), и затем Page Source ( Исходный код страницы ).

Совет : В последних версиях браузера нажатие на клавишу F12 или Ctrl+Shift+I вызывает интерактивный инструмент разработчика. Это нужно учитывать перед тем, как открыть код страницы в браузере Firefox.

Как просмотреть раздел исходного кода страницы

1. Выделите участок веб-страницы, чтобы просмотреть исходный код;
2. Кликните правой клавишей мыши по выделенной части веб-страницы и затем нажмите View Selection Source ( Показать исходный код выделения ).

Совет : Используйте дополнение Firebug , чтобы не только увидеть исходный код страницы, но и вносить необходимые изменения. А также увидеть их в браузере в тот же момент.

Как посмотреть код страницы в гугл хром?

Чтобы просмотреть исходный код страницы в браузере Google Chrome , следуйте приведенным ниже инструкциям.

1. Откройте Google Chrome ;
2. Кликните по иконке Customize and control ( Настройка и управление ) Google Chrome , расположенной в верхней правой части окна браузера;
3. В появившемся выпадающем меню выберите Дополнительные инструменты, Инструменты разработчика ( Developer tools ).

Совет : В последних версиях Google Chrome нажатие на клавишу F12 или Ctrl+Shift+I также вызывает интерактивный инструмент разработчика.

Просмотр кода страницы в браузере Apple Safari

1. Откройте Safari и перейдите на выбранную веб-страницу;
2. Выберите меню Develop ( Разработка );
3. Выберите опцию Show page source ( Показать код страницы ).

Как открыть код страницы в браузере Opera

Как открыть код страницы в Опере:

1. Откройте Opera и перейдите на веб-страницу;
2. Кликните кнопку « Меню » в углу окна браузера;
3. В подменю разработчика выберите View page source ( Посмотреть исходный текст ).

Совет : Если вы не видите подменю « Разработчик » ( или Разработка ) ( Developer ), выберите More tools ( Другие инструменты ); Show developer menu ( Показать меню разработчика ). Далее щелкните по кнопке меню еще раз. Теперь вы увидите подменю Разработчик ( Developer ).

Совет : В последних версиях Opera нажатие на комбинацию клавиш Ctrl+Shift+I вызывает интерактивный инструмент разработчика.

Как посмотреть исходный код страницы в браузере Google Chrome на Android — смартфонах

1. Откройте браузер Google Chrome , установленный на смартфоне;
2. Откройте веб-страницу, исходный код которой нужно просмотреть;
3. Коснитесь один раз панели адреса и затем поместите курсор перед URL ;
4. Наберите view-source : и нажмите Enter или Go .

Как закрыть исходный код

Когда закончите просматривать исходный код страницы, можно выйти или закрыть его. Этот процесс зависит от метода, которым вы его открыли.

• Если вы воспользовались сочетанием Ctrl+U , закройте новую вкладку;
• Если вы воспользовались методом разработчика ( нажатие F12 или Ctrl+Shift+I ), кликните по кнопке закрытия в верхнем правом углу окна инструментов.

Это вся информация о том, как открыть код страницы. Надеюсь, она вам помогла.

КК Константин Кондрусин автор статьи « How to view the HTML source code of a веб-страницу »

Просмотр исходного кода страницы

Данный инструмент предназначен для просмотра исходного кода страниц. При помощи него становится возможным ознакомление с мета-тегами сайтов для последующего анализа, определение присутствия элементов сайта (например, счетчики, коды идентификации, определенные скрипты и т.д.), изучение их параметров (цвет, шрифт, размер), поиск доступа к изображениям и другим материалам, расположенным на странице, анализ ссылок со страниц и самое главное – поиск ошибок в коде, которые мешают процессу оптимизации сайта (невынесение стилей, скриптов, невалидность кода и др.). При освоении элементарных знаний HTML и CSS благодаря данному инструменту становится возможной отладка собственных страниц, а SEO-специалисты смогут с легкостью проанализировать полезную информацию, содержащуюся в мета-тегах.

Mainspy.ru — бесплатные инструменты для
SEO-оптимизатора и вебмастера.
Контакты

Исходный код сайта: что это такое

Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подпишись на рассылку и получи книгу в подарок!

Исходный код сайта – это совокупность HTML-разметки, CSS стилей и скриптов JavaScript, которые браузер получает от веб-сервера.

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Его можно сравнить с набором команд, которые дает солдатам командир. Представьте, что зрители не видят и не слышат начальника. С их точки зрения военные самостоятельно выполняют действия. В нашем случае командир – это браузер, команды – это исходный код, а марширующие солдаты – это конечный результат.

Хранится сайт на веб-сервере, который отправляет страницу по запросу пользователя. Запрос – это ввод URL в строке адреса, щелчок по ссылке или нажатие на кнопку отправки данных в форме. Не важно, на каком языке написаны веб-страницы, включают ли они программную часть. Конечным результатом работы любого серверного алгоритма является набор html-тегов и текста.
Исходный код страницы – это набор данных, включающий в себя:

• html-разметку;
• стилевую таблицу или ссылку на файл css;
• программы, написанные на JavaScript или ссылки на файлы с кодом.

Эти три раздела обрабатываются браузером. Для сервера это просто текст, который необходимо отправить в ответ на запрос.

Зачем нам может понадобиться изучать исходный код

Все, что мы увидим, мы сможем проанализировать и применить для решения тех или иных задач, которые возникают в ходе работы с сайтом, особенно при его оптимизации. Просмотрев исходный код, мы можем:

• Увидеть мета-теги своего или чужого сайта для их анализа.
• Увидеть наличие или отсутствие некоторых элементов на сайте: счетчиков, кодов идентификации в различных системах, определенных скриптов и прочего.
• Узнать параметры элементов: размеры, цвета, шрифты.
• Найти путь к фотографиям и другим элементам, располагающимся на странице.
• Изучить ссылки со страницы.
• Найти проблемы с кодом, мешающие в процессе оптимизации сайта: невынесенные в отдельные файлы стили, скрипты, невалидный код.

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

Как посмотреть исходный код сайта

Полностью в том виде, в каком он выложен на сервере, из браузера это сделать не удастся. А вот увидеть всю разметку можно, нажав на странице правую кнопку мыши. Здесь и далее на примере Google Chrome.

Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.

Это просто текст, который придется анализировать, чтобы понять. А вот получить интерактивный код можно с помощью инструментов разработчика.

Как найти исходный код страницы сайта

Нажимаем на значок меню в браузере. Чаще всего он находится справа и имеет вид трех точек или полосок.

В разделе дополнительных инструментов выбираем «Инструменты разработчика».

Откроется окно, в котором отображается активное состояние кода. Это значит, что при щелчке мыши на разметке рядом отобразится стиль элемента, а на странице будут подсвечиваться выбранные блоки.

Во вкладке «Source» можно просмотреть содержимое некоторых файлов: скрипты, шрифты, изображения.

Их можно сохранить. Для этого нажимаем правую кнопку мыши (ПКМ) и выбираем «Save».

Во вкладке «Security» доступна проверка сертификата сайта.

Вкладка «Audits» поможет провести проверку выложенного на хостинг ресурса.

Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.

Как посмотреть мета-теги

Каждый html-документ включает в себя теги структуры. Вот некоторые из них:

1. Html – весь документ.
2. Head – раздел служебных заголовков.
3. Title – заголовок страницы (отображается на вкладке).
4. Body – тело документа.
5. H1-H6 – заголовки текста страницы.
6. Article – статья.
7. Section – раздел.
8. Menu – меню.
9. Div – блок.
10. Span – строка.
11. P – абзац.
12. Table – таблица.

Элементы предназначены для логического разграничения разделов на странице, при необходимости они оформляются с помощью стилей. В них размещается текст, который так или иначе виден на странице. Но в теге Head присутствует служебная информация. Для ее указания служат мета-теги. Все что в них записано, предназначено для сервера и поисковых систем.

Их содержимое другим способом узнать невозможно.

Обратим внимание на тег Link. С его помощью указываются ссылки на внешние подключаемые файлы. При желании можно увидеть содержимое и сохранить на диск. Для этого наведите указатель на адрес и нажмите ПКМ. Выберите пункт «Open in new Tab».

В новой вкладке откроется указанный файл, который можно просмотреть или сохранить.

Как посмотреть исходный код страницы для отладки скрипта

В этом случае удобнее всего открывать страницу на локальной машине. Если необходимо только исправить разметку, стили и скрипты, то это можно делать прямо из папки. Html-код просматривается таким же образом. А вот ошибки кода JavaScript можно увидеть во вкладке «Console». Здесь показывает описание ошибки и номер строки, в которой она возникла.

Синтаксическую можно увидеть непосредственно в коде. Для этого предназначена вкладка «Source».

Как посмотреть код конкретного элемента

Для больших страниц с большим количеством элементов сложно найти нужный код во всей разметке. В таком случае следует воспользоваться специальной командой контекстного меню. Наведем мышь на фрагмент и нажмем ПКМ. Выберем команду «Просмотреть код».

Откроется то же окно, но с фокусировкой на выбранном объекте.

Резюме

Мы рассказали, что такое исходный код страницы. Достаточно освоить элементарные знания HTML и CSS, и пользуясь удобными инструментами разработчика, вы сможете проводить отладку своих собственных html-документов.

Просмотр кода ресурсов в интернете позволит вам учиться не только на собственном опыте, но и использовать реальные рабочие примеры. А для seo-специалистов будут полезны мета-теги, информация в которых может сказать о сайте многое.

Отладка CSS

Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.

Необходимые знания:	Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Задачи:	Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS.

Как получить доступ к DevTools браузера

Статья What are browser developer tools это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.

Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править Grid Layouts (en-US) , Flexbox (en-US) , и Shapes. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.

В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать файл примера. Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.

DOM vs View Source

То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда просматриваете источник (en-US) веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на HTML панели DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.

В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали

, но закрыли

, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать

с

. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.

View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. HTML дерево в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.

Инспекция применённого CSS

Выбирать элемент на вашей странице можно либо правым/ctrl-кликом по нему и выбрав Inspect, либо выбрав его из дерева HTML в левой панели DevTools. Попробуйте выбрать элемент с классом box1 ; это первый элемент на странице с блоком, ограниченным рамками вокруг него.

Если вы посмотрите на Rules view справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу box1 и также CSS который наследуется блоком от предков, в этом случае от . Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.

Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись margin .

Кликните по маленькой стрелке для того, чтобы развернуть вид, показывающий полную запись различных свойств и значений.

Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.

Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.

Редактирование значений

В дополнение к включению и выключению свойств, вы можете редактировать их значения. Возможно, вам захочется посмотреть будет ли другой цвет выглядеть лучше или захотите настроить размер чего-либо. DevTools поможет вам сэкономить кучу времени редактируя таблицу стиля и перезагружая страницу.

Выбрав box1 , кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. Аналогичным образом вы можете изменить ширину или стиль границ.

Добавление нового свойства

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

Вы можете кликнуть по закрывающей фигурной скобке в правиле чтобы начать вводить новое объявление в нем, с этого момента вы можете начинать вводить новое свойство и DevTools покажет список автозаполнения подходящих свойств. Выбрав font-size , вводите значение, которое хотите попробовать. Вы также можете кликнуть на кнопку + чтобы добавить дополнительное правило с тем же селектором и добавить ваши новые правила туда.

Примечание: Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в Examine and edit CSS.

Понимание модели блоков

В предыдущем уроке мы обсудили модель блоков и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.

Layout view показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений.

В этой панели одним из детальных свойств является свойство box-sizing , которое контролирует какую блочную модель использует элемент.

Сравните два блока с классами box1 и box2 . Они оба имеют одинаковую ширину (400px) применённую к ним, однако box1 визуально шире. В layout panel вы можете увидеть, что он использует content-box . Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding и ширину границ.

Элемент с классом box2 использует border-box , поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае width: 400px .

Примечание: Узнать больше на Examining and Inspecting the Box Model.

Решение проблем специфичности

Порой во время разработки, в частности когда вам нужно отредактировать CSS на существующем сайте вы, вы столкнётесь с трудностями применения некоторого CSS. Вне зависимости от того, что вы делаете, кажется, что элемент просто не реагирует на CSS. Что же обычно происходит в таких ситуациях — это то, что более специфичный селектор переопределяет ваши изменения и в таких случаях DevTools действительно поможет вам.

В нашем примере два слова обёрнуты в элемент . Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:

em  color: hotpink; font-weight: bold; > 

Кроме того в таблице стилей есть правило с селектором .special :

.special  color: orange; > 

Как вы помните из урока каскад и наследование где мы обсуждали специфичность, селекторы классов являются более специфичными чем селекторы элементов, и поэтому это то значение которое применяется. DevTools может помочь вам найти такие проблемы, особенно если информация закопана где-то в дебрях огромной таблицы стилей.

Проведите инспекцию с классом .special и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство color применённое к em зачёркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента.

Узнайте больше о Firefox DevTools

На MDN имеется много информации о Firefox DevTools. Взгляните на основной раздел DevTools, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите The How To Guides.

Отладка проблем в CSS

DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведёт себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.

Сделайте шаг назад

Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаёте думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.

Валидны ли ваши HTML и CSS?

Браузеры ожидают, что CSS и HTML написаны корректно, однако в это же время браузеры очень снисходительны и сделают всё чтобы отобразить вашу веб-страницу даже если у вас есть ошибки в разметке и таблице стилей. Если у вас есть ошибки в коде, то браузеру нужно угадать что вы имели в виду, и он может принять решение не такое какое было у вас в голове. И дополнительно, два разных браузера могут решать проблему двумя разными способами. Поэтому хорошим первым шагом является запуск вашего HTML и CSS в валидаторе чтобы выявить и исправить ошибки.

Поддерживаются ли свойство и значение браузером в котором вы тестируете?

Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не «сломается», кроме того, что тот CSS не будет применён. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение «подсветки» (subgrid) grid-template-columns .

Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто «ломается», если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства shape-outside (en-US).

Не переопределяется ли ваш CSS чем-нибудь ещё?

Это тот момент, когда изученная вами информация о специфичности придёт вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.

Сделайте сокращённый контрольный пример проблемы

Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность «уменьшить проблему» — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.

Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля. Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.

Создание сокращённого контрольного примера:

1. Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как CodePen являются полезными для размещения сокращённых контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.
2. Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript устраняет проблему, тогда удалите столько JavaScript, сколько сможете, оставляя всё что вызывает проблему.
3. Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все ещё показывает проблему.
4. Удалите весь CSS который не влияет на проблему.

В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.

If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.

In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla’s bugzilla site).

As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.

In this module

1. Cascade and inheritance
2. CSS selectors
   • Type, class, and ID selectors
   • Attribute selectors
   • Pseudo-classes and pseudo-elements
   • Combinators
3. The box model
4. Backgrounds and borders
5. Handling different text directions
6. Overflowing content
7. Values and units
8. Sizing items in CSS
9. Images, media, and form elements
10. Styling tables
11. Debugging CSS
12. Organizing your CSS (en-US)

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 8 нояб. 2023 г. by MDN contributors.