Что такое css простыми словами: CSS — что это такое? Для чего используется?

Содержание

что это такое – для чего нужны стили на сайте

CSS – это формальный язык, отвечающий за описание внешнего вида документа (HTML, XHTML, XML). Расшифровка аббревиатуры Cascading Style Sheets дословно означает «каскадные таблицы стилей». Сегодня работа большинства сайтов построена на связке HTML+CSS.

Немного истории

Изначально разработчики применяли только язык HTML. Используя разметку, они выделяли параграфы, заголовки, изменяли начертание текста. Сейчас этих возможностей объективно мало, поэтому и появилась технология, которая помогает форматировать и при этом сохранять содержание и структуру. Необходимость ее разработки была упомянута консорциумом W3C еще 90-е годы прошлого века. Первый стандарт CSS1 был принят в 1996 году. Согласно ему, можно было менять цвет, параметры шрифта, выравнивания, отступы, атрибуты текста. В 1998 году вышел CSS2, который добавил возможностей использования блочной верстки, генерируемого содержания, звуковых таблиц и др. А с выходом версии CSS3 еще больше увеличились возможности стилей. Теперь для создания анимированных элементов не нужно применять JavaScript. Спецификацию поделили на модули, и каждый из них стал развиваться самостоятельно. С 2011 года разрабатываются модули CSS4.

Значение CSS

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

Разберем по пунктам, зачем нужны каскадные таблицы стилей:

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

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

Структура языка

Так, что же такое CSS? Это набор правил внешнего оформления документа. Формирование каждого правила происходит из селектора и блока объявлений.

Селекторы

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

«Тег.Класс {свойство: значение;}»

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

С помощью идентификатора задается уникальное имя элемента для изменения стиля или обращения посредством скрипта. Запись имеет следующий вид:

«#Идентификатор {свойство: значение;}»

Название также пишется буквами латинского алфавита, допускаются дефис и подчеркивание. Для применения идентификатора к конкретному тегу необходимо указать его имя, а следом через знак решетки название идентификатора (без пробела).

Блок объявлений

Данный элемент CSS состоит из парной комбинации и имеет вид «свойство: значение». Записывается всегда в фигурных скобках и через двоеточие, а заканчивается точкой с запятой. CSS нечувствителен к пробелам и регистру. Разработчик сам выбирает способ записи, который ему удобен: в строчку или столбиком с отступами. Если для одного селектора указаны разные значения по одному свойству, то в приоритете будет всегда нижняя запись.

Практическая интеграция CSS

Существует несколько способов для связи CSS и HTML:

использование атрибута style внутри тега. В таком случае селектор указывать не нужно;
добавление тега <style> с атрибутом type=»text/css»;
подключение внешней таблицы стилей: <link rel=»stylesheet» href=»директория style.css» type=»text/css»/>.

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

что это простыми словами, где применяется в CSS

Содержание

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

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

Логотип Flexbox

В верстке есть такое понятие, как сетка, или лэйаут (layout). Это то, как блоки — крупные и мелкие — расположены на странице. Списки, наборы ссылок, виджеты и статьи — все это распределено по веб-странице не хаотично, а по определенной структуре. Эта структура и есть сетка. Flex — один из способов ее задать.

Flexbox появился в CSS 3.0. До него для построения сеток использовали таблицы и float’ы — команды для смещения элементов в сторону. Это было неудобно, трудоемко и сильно ограничивало возможности верстки. Благодаря Flexbox верстать стало удобнее и легче, появилась возможность реализовать более интересные дизайнерские идеи.

Flexbox расшифровывается как Flexible Box — гибкий ящик или блок. Гибкость — основная идея этого способа. Читается как «флексбокс» или просто «флекс».

Курс Frontend- разработчик PRO Получите перспективную творческую профессию и знания уровня middle. Вы изучите JavaScript и TypeScript. За время обучения вы выполните 5 проектов на JavaScript и получите 13 проектов в портфолио.

Подробнее

Кто пользуется Flexbox

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

Для чего нужен Flexbox

Flexbox — один из двух современных методов построения сеток страницы.

Сетка — своеобразный каркас, который описывает, как расположены элементы. Благодаря ей веб-страницы выглядят понятно и аккуратно, а блоки не «плывут» вразнобой. Флексы используют для построения больших и малых сеток.

Большие, основные сетки — это те, которые описывают положение крупных блоков. Например, это заголовки, текстовые блоки, боковые блоки со ссылками и виджетами и так далее.
Малые, микросетки — это сетки внутри крупных блоков. Они описывают, как в них располагаются более маленькие элементы: ссылки, тексты, картинки и так далее.

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

Как работает Flexbox

Принцип работы флексбокса — выстраивание элементов внутри какого-то крупного блока по прямой оси. Распределение и поведение этих элементов описывает верстальщик.

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

display: flex;

