Наследование

Наследование

Что такое наследование?

Основные принципы работы

Применение и ограничения

Что наследуется?

Что такое наследование

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

Основные принципы

1. Многоуровневый механизм наследования: распространяется на все вложенные теги

4. Учитываем каскадность и приоритет

2. Наследование работает не только с тегами, но и любыми другими типами (селекторы)

3. Не все свойства наследуются 

5. Продумываем правильную структуру

Что наследуется

3. Унаследовать или отменить наследование (inherit , initial, )

В основном это свойства определяющие внешний вид (font-size, font-family, letter-spacing, line-height, list-style,  color, cursor и др. )

Например, можно в этом стандарте CSS.

- (если в колонке «Inherited?» напротив нужного свойства стоит «yes», значит оно наследуется)

- заглянуть в такой справочник по свойствам CSS и посмотреть там

- inherit - как у родителя

- initial - по умолчанию

- unset - если свойство наследуется, то как у родителя, если нет - по умолчанию

2. Узнать наследуется ли то или иное свойство:

1. Какие свойства наследуются:

- изучить свойства в css, наследуемые по умолчанию 

Использование и проблемы

Какая польза от правильного использовать наследование?

Какие могут быть проблемы?

Применение и ограничения

Упрощение разработки

Не все свойства наследуются

Собственные стилевые свойства браузеров

 -   Экономия сил, времени = производительность

Уменьшение размера файлов = ускорение загрузки страниц

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

Правильная структура кода = анализ

Конфликты и их разрешение

Применение и ограничения

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

reset.css 

normalize.css

Каскадность

Что такое каскадность?

Особенности механизма работы

Какие стили имеют преимущество (приоритет)

Как избежать проблем?

Что такое каскадность

Это ряд правил, определяющих  последовательность применения многократно определенных стилей

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

Почему каскадные таблицы стилей (Cascading Style Sheets, CSS) называются каскадными???

Разнообразие правил

Правила могут исходить из различных источников:

из внешняя таблица стилей, внутренней таблицы стилей,

от механизма наследования, от классов и ID, селектора тега,

от атрибута style и т.д.

Конфликт

Конфликт. Решение.

Конфликт

Часто происходит конфликт стилей, для решения которого  была создана система приоритетов:

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

Какие источники являются более значимыми, а какие – менее? Разобраться в этом поможет эта таблица, где указан вес (значимость) каждого селектора. Чем больше вес, тем выше приоритет:

Конфликт. Решение.

Какие источники являются более значимыми, а какие – менее? Разобраться в этом поможет эта таблица, где указан вес (значимость) каждого селектора.

Чем больше вес, тем выше приоритет:

самый низкий

Конфликт. Решение.

Комбинированные селекторы (состоит из нескольких селекторов) необходимо посчитать их вес. В остальных ячейках стоят нули. Чтобы получить общий вес, необходимо «склеить» все числа в ячейках.

Конфликт. Решение.

Комбинированные селекторы (состоит из нескольких селекторов) необходимо посчитать их вес. В остальных ячейках стоят нули. Чтобы получить общий вес, необходимо «склеить» все числа в ячейках.

Конфликт. Решение.

Если случилось так, что два селектора имеют одинаковый вес,

то приоритет отдается тому стилю,

который находится ниже в коде.

Что такое поток?

Поток - это порядок отображения элементов на странице.

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

Приоритет

!important  - наивысший приоритет

Если вы столкнулись с экстренным случаем и вам необходимо повысить значимость какого-либо свойства, можно добавить к нему объявление !important:

Слишком частое применение !important не приветствуется многими разработчиками. В основном, данное объявление принято использовать лишь тогда, когда конфликт стилей нельзя победить иными способами.

!