Наследование css классов: Каскад и наследование — Изучение веб-разработки

Leave a Comment / Css / By /

Содержание

Каскад и наследование — Изучение веб-разработки

  • Обзор: Building blocks
  • Далее

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

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

Необходимые условия:Базовая компьютерная грамотность, Установка базового ПО, базовые знания работы с файлами, основы HTML (Введение в HTML), и общее представление о том, как работает CSS (Введение в CSS.)
Цель:Изучить понятие о каскаде и специфичности, и как работает наследование CSS.

CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово «каскадные» является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.

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

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

Это также может стать причиной поведения, которое вы, возможно, не ожидаете.

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

Каскад

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

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

Специфичность

Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. Различные типы селекторов ( селекторы элементов h2{...}, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность.

По существу, это мера того, насколько специфическим будет отбор по селектору:

  • Селектор элементов ( например h2 ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
  • Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута class — поэтому получит больше баллов, селектор класса применится после селектора элемента и поэтому перекроет его стили.

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

Позже мы объясним, как сделать оценку специфичности, и прочие детали.

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

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

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

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

Примечание: На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: color property Specifications section.

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

Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:

Итак, наследование. В примере ниже мы имеем <ul> с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего <ul> стиль границы, внутренние отступы и цвет шрифта.

Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <li> и к элементам внутри первого вложенного списка. Далее мы добавили класс special ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.

Такие свойства, как ширина (как в примере выше), внутренние и внешние отступы и стиль границы не наследуются. Если бы потомки нашего списка наследовали бы границу, то каждый отдельный список и каждая позиция в списке получили бы такую же границу — вряд ли мы хотели бы получить такой эффект!

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

Контроль наследования

CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.

inherit
Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это «включает наследование».
initial
Устанавливает значение свойства, применённого к выбранному элементу, равным initial value этого свойства (в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)
unset (en-US)
Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как inherit, иначе оно действует как initial.

Примечание: Существует также более новое значение revert, которое имеет ограниченную поддержку браузерами.

Примечание: Смотрите Origin of CSS declarations в [Page not yet written] для более подробной информации о каждом из них, и о том, как они работают.

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

Например:

  1. Второй элемент списка имеет класс my-class-1.
    Таким образом, цвет для следующего вложенного элемента a устанавливается по наследству. Как изменится цвет, если это правило будет удалено?
  2. Понятно ли, почему третий и четвёртый элементы a имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.
  3. Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента <a> — например: a { color: red; }?

Возврат всех исходных значений свойств

Стенографическое свойство CSS all можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (inherit, initial, unset, или revert). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.

В примере ниже имеются два блока <blockquote>. Первый имеет стиль, который применён к самому элементу blockquote, второй имеет класс fix-this, который устанавливает значение all в unset.

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

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

Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.

  1. Порядок следования
  2. Специфичность
  3. Важность

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

Порядок следования

Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идёт последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент.

Специфичность

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

Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.

Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.

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

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

Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:

  1. Тысячи: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута style (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
  2. Сотни: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.
  3. Десятки: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
  4. Единицы    : поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.

Примечание: Универсальный селектор (*), комбинаторы (+, >, ~, ») и псевдокласс отрицания (:not) не влияют на специфичность.

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

Прежде чем мы продолжим, давайте посмотрим на пример в действии.

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

  • Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
  • Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
  • Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.

Примечание: Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, миллион соединённых селекторов класса не способны переписать правила одного селектора id.

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

!important

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

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

Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:

  1. Вы увидите, что применены значения color (en-US) и padding третьего правила, но background-color — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
  2. Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
  3. Оба элемента имеют class с названием better, но у второго также есть id с названием winning. Поскольку ID имеют ещё более высокую специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID очень специфичны, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
  4. 2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления !important во втором правиле — размещение которого после border: none означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.

Примечание: Единственный способ переопределить объявление !important – это включить другое объявление !important в правило с такой же специфичностью позже или в правило с более высокой специфичностью.

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

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

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

Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:

  1. Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).
  2. Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).
  3. Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками).
  4. Важные объявления в авторских таблицах стилей.
  5. Важные объявления в пользовательских таблицах стилей.

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

Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Test your skills: the Cascade.

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

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

Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.

  • Обзор: Building blocks
  • Далее
  1. Каскад и наследование
  2. Селекторы CSS
    • Селекторы типа, класса и ID
    • Селекторы атрибута
    • Псевдоклассы и псевдоэлементы
    • Комбинаторы
  3. Модель коробки (The box model)
  4. Фон и границы
  5. Обработка разных направлений текста
  6. Переполнение содержимого
  7. Значения и единицы измерения
  8. Изменение размеров в CSS
  9. Элементы изображений, форм и медиа-элементы
  10. Стилизация таблиц
  11. Отладка CSS
  12. Организация вашей CSS

