Редактирование CSS

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

Второе правило в приведенном выше примере применяется к элементам HTML, помеченным <p>, поскольку оно начинается с p. Это правило относительно простое, так как оно просто устанавливает оранжевый цвет текста.

Имейте в виду, что на большинстве веб-сайтов больше контента и больше правил, но вы можете использовать приведенный выше пример, чтобы создать свой собственный CSS. Лучший способ сделать это — создать базовый HTML-код с абзацем и заголовком. Вы также можете попробовать элементы списка (<li> и <ul>), чтобы включить в свой CSS еще больше наборов правил.

Как на самом деле работает CSS

После того как вы загрузили и проанализировали содержимое HTML и стили CSS, процесс их объединения происходит в два отдельных этапа. Сначала браузер преобразует их в объектную модель документа (DOM). Как только DOM объединит содержимое и стиль документа и станет представлением документа в памяти компьютера, браузер отобразит содержимое.

Понимание DOM

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

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

Рассмотрим следующий HTML:

В DOM узел, соответствующий HTML-элементу <p>, будет родителем. Дочерними узлами будут текстовые узлы, а также те, которые соотносятся с элементами <span>. Каждый узел <span> также служит родителем, каждый из которых имеет дочерние узлы в виде текстовых узлов. Браузер интерпретирует приведенный выше фрагмент HTML как дерево DOM ниже.

п

├─ «Скажем:»

├─ ПРОЛЕТ

| └─ «Привет»

├─ ПРОЛЕТ

└─ «Мир»

Без добавления какого-либо кода CSS браузер просто интерпретировал бы фрагмент HTML как обычный текст через DOM, появляющийся как «Скажем: Hello World» без каких-либо изменений в цвете, шрифте или стиле.

Применение CSS к DOM

Продолжая приведенный выше пример, ваш класс CSS может показать, что происходит с DOM и результирующим отображением, если вы стилизуете документ с помощью CSS. Используя тот же вышеприведенный фрагмент HTML:

Примените следующий CSS:

Основываясь на приведенном выше объяснении, мы знаем, что браузер начнет с разбора HTML. Этот процесс приведет к созданию вышеуказанного DOM из предыдущего раздела, а затем к разбору CSS. В CSS есть только одно правило, в котором используется селектор диапазона. Таким образом, это правило будет применяться к каждому вхождению <span> в HTML, а их всего два.

Благодаря CSS вместо простого обычного текста «Скажем: Hello World» к нему будут прикреплены стилистические элементы: каждое «Hello» и «World» появится в поле с красным внутренним цветом и рамкой, сплошная розовая линия толщиной 1 пиксель.

Методы применения CSS к HTML

Существует несколько способов применения кода CSS для стилистических изменений HTML.

Через внешние таблицы стилей

Когда код CSS помещается в полностью отдельный файл, это называется внешней таблицей стилей. Файл имеет расширение .css и ссылается на него через элемент <link> в HTML.

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

Через внутренние таблицы стилей

Другой метод применения CSS к вашему HTML — использование внутренней таблицы стилей. В этом случае, вместо того, чтобы помещать CSS во внешний файл, вы помещаете его в заголовок HTML, где он находится внутри элемента <style>.

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

Встроенные стили

Встроенные стили — это определенные объявления CSS, которые влияют на один элемент в HTML. В отличие от внутренних таблиц стилей, встроенные стили находятся в атрибуте стиля, а не в элементе <style>.

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

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

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