Как применить CSS с помощью инструмента разработчика браузера

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

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

Большинство браузеров предоставляют собственный встроенный инструмент разработчика. Большинство из них похожи, но имеют несколько разных вариантов. Учитывая, что почти 66% пользователей используют Chrome, в этом руководстве мы сосредоточимся на Инструмент разработчика Chrome. Это один из самых полных браузеров, который отличается от других браузеров своей производительностью и разнообразием функций.

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

ПРИМЕЧАНИЕ . Здесь мы объясним некоторые концепции, но для того, чтобы следовать этому руководству, мы рекомендуем вам иметь общее представление о CSS и о том, как он работает.

Инструмент разработчика Chrome

Во-первых, вам нужно открыть инструмент в Chrome. Для этого есть 3 варианта:

• Нажмите F12 на ключевом слове
• Щелкните правой кнопкой мыши в любом месте экрана и выберите « Проверить ».
• Нажмите значок с тремя точками в правом верхнем углу рядом с вашим аватаром пользователя и выберите Дополнительные инструменты > Инструмент разработчика.

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

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

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

Как найти элемент HTML в инструменте разработчика браузера

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

Глядя на различные элементы, вы можете увидеть родительские элементы HTML. Вы можете погрузиться в структуру HTML, открывая каждый элемент одним щелчком мыши. На большинстве сайтов HTML-код довольно длинный, поэтому поиск определенного элемента может быть утомительным. Тем более, если элемент, который вы ищете, глубоко вложен в большой список родительских элементов HTML.

Однако есть гораздо более простой способ найти конкретный элемент.

Поиск определенных элементов

Просто щелкните правой кнопкой мыши элемент, который хотите проанализировать, и выберите « Проверить» .

Когда инспектор откроется, этот элемент будет выбран и выделен в DevTools .

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

Теперь, когда вы знаете, как выбирать определенные элементы с помощью инструмента разработчика, давайте сделаем еще один шаг и добавим немного пользовательского CSS.

Редактирование скрипта CSS в реальном времени

Если вы посмотрите на правую часть окна инструмента разработчика, вы увидите все правила CSS, которые применяются к выбранному вами элементу, отсортированные по наследству.

Наследование — одна из основных концепций CSS, описывающих функциональность CSS. Не беспокойтесь, если вы не совсем понимаете, что это такое, мы объясним это в следующем разделе.

Чтобы применить свои собственные правила CSS к инструменту разработки, вам нужно ввести или вставить их туда сразу после объявления стиля элемента:

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

Вы также можете вставить свои сценарии в любое из правил CSS на боковой панели вместо того, чтобы делать это в обёртке element.style .

Наследование CSS в инструменте разработчика браузера

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

Как упоминалось ранее, это все правила CSS, применяемые к выбранному элементу, отсортированные по наследству.

Концепция наследования описывает, как CSS применяется к HTML-документу . По сути, он контролирует, что происходит, когда для свойства данного элемента не указано значение.

Если вы внимательно посмотрите на скриншот ниже, вы увидите, что все селекторы CSS на боковой панели нацелены на один и тот же элемент: элемент, выбранный вами в основном разделе.

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

На приведенном выше снимке экрана свойство background-color элемента <body> задается следующим правилом:

 body.custom-фон {
цвет фона: #d8d7e2;
}

Это переопределяет все остальные правила, применимые к <body> , потому что у него есть более конкретный селектор, включающий .custom-background .

Если вы хотите узнать больше о наследовании CSS, вы можете ознакомиться с этой документацией.

Теперь, когда вы лучше понимаете его элементы, давайте посмотрим, как можно применить CSS с помощью инструмента разработчика браузера.

Как применить скрипт CSS с помощью инструмента разработчика браузера

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

1) Получить селектор CSS

Во-первых, вы должны схватить селектор. Откройте инструмент разработчика и щелкните элемент HTML, который вы хотите отредактировать, чтобы он выделился. Затем щелкните правой кнопкой мыши выделенный элемент и выберите « Копировать» > «Селектор CSS» .

2) Уточните селектор

На приведенном выше снимке экрана селектор CSS, который мы скопировали в буфер обмена, выглядит следующим образом:

 .site-branding > div:nth-child(1) > span:nth-child(1) > img

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

 div.site-branding > div.site-logo > span.custom-logo-link > img.custom-logo

3) Скопируйте правило CSS

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

Для этого щелкните правой кнопкой мыши правило CSS, которое вы добавили в инструмент разработки, и выберите « Копировать правило ».

4) Добавьте свой CSS-код на свой сайт.

Последним шагом является добавление пользовательского кода CSS, который вы только что создали с помощью инструмента разработки браузера, в файлы стилей вашего веб-сайта, объединяющие селектор и объявление.

В зависимости от ваших настроек может быть несколько способов включить ваш пользовательский CSS на ваш сайт. Многие плагины и темы предоставляют свой собственный редактор CSS, и вы также можете добавлять скрипты прямо в файлы CSS темы. Давайте рассмотрим несколько разных вариантов.

4.1) Дополнительный CSS-редактор настройщика темы

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

Чтобы добавить свой код CSS на свой сайт, на панели управления выберите « Внешний вид» > «Настроить» > «Дополнительный CSS». Вставьте свои правила CSS в редактор и нажмите « Опубликовать» .

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

4.2) CSS файл дочерней темы

Если вы используете дочернюю тему, вы можете добавить пользовательские скрипты в файл style.css . Это хороший вариант, если у вас много кода CSS.

Для этого откройте файл style.css дочерней темы и вставьте туда свои правила CSS. В зависимости от вашей дочерней темы файл может иметь другое имя или могут быть какие-то другие файлы. В любом случае убедитесь, что файл имеет расширение .css и что вы редактируете правильный файл.

Другой альтернативой редактированию файлов WordPress вашей дочерней темы является использование редактора тем на вкладке «Внешний вид» панели управления WordPress.

Сценарии CSS, которые вы добавите сюда, будут работать так же, как и в настройщике темы, но их производительность может быть несколько выше.

Проверьте файлы CSS в инструменте разработчика браузера

В предыдущем разделе мы объяснили, как добавить скрипты CSS на ваш сайт WordPress. Как вы можете себе представить, все правила CSS, которые вы видите в инструменте разработчика, взяты из файла CSS. Эти файлы могут быть созданы веб-сайтом динамически, загружены с сервера или из кэшированного файла клиентского браузера.

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

Если вы нажмете на имя файла ( style.css ), вы перейдете на экран редактора стилей инструмента разработчика, где вы увидите все активные файлы CSS и их содержимое.

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

Вывод

В целом, большинство браузеров включают в себя очень мощные инструменты разработчика, которые разработчики используют ежедневно. В этом руководстве мы показали вам одну из основных функций инструмента разработчика браузера. Мы увидели, как находить определенные элементы HTML в инструменте разработки и как редактировать CSS в реальном времени. Кроме того, мы объяснили наследование CSS и почему это важно.

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

Если этот урок показался вам интересным, поделитесь им с друзьями в социальных сетях. Дополнительные полезные руководства по улучшению вашего сайта см. в следующих статьях:

• Как настроить меню Divi с помощью CSS
• Как редактировать страницу магазина WooCommerce с помощью PHP и CSS