Инструмент Inspect Element отлично подходит для отладки веб-страниц или редактирования в режиме реального времени. Вы можете использовать этот инструмент для предварительного просмотра и изменения дизайна вашего веб-сайта. Это также позволяет вам делать это без перезагрузки страницы и мгновенно просматривать изменения CSS.
В этой статье будет рассказано, как отображать классы CSS и применяемые к ним стили в окне «Проверить элемент». Также будет рассказано, как использовать его для предварительного просмотра изменений, которые вы вносите в CSS, в режиме реального времени. Проверять Как центрировать изображения с помощью CSS.
Откройте элемент проверки в Google Chrome.
Вы можете посетить любой веб-сайт и открыть окно «Проверить элемент», чтобы увидеть, как выглядит его код HTML или CSS. Этот учебник будет использовать Шаблон сайта в целях разъяснения.
Вы можете открыть окно Inspect Element в Google Chrome, нажав клавишу F12. Вы также можете щелкнуть правой кнопкой мыши в любом месте страницы и выбрать فحص.
Откроется окно «Проверить элемент» с HTML-кодом той части веб-сайта, на которой вы щелкнули правой кнопкой мыши. Здесь вы также можете редактировать текст веб-сайта с помощью Google Chrome.
Вкладка «Стили» в окне «Проверить элемент»
В том же окне Inspect Element на вкладке Elements Есть место для отображения как HTML, так и CSS кода. Вы можете увидеть код HTML слева от окна проверки элементов. В то время как вы можете найти код CSS слева, на вкладке «Стили».
Допустим, у вас есть элемент HTML с классом "card-padding" с пробелами слева и справа:
.card-padding { padding-right: 0vh; padding-left: 0vh; }
Если вы просмотрите этот веб-сайт в браузере, вы сможете выбрать элемент DIV С категорией «card-padding». Любой стиль, примененный к категории «card-padding», появится слева на вкладке «Стили».
При наведении курсора на элемент в представлении HTML-кода эта часть веб-страницы будет выделена в веб-браузере. Тип элемента HTML с любыми именами классов также будет отображаться в диалоговом окне рядом с элементом.
В этом случае вы увидите контейнер DIV С названиями категорий «row», «card-padding» и «pb-5», выделенными на странице.
Как вносить изменения в CSS в режиме реального времени
Вы можете изменить CSS прямо из вкладки Стили:
- с помощью этот сайт Щелкните правой кнопкой мыши по первому адресу.
- В этом конкретном адресе h4 вы увидите примененный к нему класс, называемый «текст-серый» с цветом # 8a8a8a.
- Вместо этого измените цвет на другой цвет, например оранжевый. Просто измените само значение, а не имя свойства «цвет».
- Вы заметите, что заголовок изменился с темно-серого на оранжевый.
- Если вы хотите отключить определенный стиль CSS, снимите флажок слева от стиля.
- Вы также можете добавить больше шаблонов к исходному набору. Щелкните ниже или справа от свойства, чтобы начать добавление нового свойства. Вы должны использовать тот же синтаксис, что и в обычном файле CSS, при добавлении новых стилей.
- Если вы предварительно просматриваете локальный веб-сайт, вы можете продолжать вносить изменения в CSS, пока не приблизитесь к желаемому внешнему виду вашего пользовательского интерфейса. Затем вы можете скопировать свои изменения CSS обратно в фактический локальный код.
Проверять Веселые игры, которые помогут вам легко изучить программирование на CSS.
Как изменить CSS из внешних библиотек или фреймворков
Вы также можете вносить изменения в элементы HTML, если используете сторонние библиотеки или фреймворки, такие как Bootstrap.
- с помощью этот сайт , щелкните правой кнопкой мыши одну из кнопок Bootstrap на странице.
- Вы увидите две категории, примененные к кнопке: «btn» и «btn-basic». Bootstrap уже имеет собственный стиль, применяемый к обоим классам. Цвета, которые используются в качестве цветов фона и границ, #007bff. Измените его на что-то другое, например, на фиолетовый.
- Если вы предварительно просматриваете локальный веб-сайт, вы можете добавить новые изменения обратно в свой локальный код. В зависимости от вашего порядка CSS вам может понадобиться использовать более конкретный селектор CSS. Например, начните разделитель с «.btn». Это заменит исходный дизайн Bootstrap.
.btn.btn-primary { background-color: violet; border-color: violet; }
Что означает element.style в таблице стилей?
Каждый элемент HTML, который вы отмечаете в окне проверки элементов, содержит блок element.styles. Это эквивалентно добавлению встроенного стиля к элементу HTML, а не выбору его с помощью селектора.
- Щелкните правой кнопкой мыши элемент HTML. Добавьте любой стиль в раздел element.style, например:
color: whitesmoke;
- Вы заметите, что код элемента HTML также изменился. Код в элементе HTML теперь содержит новую строку:
style=”color: whitesmoke;”
Как наследовать дочерние HTML-элементы дизайна
Если у вас есть два разных значения стиля, примененных к родительскому элементу и дочернему элементу, значение в дочернем элементе будет иметь приоритет.
- с помощью Веб-сайт , щелкните правой кнопкой мыши в любом месте на внешних краях веб-сайта.
- В разделе HTML окна «Проверить элемент» сосредоточьтесь на двух конкретных элементах HTML. Есть элемент DIV Оригинал с примененной к нему категорией «Контент». Этот элемент HTML содержит дочерний элемент h4 , с примененным к нему классом text-gray.
- Выберите элемент HTML h4 подпапку и отключите цветовой стиль в классе «text-grey».
- Выберите исходный HTML-элемент с классом Content. Добавьте следующий стиль CSS в свой класс:
color: red;
Весь текст внутри изменит цвет DIV Происхождение красное. Это изменение также коснется дочерних элементов, что означает, что h4 Он также будет иметь красный цвет.
- Выберите дочерний элемент HTML h4 и добавьте новый стиль в класс text-grey:
color: green;
Это переопределит дизайн любых исходных классов. HTML-элемент H4 изменит свой цвет с красного на зеленый.
- Вы также увидите линию, если просматриваете стиль категории «Содержание». Это подтверждает, что подэлемент h4 Переопределяет исходный цвет.
Преимущества отладки CSS в браузере
Отладка CSS в вашем браузере может сэкономить много времени и ускорить рабочий процесс программирования. Это особенно актуально, если вам нужно увидеть, как новые изменения CSS влияют на пользовательский интерфейс вашего сайта в режиме реального времени.
Вы можете использовать этот метод вместо того, чтобы вносить изменения в свой локальный код и перезагружать приложение. Это избавит вас от необходимости гадать, какие значения CSS будут работать, поскольку теперь вы можете просматривать изменения пользовательского интерфейса по мере их внесения.
Вы можете внести изменения в окно Inspect Element, чтобы приблизиться к желаемому дизайну. Как только это будет сделано, вы можете скопировать код из окна Inspect Element обратно в свой локальный код. Вы все еще можете перезапустить свое приложение, чтобы проверить, что ваши новые изменения CSS все еще работают. Проверять Как использовать инструмент «Проверить элемент» в Firefox для сканирования любого веб-сайта.
Другие полезные инструменты проверки
В этом руководстве были рассмотрены основы отладки CSS для веб-сайта с помощью окна «Проверить элемент», в том числе где найти код CSS на вкладке «Стили».
Также было рассказано, как вносить изменения в CSS и отображать изменения, видимые в пользовательском интерфейсе, в режиме реального времени. Мы надеемся, что вы также понимаете, как вносить изменения, когда CSS использует стороннюю библиотеку, и как работает наследование дизайна.
Есть много других интересных вещей, которые вы можете сделать с окном Inspect Item. Теперь вы можете просмотреть Как использовать Chrome DevTools для устранения проблем с веб-сайтом.