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

How CSS works

We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, and HTML basics (study Introduction to HTML.)
Objective:	To understand the basics of how CSS and HTML are parsed by the browser, and what happens when a browser encounters CSS it does not understand.

How does CSS actually work?

When a browser displays a document, it must combine the document’s content with its style information. It processes the document in a number of stages, which we’ve listed below. Bear in mind that this is a very simplified version of what happens when a browser loads a webpage, and that different browsers will handle the process in different ways. But this is roughly what happens.

1. The browser loads the HTML (e.g. receives it from the network).
2. It converts the HTML into a DOM (Document Object Model). The DOM represents the document in the computer’s memory. The DOM is explained in a bit more detail in the next section.
3. The browser then fetches most of the resources that are linked to by the HTML document, such as embedded images, videos, and even linked CSS! JavaScript is handled a bit later on in the process, and we won’t talk about it here to keep things simpler.
4. The browser parses the fetched CSS, and sorts the different rules by their selector types into different «buckets», e.g. element, class, ID, and so on. Based on the selectors it finds, it works out which rules should be applied to which nodes in the DOM, and attaches style to them as required (this intermediate step is called a render tree).
5. The render tree is laid out in the structure it should appear in after the rules have been applied to it.
6. The visual display of the page is shown on the screen (this stage is called painting).

The following diagram also offers a simple view of the process.

About the DOM

A DOM has a tree-like structure. Each element, attribute, and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document’s content meet up. When you start working with browser DevTools you will be navigating the DOM as you select items in order to see which rules apply.

A real DOM representation

Rather than a long, boring explanation, let’s look at an example to see how a real HTML snippet is converted into a DOM.

Take the following HTML code:

p> Let's use: span>Cascadingspan> span>Stylespan> span>Sheetsspan> p> 

In the DOM, the node corresponding to our

element is a parent. Its children are a text node and the three nodes corresponding to our elements. The SPAN nodes are also parents, with text nodes as their children:

P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets"

This is how a browser interprets the previous HTML snippet — it renders the above DOM tree and then outputs it in the browser like so:

p  margin: 0; > 

Applying CSS to the DOM

Let’s say we add some CSS to our document, to style it. Again, the HTML is as follows:

p> Let's use: span>Cascadingspan> span>Stylespan> span>Sheetsspan> p> 

Let’s suppose we apply the following CSS to it:

span  border: 1px solid black; background-color: lime; > 

The browser parses the HTML and creates a DOM from it. Next, it parses the CSS. Since the only rule available in the CSS has a span selector, the browser sorts the CSS very quickly! It applies that rule to each one of the three s, then paints the final visual representation to the screen.

The updated output is as follows:

In our Debugging CSS article in the next module we will be using browser DevTools to debug CSS problems, and will learn more about how the browser interprets CSS.

What happens if a browser encounters CSS it doesn’t understand?

The «Browser support information» section in the «What is CSS» article mentioned that browsers do not necessarily implement new CSS features at the same time. In addition, many people are not using the latest version of a browser. Given that CSS is being developed all the time, and is therefore ahead of what browsers can recognize, you might wonder what happens if a browser encounters a CSS selector or declaration it doesn’t recognize.

The answer is that it does nothing, and just moves on to the next bit of CSS!

If a browser is parsing your rules, and encounters a property or value that it doesn’t understand, it ignores it and moves on to the next declaration. It will do this if you have made an error and misspelled a property or value, or if the property or value is just too new and the browser doesn’t yet support it.

Similarly, if a browser encounters a selector that it doesn’t understand, it will just ignore the whole rule and move on to the next one.

In the example below I have used the British English spelling for color, which makes that property invalid as it is not recognized. So my paragraph has not been colored blue. All of the other CSS have been applied however; only the invalid line is ignored.

p>I want this text to be large, bold and blue.p> 

p  font-weight: bold; colour: blue; /* incorrect spelling of the color property */ font-size: 200%; > 

This behavior is very useful. It means that you can use new CSS as an enhancement, knowing that no error will occur if it is not understood — the browser will either get the new feature or not. This enables basic fallback styling.

This works particularly well when you want to use a value that is quite new and not supported everywhere. For example, some older browsers do not support calc() as a value. I might give a fallback width for a box in pixels, then go on to give a width with a calc() value of 100% — 50px . Old browsers will use the pixel version, ignoring the line about calc() as they don’t understand it. New browsers will interpret the line using pixels, but then override it with the line using calc() as that line appears later in the cascade.

.box  width: 500px; width: calc(100% - 50px); > 

We will look at many more ways to support various browsers in later lessons.

Summary