Last modified: , by MDN contributors

Наследование, каскадирование и приоритетность стилей

  • Наследование в CSS
  • Каскадирование стилей CSS
  • Специфичность селекторов CSS
  • Виды и приоритет стилей CSS
  • Служебный параметр !important
  • Использование одинаковых свойств CSS в одном правиле

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

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

Каскадирование стилей CSS

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

Давайте для начала рассмотрим простейший случай, показанный в примере №1.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Наследование стилей</title>
	
	<style>
	
		p{
		color: red;		  				 
		background-color: black;    	
		}
		
		/* Для абзацев с атрибутом 
		добавляем ширину и переопределяем фон */	
		p.yellow_back{
		background-color: yellow;
		width: 200px;  	 						 
		}
		
	</style>
	
</head>
<body>
	<p>
		Текст простого абзаца.
	</p>
	
	<p>
		Текст абзаца с классом.
	</p>
	
	<p>
		Переопределяем и цвет шрифта, и ширину абзаца.
	</p>
	
</body>
</html>

Пример №1. Простейший случай каскадности стилей CSS

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

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

Специфичность селекторов CSS

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

Расчет специфичности селектора производится при помощи трех чисел (a, b, c). Происходит это следующим образом:

  • числу a присваивается количество идентификаторов в селекторе;
  • числу b присваивается суммарное количество классов, атрибутов и псевдоклассов в селекторе;
  • числу c присваивается суммарное количество элементов и псевдоэлементов.

После подсчета чисел у всех сравниваемых селекторов, селектором с большей специфичностью будет считаться тот, у которого больше число a, в независимости от величины чисел b и c. Если же у сравниваемых селекторов число a окажется одинаковым, будет сравниваться их число b, а в случае необходимости и число c (см. пример №2).

CSS okmysiteCodes

/* Запишем пример кода html */
/*  
<p> 
	<em title="Город">Текст...</em> 
</p> 
	
*/
/* Здесь а=1, т.к. в селекторе есть 1 идентификатор; */	
/* b=0, т.к. есть 0 классов, 0 атрибутов и 0 псевдоклассов; */	
/* с=0, т.к. есть 0 элементов и 0 псевдоэлементов; */
/* т.о. специфичность равна (1,0,0). */
#m_id{
color: blue;			 
}
/* Здесь а=0, т.к. в селекторе отсутствуют идентификаторы; */	
/* b=3, т.к. есть 1 класс, 1 атрибут и 1 псевдокласс; */	
/* с=2, т.к. присутствуют два элемента: «p» и «em»; */
/* т.о. специфичность равна (0,3,2). */
p. my_class em[title="Город"]:hover{
color: red;			 
}
/* Значит цвет текста в примере кода будет синим, т.к. 
во втором правиле число а=0, а в первом правиле а=1. */
/* А вот если бы специфичности селекторов были равны, 
то приоритет имел бы стиль нижнего правила. */

Пример №2. Сравнение специфичности селекторов