Эту команду можно прочитать как «способ отображения: флексбокс». После этого все, что находится внутри контейнера, будет подчиняться правилам флекса — превратится во флекс-элементы. Но это касается только прямых потомков — блоков непосредственно в контейнере. Если внутри них тоже вложены какие-то элементы, на них правила не распространятся.

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

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

Ось можно представить как линию графика, а элементы — как точки на ней. Это упрощает понимание.

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

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

Например, можно указать, чтобы крайние элементы в ряду прижимались к краям контейнера, а элементы между ними распределялись равномерно. Это свойство justify-content: space-between. В таком случае, каким бы ни был размер экрана пользователя, элементы будут расположены одинаково. Просто на маленьком экране пространство между ними будет меньше, а на крупном — больше. А если экран будет совсем маленьким, элементы сожмутся или перенесутся на другую строку в зависимости от того, какое поведение задал верстальщик.

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

Изменение параметров. Для каждого параметра — особенностей отображения и поведения элементов, изменения оси и так далее — есть свое CSS-свойство. Нужно применить его к требуемому флекс-контейнеру или флекс-элементу — прописать это свойство с нужными значениями.

CSS дает возможность изменять свойства в зависимости от условий. Стилевой язык работает по каскаду: то, что написано ниже в коде, «перекрывает» написанное раньше. Поэтому в нижней части файла стилей можно задать другое поведение, скажем, для крупных экранов — тогда, если расширение экрана пользователя окажется большим, элементы будут вести себя иначе.

Можно, например, изменить направление оси, выравнивание элементов по ней и другие особенности. Можно и вовсе удалить флекс-контейнер: применить свойство display с другим значением, не flex. Тогда все правила, связанные с флексом, автоматически перестанут работать.

Какие возможности дает Flexbox

Мы уже говорили, что поведением элементов на оси можно гибко управлять. Это причина, по которой флекс так удобен: достаточно задать набор правил, и флекс-элементы будут автоматически выстраиваться в соответствии с ним. Вот что можно сделать.

Изменять ось. С помощью команды flex-direction можно изменить направление оси. У команды есть четыре значения:

row — ряд, горизонтальная линия слева направо;
reverse-row — ряд справа налево;
column — колонка, вертикальная линия сверху вниз;
reverse-column — колонка снизу вверх.

Чаще всего пользуются значениями row и column. Row хорошо подходит для горизонтальных меню, списков и так далее — элементов, которые расположены «в строку». А column — для наборов элементов, расположенных вертикально, «в столбик».

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

У него есть такие значения:

flex-start или просто start — выравнивать по «начальной точке» оси, то есть по левому краю для row или по верхнему для column;
flex-end или end — выстраивать по «конечной точке», правой или нижней;
center — концентрировать элементы в центре;
space-between — прижимать крайние элементы к левому и правому краям, а элементы между ними распределять равномерно;
space-around — то же самое, но с отступами от левого и правого края для крайних элементов. Каждый отступ от края в два раза меньше, чем отступы между элементами;
space-evenly — то же самое, но отступы от краев такие же, как между элементами.

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

Выравнивать элементы. Можно выстроить элементы не только вдоль оси, но и «поперек» нее: для row — по вертикали, для column — по горизонтали. Поведение описывается свойством align-items.

Его значения похожи на justify-content, но все же отличаются:

stretch — элементы растягиваются поперек оси и заполняют все свободное пространство по обе стороны от нее;
start — элементы сохраняют свой размер и выравниваются по верхнему или левому краю;
center — элементы группируются по центру. Можно сказать, что их центральная часть «закреплена» на оси;
end — элементы выравниваются по нижнему или правому краю;
baseline — выравнивание происходит по «базовой линии» контента.

Помните, что в этом случае речь идет не об основном, а о вспомогательном направлении.

То есть, если ось идет горизонтально (row), то свойство align-items будет распределять элементы в ряду по вертикали, и наоборот — для column.

Изменять поведение контента и элемента. Кроме align-items, также есть похожие свойства, но управляющие немного другими сущностями:

order определяет порядок расположения — где будет находиться конкретный элемент;
align-content похоже на align-items, работает только для многострочных контейнеров — там, где элементы переносятся на другую строку. Это свойство определяет расположение строк относительно контейнера. Значения у него такие же, как у justify-content;
align-self — это align-items для отдельного элемента. Свойство задается не контейнеру, а одному из элементов внутри него. Оно «переписывает» значение align-items для конкретного элемента. Например, все остальные могут быть растянуты по stretch, а один, измененный с помощью align-self, — располагаться по центру (center).

Напрашивается идея с justify-self, но во флексбоксе такое свойство не работает — расположение каждого из элементов на оси слишком зависит от других. Зато оно есть в других способах распределения.

Управлять переносом элементов. Что, если элементов станет слишком много и они не поместятся на оси? В таком случае есть два варианта поведения:

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