You’ve nearly finished this module — we only have one more thing to do. In the Styling a biography page assessment you’ll use your new knowledge to restyle an example, testing out some CSS in the process.

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on Aug 2, 2023 by MDN contributors.

Your blueprint for a better internet.

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Задавались когда-нибудь вопросом, как работает CSS Flexbox? Наглядно объясняем возможности технологии с использованием анимации.

CSS Flexbox — это технология для создания сложных гибких макетов за счёт правильного размещения элементов на странице. О самой технологии пишут здесь. Мы же решили объяснить возможности CSS Flexbox с использованием гифок — настоящая flex шпаргалка.

Разберёмся, как работает display flex CSS. Есть страница:На ней размещено 4 div разных размеров, которые находятся внутри серого div . У каждого div есть свойство display: block . Поэтому каждый блок занимает всю ширину строки. И вот как реализовать CSS display flex. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex контейнером. Делается это так:

#container

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

flex-direction

У flex-контейнера есть две оси: главная и перпендикулярная ей.По умолчанию все предметы располагаются вдоль главной оси — слева направо. Именно поэтому блоки в предыдущем примере выстроились в линию, когда мы применили display: flex . А вот flex-direction позволяет вращать главную ось.

#container

Обратите внимание, что flex-direction: column не выравнивает блоки по оси, перпендикулярной главной. Главная ось сама меняет своё расположение, и теперь направлена сверху вниз.Есть ещё парочка свойств для flex-direction : row-reverse и column-reverse .

justify-content

Отвечает за выравнивание элементов по главной оси:

#container

Justify-content может принимать 5 значений:

Space-between задаёт одинаковое расстояние между блоками, но не между контейнером и блоками. Space-around также задаёт одинаковое расстояние между блоками, но теперь расстояние между контейнером и блоками равно половине расстояния между блоками.

align-items

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси. Вернёмся к flex-direction: row и пройдёмся по командам align-items :

Стоит заметить, что для align-items: stretch высота блоков должна быть равна auto . Для align-items: baseline теги параграфа убирать не нужно, иначе получится так:

Чтобы получше разобраться в том, как работают оси, объединим justify-content с align-items и посмотрим, как работает выравнивание по центру для двух свойств flex-direction :

align-self

Позволяет выравнивать элементы по отдельности:

#container < align-items: flex-start;>.square#one < align-self: center;>// Only this square will be centered. 

Для двух блоков применим align-self , а для остальных — align-items: center и flex-direction: row .

flex-basis

Отвечает за изначальный размер элементов до того, как они будут изменены другими свойствами CSS Flexbox. flex-basis влияет на размер элементов вдоль главной оси. Давайте посмотрим, что случится, если мы изменим направление главной оси:

Заметьте, что нам пришлось изменить и высоту элементов: flex-basis может определять как высоту элементов, так и их ширину в зависимости от направления оси.

flex-grow

Это свойство немного сложнее. Для начала зададим блокам одинаковую ширину в 120px:По умолчанию значение flex-grow равно 0. Это значит, что блокам запрещено увеличиваться в размерах. Зададим flex-grow равным 1 для каждого блока:

Теперь блоки заняли оставшееся место в контейнере. Но что значит flex-grow: 1 ? Попробуем сделать flex-grow равным 999:

И… ничего не произошло. Так получилось из-за того, что flex-grow принимает не абсолютные значения, а относительные. Это значит, что не важно, какое значение у flex-grow , важно, какое оно по отношению к другим блокам:

Вначале flex-grow каждого блока равен 1, в сумме получится 6. Значит, наш контейнер разделён на 6 частей. Каждый блок будет занимать 1/6 часть доступного пространства в контейнере. Когда flex-grow третьего блока становится равным 2, контейнер делится на 7 частей: 1 + 1 + 2 + 1 + 1 + 1. Теперь третий блок занимает 2/7 пространства, остальные — по 1/7. И так далее.

flex-grow работает только для главной оси, пока мы не изменим её направление.

flex-shrink

Прямая противоположность flex-grow . Определяет, насколько блоку можно уменьшиться в размере. flex-shrink используется, когда элементы не вмещаются в контейнер. Вы определяете, какие элементы должны уменьшиться в размерах, а какие — нет. По умолчанию значение flex-shrink для каждого блока равно 1. Это значит, что блоки будут сжиматься, когда контейнер будет уменьшаться.Зададим flex-grow и flex-shrink равными 1:

Теперь поменяем значение flex-shrink для третьего блока на 0. Ему запретили сжиматься, поэтому его ширина останется равной 120px:

flex-shrink основывается на пропорциях. То есть, если у первого блока flex-shrink равен 6, а у остальных он равен 2, то, это значит, что первый блок будет сжиматься в три раза быстрее, чем остальные.

flex

Заменяет flex-grow , flex-shrink и flex-basis . Значения по умолчанию: 0 (grow) 1 (shrink) auto (basis) .Создадим два блока:

.square#one < flex: 2 1 300px;>.square#two

У обоих одинаковый flex-basis . Это значит, что оба будут шириной в 300px (ширина контейнера: 600px плюс margin и padding ). Но когда контейнер начнет увеличиваться в размерах, первый блок (с большим flex-grow ) будет увеличиваться в два раза быстрее, а второй блок (с наибольшим flex-shrink ) будет сжиматься в два раза быстрее:Ещё больше возможностей свойства вы можете найти в анимированном руководстве по CSS flex​.

Дополнительно

Как с CSS Flexbox меняется размер?

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

Немного математики

И последний пример по flex box CSS. Начальный размер контейнера: 640px. Вычтем по 20px с каждой стороны для padding , и у нас останется 600px для двух блоков. Когда ширина контейнера становится равной 430px (потеря в 210px), первый блок ( flex-shrink: 1 ) теряет 70px. Второй блок ( flex-shrink: 2 ) теряет 140px. Когда контейнер сжимается до 340px, мы теряем 300px. Первый блок теряет 100px, второй — 200px. То же самое происходит и с flex-grow .

Если помимо flex CSS вы также интересуетесь CSS Grid, можете ознакомиться с нашей статьёй, где мы рассматриваем Flexbox и Grid.

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

Что такое CSS: объясняем простыми словами

Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.

Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось.

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

CSS и стили

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

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

Стили можно разметить внутри тега или использовать отдельный CSS-файл.

Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:

А так CSS прописывается при помощи тега и в теге документа HTML.

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

Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами. И если раньше приходилось верстать документы с использованием элементов вроде , то сейчас всё это выполняется средствами CSS.

После того как этот способ стал стандартом, проблема разделения содержания (HTML) и оформления (CSS) решилась раз и навсегда.

Синтаксис CSS

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

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

.my-class  background-color: #999; >

В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.

Каскады в CSS

И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:

p  color: green; font-size: 20px; > p  color: red; >

При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:

p  color: red; font-size: 20px; >

Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:

p  color: red; > p.important  font-size: 20px; > #intro  font-style: italic; >

Чтобы использовать все параметры, в HTML указываем:

p class="important" id="intro"> CSS упрощает форматирование документов. /p>

Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:

1. Селектор типа элемента (p).
2. Селектор класса (.important).
3. Селектор id (#intro).

1 — низкий приоритет, 3 — высокий.

Приоритеты в CSS

Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:

1. Самый высокий приоритет у свойств, в конце объявления которых указано !important.
2. Затем идут инлайновые стили, которые прописываются в теге через атрибут style.
3. Ещё ниже приоритет стилей, заданных в теге style в самом документе.
4. Далее следуют стили, подключённые к документу как внешний CSS-файл с использованием тега

Методологии CSS

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

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

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

Будущее CSS

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

Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.

Все премудрости CSS, HTML и их совместного использования вы можете освоить на отдельном интерактивном курсе GeekBrains. В течение месяца вы научитесь верстать статические сайты, освоите блочную вёрстку, препроцессор Less, Bootstrap и другие полезные инструменты.

Как работает каскад в CSS

Перед началом чтения пройдите простой тест — каким будет значение свойства background-color в первом и во втором варианте, и почему именно так?

В 1 варианте — transparent , во 2 варианте — red . Проверить вживую в интерактивной демонстрации.

Правильный ответ

Почему так?

Может показаться, что в обоих случаях на этапе каскада победит последнее CSS-правило. Но нет.

Во втором случае объявление background-color: 20px вообще невалидное, поэтому оно отбросится ещё на этапе фильтрации. А на вход алгоритма каскадной сортировки попадёт только одно объявление — background-color: red . Оно же и победит.

В первом случае всё ещё интереснее.

Сначала оба объявления пройдут через этап фильтрации. Затем они поборются друг с другом на этапе каскада и победит объявление background-color: var(—not-a-color) .

На этапе определения вычисленного значения браузер заглянет внутрь переменной —not-a-color , а там окажется 20px . Это невалидный цвет фона, поэтому придётся его отбросить и запустить алгоритм выбора значений по умолчанию.

Наследуемое значение получить не выйдет, ведь background-color не наследуется, поэтому будет использовано начальное значение свойства из спецификации — transparent .

Как браузер разбирает CSS

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

Давайте подробнее разберёмся, из чего состоит процесс обработки значений.

Обработка значений

Обработка значений — процесс, после которого свойства всех элементов на странице получают конкретные значения. Он происходит после того, как парсер разделит весь код на токены и выделит среди них объявления. Напомним, что объявлениями называют пары свойство: значение. Например, font-style: italic .

Обработку значений можно разделить на четыре этапа:

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

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

Фильтрация

Первый этап обработки значений — фильтрация объявлений. В процессе фильтрации браузер отбирает валидные и уместные объявления, а также сопоставляет их с элементами из HTML.

На основе разобранных и отфильтрованных объявлений браузер составляет для каждого элемента список всех его объявленных (declared) значений. Таких значений может быть сколько угодно: ноль, одно или несколько.

p < color: #101010; >.warning < color: #22ff22; >p.warning

Тогда у элемента

будет три объявленных значения свойства color, одно значение свойства font-size и ни одного объявленного значения свойства font-weight .

Каскад

На следующем этапе для каждого объявленного свойства с помощью алгоритма каскада вычисляется каскадированное (cascaded) значение.

При каскадировании учитывается:

• происхождение — стили самого браузера, стили разработчика и пользователя учитываются с разным приоритетом;
• важность — стили бывают «важные» ( !important ) или «обычные»;
• контекст — стили могут быть изолированы в отдельном контексте «теневого» DOM-дерева;
• специфичность — селекторы (по тегу, классу и так далее) имеют разный вес;
• порядок появления в коде — стили применяются по очереди и последующие переопределяют предыдущие.

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

Например, у элемента

, о котором говорилось выше, останется только одно значение свойства color — это #744ce5 . Два других объявленных значения будут отброшены.

Получение значений по умолчанию

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

Недостающую информацию браузер получает с помощью значений по умолчанию. К ним относятся унаследованные (inherited) и начальные (initial) значения.

Узнать, наследуется ли свойство, и его начальное значение, можно из его описания:

Каскадированные, унаследованные и начальные значения попадают в список определённых (specified) значений. В результате абсолютно всем свойствам каждого элемента на странице присваивается какое-то значение.

Вычисления

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

Этап вычислений можно разделить на три подэтапа: получение вычисленных, используемых и действительных значений.

Получение вычисленных значений

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

Что может быть вычисленным значением свойства, можно узнать из его описания:

После первого этапа вычислений значения превратятся в следующие:

Как и определённое, вычисленное значение существует для абсолютно всех свойств элемента. И именно оно передаётся по наследству потомкам.

Даже если сам элемент не использует какое-то значение, оно может наследоваться и влиять на отрисовку. Так, например, свойство text-transform не применяется к блочным боксам, но наследуется и влияет на вложенные в них строчные боксы.

 div 
  
 Текст 
 

В описании свойств в спецификации указано, к каким элементам они применяются:

Кстати, по историческим причинам метод getComputedStyle не всегда возвращает именно вычисленное значение. Иногда это будет используемое значение (см. ниже).

Получение используемых значений

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

Кроме того, отбрасываются значения, которые для конкретного элемента не имеют смысла. Например, grid-template-columns для элемента, который не является грид-контейнером.

В результате остаются и вычисляются все значения, которые нужны для отрисовки страницы. Такие значения называют используемыми (used).

Получение действительных значений

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

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

Другой пример — действительный размер текста может отличаться от используемого, если желаемый шрифт по какой-то причине недоступен и задано свойство font-size-adjust .

.rule < font-family: "Futura", "Verdana", sans-serif; font-size: 20px; /* Если первый шрифт не загрузится, то действительное значение — 41px */ font-size-adjust: 1; >

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

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

Как работает каскад

1. Сначала браузер анализирует и фильтрует значения, чтобы получить список объявленных значений.
2. Затем включается алгоритм каскада, и в результате для каждого свойства остаётся только одно каскадированное значение.
3. Если какое-то значение не было объявлено, оно получается с помощью наследования или начальных значений. Таким образом каждый элемент получает полный набор определённых значений.
4. Затем наступает первый этап вычислений, и браузер преобразует определённые значения в вычисленные. Именно они передаются по наследству потомкам элемента.
5. На втором этапе вычислений браузер разрешает те значения, которые зависят от устройства пользователя и относительного расположения элементов на странице, а также отбрасывает те значения, которые не нужны для отрисовки. В результате получаются используемые значения.
6. В конце концов к веб-странице применяются некоторые ограничения, и используемые значения становятся действительными.

Финальный тест, чтобы закрепить пройденное

Какого цвета будет ссылка в обоих случаях?

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.