Виды и приоритет стилей CSS

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

  • Стиль браузера обладает наиболее низким приоритетом и применяется по умолчанию к элементам html-кода, к которым не применяется другое форматирование, говоря проще – к «голому» html-коду.
  • Стиль пользователя устанавливается в настройках браузера пользователем и по сути представляет собой измененный пользователем стиль браузера по умолчанию. Так что, если пользователь изменил стиль браузера, то по умолчанию станет применяться стиль пользователя.
  • Стиль автора устанавливается автором страницы (программистом) и обладает еще большим приоритетом. Именно он нас и будет больше всего интересовать.

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

  • Стили, унаследованные элементами-потомками от своих родителей, обладают самым низким приоритетом.
  • Стили, заданные во внешних таблицах обладают большим приоритетом. При этом правила, которые идут в коде внешней таблицы стилей ниже (т.е. встречаются позже) имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше (т. е. раньше). Кроме того, из нескольких внешних таблиц стилей большим приоритетом обладают таблицы, подключенные к документу при помощи элемента «link» ниже в коде этого документа. Соответственно, если таблица подключена в коде документа выше, то приоритет ее стилей будет ниже.
  • Стили внутренних таблиц (расположены внутри контейнеров «style») имеют приоритет перед стилями внешних таблиц, но только если они расположены в коде ниже, чем элемент «link», при помощи которого была подключена внешняя таблица стилей. Опять же, правила, которые идут в коде внутренней таблицы стилей ниже имеют больший приоритет перед правилами, которые встречаются в коде этой таблицы выше. Кроме того, если в документе используется несколько внутренних таблиц стилей, т.е. имеется несколько элементов «style», то большим приоритетом обладают стили тех таблиц, которые расположены в коде документа ниже.
  • Еще большим приоритетом обладают встроенные стили, которые преобладают над правилами с любой специфичностью селекторов. Действительно, куда уже конкретнее, если стиль расположен в открывающем теге элемента.

Служебный параметр !important

Отдельно следует сказать про служебный параметр !important (от англ. important – важный), который указывается в случае необходимости во внутренних и внешних таблицах стилей после значения css-свойства через пробел, например, p{color: green !important;} (см. пример №3). Свойство стиля, в котором указан данный параметр, обладает наибольшим приоритетом в независимости от расположения таблицы стилей в коде документа или же самого правила внутри таблицы стилей, но только в ситуации, когда специфичности стилей равны (при этом не следует забывать, что специфичность встроенного стиля следует считать наивысшей в любом случае!). Опять же, если свойств с таким параметром несколько, да еще и специфичности соответствующих селекторов одинаковы, то приоритет будет определяться по виду стиля, расположению таблиц стилей или же, если они окажутся в одной и той же таблице стилей, сравнению их расположения в коде этой таблицы.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Модификатор !important</title>
	<style>
		/* Специфичность селектора выше */
		div p.green_normal{
		color: #007700;      
		font-weight: normal;   
		}
		/* Специфичность селектора ниже, */
		/* плюс отсутствует !important */
		.bold_wrong{
		font-weight: bold;   
		}	
		/* Специфичность селектора ниже, */
		/* но присутствует !important */	
		.bold_font{
		font-weight: bold !important;   
		}
	</style>
</head>
<body>
	<div>
		<p>
			Получаем обычный текст, зеленого цвета.
		</p>
	</div>
	<div>
		<p>
			Начертание не стало полужирным, т.к. приоритет<br> 
			селектора .bold_font ниже, чем селектора div p.green_normal.
		</p>
	</div>
	<div>
		<p>
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			т. к. в подключенном классе .bold_font присутствует !important.
		</p>
	</div>
	<div>
		<p>
			Цвет текста остался зеленым, но начертание стало полужирным,<br> 
			т.к. в подключенном классе .bold_font присутствует !important.<br>
			<span>Но мое начертание осталось 
			обычным,<br> т.к. встроенный стиль имеет наивысший приоритет.</span>
		</p>
	</div>
</body>
</html>

Пример №3

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

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

Использование одинаковых свойств CSS в одном правиле

В заключение данного пункта добавим, что в одном и том же правиле иногда задают два одинаковых свойства, но с разными значениями (см. пример №4). Так обычно поступают, когда одно из значений свойства не поддерживается каким-нибудь браузером, тогда его помещают в блоке объявлений (стиле) вторым, а другое правило, которое поддерживается всеми браузерами, помещают первым. В результате, если страница открывается в браузере, в котором второе правило не имеет силы, оно будет проигнорировано, а браузер применит первое правило. Если же страница открывается в браузере, в котором имеют силу и первое и второе правила, то второе правило будет иметь больший приоритет, т.к. следует в коде позже. Таким образом, в любом случае будет реализована задумка программиста, а не применено значение свойства устанавливаемое браузером по умолчанию или наследуемое от родительского элемента.