Этим поведением управляет свойство flex-wrap. По умолчанию его значение — nowrap, то есть не переносить, а сжимать. Если указать значение wrap, элементы будут переноситься на другую строку, а wrap-reverse — будут переноситься, но в противоположном направлении. То есть новая строка возникнет не снизу, а сверху.

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

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

flex-grow — управляет расширением отдельного элемента. Значение задается как целое положительное число, по умолчанию оно 1 для каждого элемента. Если увеличить это значение, элемент начнет «требовать» себе больше места на оси, чем другие;

flex-shrink — управляет сжатием отдельного элемента. По умолчанию значение для всех элементов — 1. Если поставить его как 0, элемент вообще не будет сжиматься, а если увеличить до 2, 3 и так далее — будет сжиматься сильнее других;
flex-basis — устанавливает «базовый» размер элемента, относительно которого он будет расширяться и сжиматься.

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

Для каких элементов обычно используют Flexbox

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

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

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

Преимущества Flexbox

Гибкость. Возможность гибко управлять положением элементов — одно из главных преимуществ флекса. Благодаря ей он намного удобнее предыдущих способов построения сеток и позволяет не задумываться о размерах элементов вплоть до пикселя. С помощью Flexbox можно настроить автоматическое выравнивание и распределение по оси, а не задавать все эти параметры вручную.

Адаптивность. Flex отлично подходит для создания «резиновой» верстки, когда размеры элементов меняются в зависимости от параметров экрана. Такая верстка — хорошая практика по сравнению со статической, потому что лучше выглядит на разных устройствах. У нее ниже риск «развалиться» и стать нефункциональной.

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

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

Адаптация под разные языки. Выше мы рассказывали про значения reverse-row, reverse-column и reverse-wrap и говорили, что они используются редко. Но это справедливо только для латиницы и кириллицы. Во многих языках практикуется чтение справа налево — эти свойства отлично подходят для адаптации веб-страниц под такие языки. Особенно удобно, если страница существует на разных языках с разными способами чтения: например, на английском и фарси.

Риск «выпадания». Флекс не универсален. Большинство его минусов связано с позиционированием элементов. Из-за того, что оно автоматическое, возможны ситуации, когда что-то ломается или выпадает. Если такое случится, верстка станет непригодной к использованию.

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

Таких ситуаций можно избегать — заранее предусматривать в верстке защиту от переполнения. Например, сразу прописывать возможность переноса и его параметры.

Риск «расползания верстки». Есть и еще одна ситуация — явление, когда при определенных условиях элементы начинают располагаться некрасиво. Выше мы рассказывали, что свойство space-between хорошо подходит для «растягивания» элементов в горизонтальном меню и что тут есть деталь. Это один из примеров такого поведения.

Горизонтальное меню со space-between смотрится отлично, пока его пунктов не становится много. Включается защита от переполнения, и лишние пункты переносятся на другую строку. И тут space-between играет плохую службу: если лишних пунктов два, они «приклеиваются» к краям контейнера, а по центру остается пустая область. А изменить расположение элементов только по одной строке нельзя.

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

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

Как начать пользоваться Flexbox

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

Узнать больше про верстку и фронтенд вы можете на наших курсах. Получите новую интересную профессию — станьте востребованным специалистом!

Подробнее

Другие термины на букву «F»

Flask
FTP
FYI

← Все термины

Как работает CSS? | Berkeley Coding Bootcamp

Как работает CSS? | Учебный курс по программированию в Беркли

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

Более глубокое понимание CSS

В качестве языка стилей CSS определяет способ просмотра документов пользователями, от макета до стиля. Затронутые документы обычно представляют собой текстовые файлы, структура которых определяется языком разметки, наиболее распространенным из которых является HTML, однако также популярны XML и SVG. Чтобы представить документ пользователю, CSS преобразует его из текстового файла в пригодную для использования форму. В браузерах эта презентация происходит на экране компьютера, принтере или проекторе.

Влияние CSS на HTML

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

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

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

Правила CSS хранятся в таблице стилей, которая определяет внешний вид веб-страницы. При некотором опыте и обучении типичный синтаксис CSS становится очевидным.

Ниже мы рассмотрим базовый пример кода CSS с двумя правилами:

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

в HTML. Код CSS имеет три отдельных свойства, каждое из которых имеет свои собственные значения в виде пары, известной как объявление.

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

Второе правило в приведенном выше примере применяется к элементам HTML, помеченным

, поскольку оно начинается с p. Это правило относительно простое, так как оно просто устанавливает оранжевый цвет текста.

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

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

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

Понимание DOM

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

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

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

В DOM узел, соответствующий HTML-элементу

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

├─ «Скажем:»

├─ SPAN

| └─ «Hello»

├─ SPAN

└─ «World»

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

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

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

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

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

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

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

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

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

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

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

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

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