Step 4 (S-44731)

From Stepik Wiki
Revision as of 23:36, 5 August 2017 by Admin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Step on Stepik: https://stepik.org/lesson/14821/step/4

Step 4 (S-44731) 1.png

[00:00 - 00:16] давайте теперь разберемся с таким важным свойством как наследование и приоритеты стереть а наследование по мнению разработчиков все сс настолько важно что они вынесли в даже название то есть название проекта dig ставшее


[00:16 - 00:33] наследования либо каскадированием а в чем смысл а дело в том что некоторые стиля имеют свойство меняться не только к тому элемента на которого непосредственно описано то есть я селектор и стиль


Step 4 (S-44731) 2.png

[00:33 - 00:52] а селектор выбирает какой то элемент а так вот некоторые стили применяются не только к нему но и ко всем вложенным в него элементов а типичный пример посмотрим такое что а мы видим что у нас есть


[00:52 - 01:07] написан автор листаю а ц с для тэга body создает цвет шрифта и собственно говоря сам шрифт цвет текста шрифт


[01:07 - 01:22] этот стиль применяется к тегу body непосредственно в теги body никакого а текста нет зато тексте есть во вложенных в него тегов так вот а стиле коллов


[01:22 - 01:38] и фонд именно они а наследуется и а поэтому параграф гиперссылка которые находятся находятся внутри body они унаследуют эти стили и получат вместе то есть текст


[01:38 - 01:56] параграфа и текст гиперссылки также будут серый темно серого цвета 2 пример а это для параграфа задана размер шрифта 110% от родительского а этот стиль также наследуется


[01:56 - 02:12] и гиперссылки будет тот же самый размер шрифта то есть визуально будет отличаться другого тексту параграф об этом чтобы нагреть заключается на след стиле наследуется а внутрь по дереву элемент в согласных вложенности


[02:12 - 02:31] но не все стили наследуется как правило наследуются стиле связанные с оформлением текста цветом шрифтами и тому подобном стиле которые связаны с размерами отступами а и позиционированием


[02:31 - 02:48] а как правило не на след ну это в общем то и не требуется а какого то общего правила нету то есть если вы хотите знать наследуются не наследуются данный стиль вам необходимо обратиться в документации


[02:48 - 03:04] а теперь перейдем к следующему варианту приоритеты стиль синтаксис ссс позволяет задать конфликтующей стиле а что то значат представить что у вас есть параграф


Step 4 (S-44731) 3.png

[03:04 - 03:22] а ну вот вернуться на предыдущий слайд у нас есть а так базе и т п в данном случае стиле просто не конфликтуют тому что а стили разный допустим что


Step 4 (S-44731) 4.png

[03:22 - 03:38] да параграфа так мы создадим отдельный шрифт ну отдельный цвет текста


[03:38 - 03:57] цвет красный а теперь рассмотрим элемент параграф с 1 стороны он унаследовал стиль color body а с другой стороны у него есть свой собственный какой из них нужно применить мы видим что на лицо конфликт стилей


[03:57 - 04:11] а для того чтобы разрешить конфликты стилей а каждому стилю назначается так называемый специфичность то есть в стиле есть разные приоритеты а


Step 4 (S-44731) 5.png

[04:11 - 04:31] в случае если 20 или конфликтуют а выигрывает то есть применяется к элементу тот который обладает большей специфичностью специфичность или может совпадать то есть есть есть специальные правила расчета мы к ним чуть позже обратимся если специфичность 2 стилей совпадает то применяется тот который


[04:31 - 04:46] то есть грубо говоря последнем находится в ссср а тот кто находится ниже пожалуйста с вечности а кроме того имеется возможность а это чистой воды хак


[04:46 - 05:05] имеется возможность однократно подняться над этим правилам то есть однократно нарушить это правило с помощью указания а в значении стиля то есть если ваш стиль обладает низкой специфичности


[05:05 - 05:24] и вы не можете переключить значит зачем кого то более высоко специфичного стиле вы можете добавить флажок important и однократно а превзойти эту проверку однако если более важного стиле в котором вы боретесь тоже есть лаком вот там то здесь уже ничего не поделаешь


[05:24 - 05:42] а теперь давайте поговорим про специфичность как она считается специфичным считается по тому что указано в селекторе какие элементы участвует в селект если в селекторе участвуют идентификатор то есть выборка


Step 4 (S-44731) 6.png

[05:42 - 06:01] это дает 100 баллов если используется класса либо псевдо классы это дает 10 баллов если используются тэги и псевдоэлемент это дает 1 балл все было складываются ну и где есть 2 примера


[06:01 - 06:21] а 1 селектор точка info oil plus золы а здесь 3 раза используется элемент 1 раз пользуется этими класса соответственно 13 баллов 10 за класс 3 за элемент


[06:21 - 06:37] 2 селектор л и точка reg точка level а здесь 1 раз используется ими классы 2 раза 1 раз и 2 раза имя класса а специфичность 21 балл


[06:37 - 06:57] элемента сущность больше а вот на основании этого что эта специфичность и сдается приоритет разным стилям а правило общем то следующий а чем больше специфичность


[06:57 - 07:16] а тем больше шансов что ваш стиль будет а будет применяться отсюда существует такой best practice его сложно выразить словами но в общем целом звучит так а


[07:16 - 07:34] не нужно давать конкретных стили для высоко низко специфичных селекторов а то есть низко специфичность селекторов как правило применяется к большому количеству элементов то есть а ко всем гиперссылка на странице


[07:34 - 07:53] а когда вы пишете стиль такого селектора нужно понимать что возможно этот стиль будет применен не к тем элементом которой вы ожидать поэтому чем меньше специфичности проще и легче должны быть стиле если вы хотите какой то а элемент оформить совершенно особенным образом то есть задать ему


[07:53 - 08:11] а уникальный с положения и отступа а это оформление нужно задавать а с селектором с высокой специфичностью например селектором по а по идентификатору то есть для такого элемента правильно сделать


[08:11 - 08:18] и написать с отправила с селектором по идентификации