HTML Результат okmysiteCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Одинаковые свойства в одном правиле</title>
	<style>
		p{
		width: 450px;
		color: blue;
		color: superblue;
		}
	</style>
</head>
<body>
	<p>
		Цвет текста будет просто синим, т. к. 
		значение superblue не поддерживается 
		браузером и будет просто проигнорировано.
	</p>
    
</body>
</html>

Пример №4

Быстрый переход к другим страницам

  • Селекторы CSS
  • Наследование, каскадирование и приоритетность стилей CSS
  • Единицы измерения, использующиеся в CSS
  • Вернуться к оглавлению учебника

Основы CSS | (4) Каскадирование и наследование стилей CSS

каталог

 

1. Способы разрешения стилевых конфликтов

Во-вторых, стиль метки: напрямую измените стиль по умолчанию

Три, определение стиля класса

Четыре, стиль id

Пять, встроенный стиль

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

  • Для одного и того же элемента добавьте разные стили слой за слоем, это начало CSS-имени многослойной таблицы стилей
  • Элементы веб-страницы упакованы по тэгам, поэтому основная цель управления отображением элементов — установить стиль метки.
  • Стиль метки в основном происходит из двух мест: одно — это стиль браузера по умолчанию (разные браузеры немного отличаются), второе — определяемый пользователем стиль, который может быть установлен непосредственно на метке или может использоваться как стиль класса, который вызывается разными метками.
  • Проблема каскадирования стилей решается путем установки позиции объявления стиля и задействованных объектов для установки различных приоритетов стиля. Например, стили классов имеют более высокий приоритет, чем стили меток

Что касается нестандартного стиля этикетки, первое, что приходит на ум, — это переопределить стиль этикетки элемента упаковки. Если стиль метки изменен, то стиль элемента в метке также будет изменен.

Следующий простой пример демонстрирует:

HTML код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
     <h3> Содержание обучения: </ h3>
  <ol>
    <li>html</li>
    <li>css</li>
    <li>js</li>
  </ol>
</body>
</html>

Используя содержимое предыдущего урока, откройте инструменты разработчика браузера, чтобы просмотреть стиль тега h3:

Красное поле — это стиль по умолчанию, установленный браузером для тега h3.

Теперь мы вручную стилизуем тег h3 в локальном файле CSS:

Код CSS:

h3 {
  color:red;
  font-size: 3em;
}

Можно обнаружить, что установленный нами стиль (красное поле) отображается в браузере, а перезаписанный стиль по умолчанию вычеркивается (поле корзины):

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

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

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

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

Так называемый стиль класса предназначен для настройки стиля элемента в соответствии с его назначением, и не имеет значения, какой ярлык применяется к нему.

Существующий HTML-код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1. 0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <h3> Объединенная (отраслевая) блокчейн </ h3>
 <p> Отраслевая блокчейн (ConsortiumBlockChains): определенная группа назначает несколько предварительно выбранных узлов в качестве бухгалтера, и генерация каждого блока определяется совместно всеми предварительно выбранными узлами (предварительно выбранные узлы участвуют в процессе согласования),
 Другие узлы доступа могут участвовать в транзакции, но только запрашивают процесс выставления счетов (по сути, управляемый биллинг, просто становится распределенным биллингом, сколько узлов предварительно выбрано, как определить бухгалтера каждого блока, чтобы стать блокчейном). Основные точки риска),
 Любой другой может делать ограниченные запросы через открытый API блокчейна. </ p>
 <p> Частная блокчейн </ p>
 <div> Приватная цепочка блоков (privateBlockChains): для бухгалтерии используйте только технологию главной книги блокчейна, это может быть компания или частное лицо, и вы можете получить разрешение на запись блокчейна,
 Эта цепочка мало чем отличается от других решений распределенного хранения.  (Dec2015) Все консервативные гиганты (традиционные финансы) хотят поэкспериментировать с частными цепочками блоков, и приложения для публичных сетей, такие как биткойны, были индустриализированы,
 Прикладные продукты частной сети все еще изучаются. </ div>
</body>
</html>

Эффект отображения веб-страницы:

