Как просмотреть и извлечь CSS

1. Что такое CSS?

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

Поскольку этот код выполняется в браузере пользователя, он называется клиентским (или интерфейсным) кодом. Он включает в себя то, что пользователь видит и с чем взаимодействует, например тексты, изображения, списки, заголовки, ссылки, меню и т.д.

В принципе, существует три ключевых клиентских метода / языка:

• HTML: определяет структуру веб-страницы, иерархию ее элементов и их содержимое.
• JavaScript: определяет, как изменяются элементы HTML в ответ на определенные взаимодействия или события.
• CSS: определяет, как элементы HTML визуально позиционируются и отображаются.

Соответственно, CSS (каскадные таблицы стилей) — это технология на стороне клиента, которая представляет макет и визуальный вид веб-страницы. Он определяет, как элементы расположены рядом друг с другом, и как выглядят их текст, цвета фона и шрифты при посещении пользователями.

Тем не менее, без стилей браузеры будут отображать необработанные элементы страницы рядом друг с другом без какого-либо стиля или макета.

Обычно CSS-код состоит из нескольких правил, каждое правило содержит два элемента:

• Селектор: указывает HTML-элемент / ы, на которые будет влиять стиль.
• Свойства: стиль, который будет применен к выбранным элементам.

2. Пример CSS-кода

Мы представляем пример правила CSS и то, как оно влияет на конкретный HTML-элемент, как показано на снимке ниже.

В этом примере мы меняем background color и font weight любого HTML-элемента, который имеет class атрибут equals selected. При условии, что этот элемент является дочерним по отношению к ul элементу, который, в свою очередь, является дочерним по отношению к другому HTML-элементу с id атрибутом equals categories, причем этот последний элемент является дочерним по отношению к родительскому div элементу.

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

Для получения более подробной информации о том, как работают селекторы, мы рекомендуем обратиться к этому руководству от W3Schools.

3. Три способа использования CSS-кода

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

Правила CSS могут быть вставлены в веб-страницы тремя различными способами:

3.1. Внешний CSS

При использовании внешнего стиля правила записываются в отдельный документ (файл внешней таблицы стилей) с .css расширением. Затем link ссылка на этот документ вставляется в head раздел HTML-страницы.

Этот .css файл обычно загружается как часть файлов страниц и интерпретируется в браузере при посещении пользователем веб-сайта.

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

3.2. Внутренний CSS

С помощью внутреннего стиля правила вставляются непосредственно в head (или иногда body) раздел веб-страницы, внутри <style> тега.

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

3.3. Встроенный CSS

Во встроенных стилях свойства вводятся непосредственно в отдельный HTML-элемент в его атрибуте style. Здесь стиль влияет только на этот элемент. Таким образом, он используется для применения уникального стиля к одному элементу.

Здесь нет необходимости в селекторе, поскольку свойства уже добавлены к определенному HTML-элементу.

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