Теперь мы хотим установить для всех заголовков один стиль, а для всего текста — один стиль. Но, взглянув на исходный код, вы обнаружите, что заголовок заключен в тег h3, а другой — в тег p, а текст — в тег p, а другой — в тег div. Поэтому напрямую использовать стиль метки неудобно.

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

HTML код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1. 0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <h3 class = "headline"> Объединенная (отраслевая) цепочка блоков </ h3>
 <p class = "content"> Промышленная блокчейн (ConsortiumBlockChains): группа назначенных нескольких предварительно выбранных узлов в качестве бухгалтера, генерация каждого блока определяется всеми предварительно выбранными узлами (предварительно выбранные узлы участвуют в процессе согласования ),
 Другие узлы доступа могут участвовать в транзакции, но только запрашивают процесс выставления счетов (по сути, управляемый биллинг, просто становится распределенным биллингом, сколько узлов предварительно выбрано, как определить бухгалтера каждого блока, чтобы стать блокчейном). Основные точки риска),
 Любой другой может делать ограниченные запросы через открытый API блокчейна. </ p>
 <p class = "headline"> Закрытая цепочка блоков </ p>
 <div class = "content"> Приватная блокчейн (privateBlockChains): для ведения бухгалтерии используйте только технологию главной книги блокчейна, это может быть компания или частное лицо, а также разрешение на запись блокчейна,
 Эта цепочка мало чем отличается от других решений распределенного хранения.  (Dec2015) Все консервативные гиганты (традиционные финансы) хотят поэкспериментировать с частными цепочками блоков, и приложения для публичных сетей, такие как биткойны, были индустриализированы,
 Прикладные продукты частной сети все еще изучаются. </ div>
</body>
</html>

Код CSS:

.headline {
  color:green;
  font-size: 1.5em;
  font-weight: bold;
}
.content {
  color:inherit;
  font-size: 1em;
  font-weight: lighter;
}

Эффект отображения страницы:

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

Код модификации HTML:

<p class = "headline red"> Закрытая цепочка блоков </ p>
 / * Два значения атрибута разделены пробелами * /

CSS добавить код:

.red {
  color: red;
}

Элемент с атрибутом id должен быть уникальным на текущей странице. Таким образом, стиль, добавленный к элементу через атрибут id, имеет более высокий приоритет, чем стиль класса.

Стиль id используется не очень часто, но иногда это необходимо.

Пример:

HTML код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<h3 class = "blue" id = "red"> Объединенная (отраслевая) цепочка блоков </ h3>
 <p> Отраслевая блокчейн (ConsortiumBlockChains): определенная группа назначает несколько предварительно выбранных узлов в качестве бухгалтера, и генерация каждого блока определяется совместно всеми предварительно выбранными узлами (предварительно выбранные узлы участвуют в процессе согласования),
 Другие узлы доступа могут участвовать в транзакции, но только запрашивают процесс выставления счетов (по сути, управляемый биллинг, просто становится распределенным биллингом, сколько узлов предварительно выбрано, как определить бухгалтера каждого блока, чтобы стать блокчейном).  Основные точки риска),
 Любой другой может делать ограниченные запросы через открытый API блокчейна. </ p>
</body>
</html>

Код CSS:

h3 {
  color:green;
}
.blue {
  color:blue;
}
#red {
  color:red;
}

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

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

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

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

Ниже приведен пример установки цвета рамки изображения:

HTML код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1. 0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
 <img src = "kenan1.jpg" alt = "Conan" class = "blue" id = "red" style = "border: 15px solid yellow;">
</body>
</html>

Код CSS:

img {
   border: 15px solid green;
}
.blue {
  border: 15px solid blue;
}
#red {
  border: 15px solid red;
}

Просмотр эффектов отображения веб-страницы и инструментов разработчика браузера:

Сводка: приоритетный встроенный стиль> стиль идентификатора> стиль класса> стиль метки

Учебник CSS 3. Статья «Наследование в CSS»

Селекторы. Часть 4.

Каскадность в CSS

МЕНЮ

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

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

Давайте сразу перейдем к примеру и рассмотрим наследование стилей на примере HTML элемента <body>, который определяет видимое содержимое страницы.


Рис.28 Схема наследования стиля в CSS.

Создадим стиль для элемента <body>, который будет изменять цвет и тип шрифта:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример наследования стиля в CSS</title>
<style>
body { /* используем селектор типа */
color: green; /* устанавливаем цвет текста */
font-family: arial; /* устанавливаем тип шрифта */
}
</style>
</head>
<body>
	<h3>Заголовок второго уровня</h3>
	<p>Полный <strong>абзац</strong></p>
</body>
</html>

В этом примере для элемента <body> мы установили зеленый цвет текста и тип шрифта Arial. CSS свойства color и font-family наследуются, а это означает, что эти свойства будут применяться и на вложенные элементы внутри <body> (на все его потомки).

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

Результат нашего примера:

Рис. 29 Пример наследования стиля в CSS.

В выше рассмотренном примере все элементы, расположенные внутри <body> (его потомки) унаследовали его свойства. Механизм наследования имеет многоуровневую систему и распространяется не только на прямых потомков элемента, но и переносится на все вложенные элементы. В нашем примере к такому элементу относится элемент <strong>, который по аналогии с другими элементами унаследовал все свойства стиля, заданного для элемента <body>. В этом заключается основной смысл наследования, который используется в CSS.

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

Еще один момент, который обязательно необходимо понять, это то, что аналогично действует механизм наследования не только для селекторов типа, но и для всех типов селекторов, рассмотренных в предыдущих статьях, посвященной этой тематике. Допустим, мы создали селектор класса с аналогичными CSS свойствами и применили его к элементу <body>, то в этом случае все элементы, вложенные в него также унаследуют эти свойства.

Вы будете в дальнейшем использовать эти особенности CSS для упрощения Вашей работы по созданию стилей для элементов документа.

Ограничения и нюансы наследования

Ограничения:

  • Не наследуются свойства, которые влияют на размещение элементов на странице, свойства отвечающие за внешние и внутренние отступы элемента, свойства отвечающие за границы элементов. Все эти свойства мы подробно рассмотрим далее в учебнике. Повторюсь, что вы всегда можете посмотреть наследуется или нет конкретное свойство на сайте в справочнике CSS.
  • Я хочу, чтобы вы поняли, что многие свойства не наследуются по объективным причинам, представьте, что мы создаем границу для родительского элемента и после этого все потомки по этой логике должны унаследовать это свойство, что выглядело бы абсурдно и напротив увеличивало бы работу по созданию стилей (их отмене, или сбросу).

Нюансы:

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

А сейчас на примере элемента <a>, определяющего гиперссылку, мы рассмотрим пример в котором рассмотрим почему некоторые элементы не наследуют некоторые свойства своего предка:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Нюансы наследования стилей</title>
<style>
body { /* используем селектор типа */
color: green; /* устанавливаем цвет текста */
text-decoration: none; /* убираем декорирование текста (нижнее подчеркивание) */
}
</style>
</head>
<body>
	<p>Абзац, который содержит внутри себя <a href = "#">гиперссылку</a>. </p>
</body>
</html>

В этом примере для элемента <body> мы установили следующие стили: зеленый цвет текста и отсутствие декорирования текста (убрали нижнее подчеркивание снизу). Обратите внимание на элемент <a> на изображении, он полностью не изменился. Давайте разберемся ниже (после просмотра изображения) почему так происходит.

Результат нашего примера:

Рис. 29а Нюансы наследования стилей.

При возникновении конфликта побеждает сильнейший, в CSS это, как правило, явно определенный стиль. Откроем инструменты разработчика (для Chrome это F12). Обратите внимание какие встроенные в браузер CSS свойства (user agent stylesheet) имеет любая ссылка (any link) в документе. Для неё заданы следующие стили: цвет текста синий (-webkit-link — значение браузера по умолчанию), декорирование текста (нижнее подчеркивание) и определено, что браузер устанавливает курсор автоматически (значение auto CSS свойства cursor).

Ниже отображаются свойства, которые были унаследованы (Inherited from) элементом <a> от <body>. Как вы можете заметить, браузер отбросил все стили элемента <body>, по той причине, что у элемента <a> стиль, который определяет цвет текста явно определен (встроенный стиль по умолчанию), а свойство, которое определяет декорирование текста не наследуется и отображается с небольшой прозрачностью в инструментах разработчика, но даже если бы оно наследовалось, то не применилось бы по аналогии с цветом теста (у элемента <a> это свойство тоже явно определно).

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


Вопросы и задачи по теме

Перед тем как перейти к следующей статье ответьте на следующие вопросы:

  • Что представляет из себя механизм наследования в CSS?
  • Где можно посмотреть наследуется или нет конкретное свойство если я не помню?
  • Где можно посмотреть какие встроенные CSS стили используются для HTML элементов?


Селекторы. Часть 4.

Каскадность в CSS

МЕНЮ

9. Css.Группирование и наследование стилей

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

Группирование: общие свойства селекторов можно объединить и не прописывать их в индивидуальных частях кода:

h2, h3, h4 {

    font-family: Tahoma, Arial, Helvetica, sans-serif;

}

h2 {

    font-size: 2.5em;

    color:#fffffd;

    font-size: 1. 8em;

    color: #265a8b;

   font-size: 1.7em;

   color:#6b6b4e;

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

Пример:

body {

    font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */

    color: black; /* Черный цвет текста */

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

Тег.Имя класса { свойство1: значение; свойство2: значение; … }

Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут class=»Имя класса»

Пример: <html>

<head>

<meta charset=»utf-8″>

<title>Камни</title>

<style>

table.jewel {

width: 100%; /* Ширина таблицы */

border: 1px solid #666; /* Рамка вокруг таблицы */

}

th {

background: #009383; /* Цвет фона */

color: #fff; /* Цвет текста */

text-align: left; /* Выравнивание по левому краю */

}

tr. odd {

background: #ebd3d7; /* Цвет фона */

}

</style>

</head>

<body>

<table class=»jewel»>

<tr>

<th>Название</th><th>Цвет</th><th>Твердость по Моосу</th>

</tr>

<tr class=»odd»>

<td>Алмаз</td><td>Белый</td><td>10</td>

</tr>

<tr>

<td>Рубин</td><td>Красный</td><td>9</td>

</tr>

<tr class=»odd»>

<td>Аметист</td><td>Голубой</td><td>7</td>

</tr>

<tr>

<td>Изумруд</td><td>Зеленый</td><td>8</td>

</tr>

<tr class=»odd»>

<td>Сапфир</td><td>Голубой</td><td>9</td>

</tr>

</table>

</body>

</html>

В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счёт того, что этот класс добавляется не ко всем тегам <tr> и получается чередование разных цветов.

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

Селектор:Псевдокласс { Описание правил стиля }

Псевдоклассы, определяющие состояние элементов

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

:active

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

:link

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

Запись A {…} и A:link {…} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.

:focus

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

:hover

Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.

:visited

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

Приоритеты и наследование в CSS

В последних статьях я довольно часто затрагиваю тему основ языка CSS, и это не случайно. Во-первых я очень давно в рубрику основы html и css ничего не писал, а во-вторых информацию лучше преподносить по частям. И в-третьих, в статье SEO 2014 я написал, что особое внимание в новом году стоит уделить именно внутренней оптимизации.

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

Как я уже сказал в статье об основах CSS, он создан для того чтобы оптимизировать весь дизайн сайта (точнее описание внешнего вида сайта). Без языка стилей нам бы пришлось прописывать все элементы внешнего вида в html-тегах. Во-первых это все делать крайне не удобно — представьте, в каждый элемент, внешний вид которого вы хотите изменить, придется прописывать еще несколько тегов и атрибутов. Долго и нудно, если честно.

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

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

Предки, потомки и сестринские элементы в HTML

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

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

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

Итак, возьмем в качестве исследуемого объекта тег

<span class="desc">

.Его предком будет этот тег:

<a href="https://monetavinternete.ru/" class="font-4001">MonetaVInternete. ru </a>

А потомком вот этот:

<div class="logo">

И остается еще несколько элементов. которые называются сестринскими:

<div class="font-400">
<div class="poisk_l">

Иными словами, элемент, который находится внутри другого, является его потомком. Можно представить код в одну строку:

<div class="logo"> <span class="desc"><a href="https://monetavinternete. ru/" class="font-4001">MonetaVInternete.ru </a></span></div>

Думаю, с этим все понятно. Перейдем к приоритетам в CSS.

Приоритеты и наследование в CSS

Все приоритеты я распишу списком, чем больше цифра, тем сильнее приоритет.

  1. Самым низким приоритетом обладают стили, которые прописаны в самом браузере. В файлах каждого интернет-обозревателя находится информация о стандартных css-стилях. В старых браузерах есть возможность загрузить свой css-файл или изменить стандартные стили.
  2. Следующим по значимости идет авторский стиль — все элементы, которые прописаны в коде страницы. Это и подключенный файл и селекторы в атрибуте style. Данный пункт является обобщающим для всех последующих, т.к. все они задаются автором сайта…
  3. Стили, унаследованные элементом от потомков. Вернемся к материалу выше (не зря же я его писал). Если к тегу <div class=»logo»> применены какие-либо стили, то они же будут действовать для тега <span class=»desc»>.
  4. Далее идут стили, прописанные во внешнем подключенном файле. В данном случае, все селекторы, примененные к потомкам не имеют силы.
  5. Более высоким приоритетом обладают стили, которые прописываются в теге <style> в начале HTML документа. Но тут возникает проблема: зачастую, к одному и тому же элементу применяются стили, прописанные в различных селекторах. В таком случае применяется правило расчета специфичности каждого селектора по такому принципу:
    • Количество идентификаторов (#id) в селекторе — (1,0,0) за каждый.
    • Количество классов (.class) и псевдоклассов (:pseudoclass) — (0,1,0) за каждый.
    • Количество тегов и псевдоэлементов (::pseudo-element) — (0,0,1) за каждый.

    Итак, как вы понимаете, приоритет рассчитывается в зависимости от количества «очков». Учтите, что (1,0,0) больше чем (0,2,10).

  6. В большем приоритете будут стили, прописанные прямо в теге, с помощью атрибута style.
  7. И, наконец,  высшим приоритетом обладают стили, в которых содержится слово !important. Но есть небольшое исключение — если такие стили объявлены и автором и пользователем, то будут применены только пользовательские.

Если в стилях прописываются абсолютно одинаковые по приоритету параметры, то будет использоваться тот, что стоит выше по списку. Например, если в селекторе вы прописали два одинаковых свойства, но с разными значениями, то в результате будет применен первый:

color:red;
font-family: Garamond, serif;
background: white;
color:blue;

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

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

Каскад и наследование — изучите веб-разработку

  • Обзор: строительные блоки
  • Следующий

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

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

Предпосылки: Базовая компьютерная грамотность, установлено базовое программное обеспечение, базовые знания работа с файлами, основы HTML (изучение Введение в HTML) и представление о том, как работает CSS (изучите Первые шаги CSS. )
Цель: Чтобы узнать о каскаде и специфичности, а также о том, как наследование работает в CSS.

CSS расшифровывается как Cascading Style Sheets , и это первое слово cascading невероятно важно для понимания — поведение каскада является ключом к пониманию CSS.

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

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

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

Каскад

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

В приведенном ниже примере у нас есть два правила, которые можно применить к элементу

. Содержимое

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

Специфичность

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

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

Ниже у нас снова есть два правила, которые можно применить к элементу

. Содержимое

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

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

Алгоритм специфичности мы объясним позже.

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

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

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

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

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

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

В следующем видео показано, как вы можете использовать Firefox DevTools для проверки каскада страниц, специфичности и многого другого:

Мы начнем с наследования. В приведенном ниже примере у нас есть элемент

Достижение того же результата с помощью такой методологии, как атомарный CSS, означало бы создание определенных классов, связанных с отступами, и применение их вручную в каждом случае, в том числе для first-child исключений, неявно обработанных * + * :

<форма>
  <дел>
    
    <входное имя="один" тип="текст">
<дел>

Имейте в виду, что это будет охватывать только верхние поля, если вы придерживаетесь атомарного CSS. Вам бы прописать индивидуальные занятия на color , background-color и множество других свойств, потому что атомарный CSS не использует наследование или селекторы элементов.

<форма>
  <дел>
    
    <входное имя="один" тип="текст">