HTML и CSS — языки, с помощью которых верстают страницы в интернете. Овладеть основами этих языков совсем нетрудно — это первый шаг к профессии веб-разработчика. Вначале вы узнаете, как работать со шрифтами и текстом, а в конце концов научитесь верстать несложные страницы с анимацией и без. Авторы курса — разработчики из Яндекса. У курса есть продолжение.
Специфичность
Loading...
From the course by Moscow Institute of Physics and Technology
Основы HTML и CSS
84 оценки
Moscow Institute of Physics and Technology
84 оценки
Course 2 of 5 in the Specialization Разработка интерфейсов: вёрстка и JavaScript
From the lesson
Введение в CSS
Поговорим о том, почему появился CSS, и разберёмся в его структуре. Вы научитесь грамотно применять и комбинировать различные типы селекторов (селекторы тегов, классов, идентификаторов и атрибутов). Также мы расскажем, что такое псевдоэлементы и псведоклассы, какие они бывают и как с ними работать. Вы разберётесь в том, что такое специфичность, как она высчитывается и как это влияет на порядок применения свойств в CSS.
Meet the Instructors
Мохов Олегразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Олег Семичевразработчик интерфейсов, Яндекс
В данном видео мы будем говорить об одном из самых важных
и базовых понятий в CSS — о специфичности.
Давайте же посмотрим на примерах, что это такое.
Допустим, у нас есть вот такой вот CSS-код.
Для одного и того же самого элемента div'а мы последовательно сначала
задаем красный цвет, а потом синий.
Какой же должен быть результат?
Вариантов здесь немного — либо красный, либо синий.
Но на самом деле результат будет синий.
Посмотрим пример чуть посложнее — вот такой вот.
На самом деле, во всех html-документах данный CSS-код
также выбирает абсолютно одинаковый набор элементов.
Просто в первом случае мы выбираем этот набор с помощью селектора html div,
а во втором случае — просто div.
Какого же цвета будет текст в div'ах в данном случае?
Внезапно этот цвет будет уже не синий, а красный.
Что же происходит?
Давайте разберемся.
Дело в том, что каждому селектору в CSS сопоставляется трехчисловое значение,
которое называется «специфичность».
Чтобы посчитать это значение, нужно сделать следующие действия.
Посчитать число селекторов-идентификаторов в данном селекторе —
это будет первое число.
Посчитать число селекторов классов,
псевдоклассов и атрибутов — это будет второе число.
И, наконец, посчитать число селекторов элементов и
псевдоэлементов — это будет третье число.
Дальше мы должны будем отсортировать все селекторы в лексикографическом порядке,
то есть если первое число в одном селекторе будет больше первого
числа в другом, то вне зависимости от значения оставшихся двух,
первый будет всегда выше второго.
Если вам сложно понять, что такое лексикографический порядок,
то одна компания предложила другую аналогию.
Мы заменяем первое число как бы числом «владык ситхов»,
второе число — числом «дартов вейдеров», и третье число — количеством штурмовиков.
И понятно, что любое число «владык ситхов» всегда сильнее
любого числа «дартов вейдеров».
И один «дарт вейдер», например, всегда сильнее, чем миллион штурмовиков.
Вот такая аналогия.
Здесь я хотел бы еще сразу же сделать маленькую ремарку,
что все дополнительные селекторы, или комбинаторы, не влияют на специфичность.
Они не добавляют специфичности никакого веса.
Итак, мы посчитали специфичность, что же делать дальше?
Дальше мы должны найти в html-документе все элементы,
которые могут быть выбраны с помощью разных селекторов.
После того как мы проделываем эту операцию,
для каждого элемента мы берем все селекторы,
которыми этот элемент можно выбрать, и сортируем относительно специфичности
каждого селектора: от менее приоритетных к более приоритетным.
И далее мы последовательно применяем каждое CSS-свойство,
перетирая его, если оно уже было задано ранее.
Давайте посмотрим вот такой вот простой пример: у нас здесь три селектора,
и первое, что мы должны сделать, это посчитать специфичность каждого.
Считаем: специфичность первого — 0 0 1,
так как у нас только один селектор тэга; специфичность второго — 0 0 2,
так как у нас здесь два селектора тэга; и, наконец, третьего — также 0 0 1.
Очевидно, что все три этих селектора выбирают одни и те же самые
наборы элементов, то есть все div'ы.
Допустим, мы берем какой-то конкретный div,
и теперь нам нужно применить к нему заданное правило.
Что мы делаем дальше?
Мы уже нашли все правила, которые применяются к данному div'у.
Мы сортируем их, исходя из специфичности, сохраняя последовательность при этом.
То есть в данном случае нам нужно будет поменять второй и третий селекторы местами
— вот так вот.
Дальше происходит вот такой вот трюк: мы виртуально
проваливаем специфичность внутрь каждого свойства — вот так вот.
И вот уже с такими цифрами мы вытаскиваем все CSS-свойства.
Третий шаг, который есть в нашей последовательности,
нам нужно применять каждое правило.
Давайте применим.
Первое правило — это цвет.
Мы изначально задаем синий цвет, но,
дойдя до конца, мы видим, что он переопределяется красным.
Поэтому мы задаем красный цвет элементу.
Теперь давайте посмотрим на размер текста.
У нас есть правило — размер текста 12 пикселей,
но оно будет переопределено правилом с 15 пикселями, это и применится.
И, наконец, одинокое правило, которое задает жирность шрифта,
оно будет также применено.
Вот так применяются CSS-правила.
Более сложный пример, когда у нас есть так называемое комбинирующее свойство,
которое задает в одном значении несколько различных свойств — это свойство font.
В данном случае мы задаем в одном свойстве два: размер шрифта и семейство шрифтов.
Здесь ситуация интереснее, потому что мы также берем,
применяем цветовое значение, также значение размерности шрифта 15 пикселей,
также задаем полужирное начертание, но, что интересно,
из правила font мы также возьмем значение семейства шрифта Arial.
То есть несмотря на то, что у нас нет переопределяющего правила font,
мы переопределяем дальше только размер шрифта.
В CSS есть еще два способа изменять приоритет правила.
Это инлайн и !important.
Инлайн — это возможность указать CSS-стили непосредственно внутри html-элемента.
Это делается внутри атрибута style.
Мы также пишем значение атрибута CSS-правила, которые
должны быть применены непосредственно для данного элемента на странице.
!important — это ключевое свойство, которое употребляется внутри значения
правила, которое отделяется от самого значения пробелом,
и оно тоже повышает приоритет, но только для данного конкретного правила.
Еще интересно то, что мы можем комбинировать инлайн
и !important и можем указать внутри стилей ключевое слово !important.
Как же это влияет на специфичность?
А влияет это так, что инлайн-стили приоритетнее всех;
приоритетнее инлайн-стилей будут стили с ключевым словом !important; и, наконец,
самое приоритетное — это стили, у которых есть и инлайн, и !important.
Но, на самом деле, это не совсем так, об этом будет чуть-чуть попозже.
В модели специфичности эти стили также последовательно проваливаются вниз.
То есть мы отсортировали все стили, которые были с помощью
обычной специфичности вычислены, дальше мы пишем все стили,
которые были употреблены непосредственно инлайн внутри элемента.
После них мы пишем стили с !important, и после них и инлайн, и !important.
И в данном случае у нас будут применены вот эти вот стили.
Также в CSS есть механизм наследования стилей.
В чем он выражается?
Некоторые стили могут быть применены не только
непосредственно к элементу, но и к его потомкам.
Важно помнить, что, несмотря на это, эти стили не имеют специфичности вообще.
Поэтому эти стили будут переопределены любым селектором, даже селекторами,
которые имеют нулевую специфичность, например, универсальный селектор.
Давайте же рассмотрим вот такой вот пример: у нас есть div,
внутри которого есть фраза, и внутри этой фразы есть элемент аббревиатуры.
Для div'а мы задаем зеленый цвет,
но результат у нас будет весь зеленый,
а не только текст, который находится непосредственно внутри div'а.
Это происходит потому, что элемент аббревиатуры унаследовал
зеленый цвет от div'а, при этом он не имеет специфичности.
Другой пример, когда у нас помимо селектора элемента div,
есть еще и универсальный селектор, где мы задаем красный цвет.
В данном случае этот универсальный селектор будет приоритетнее унаследованных
стилей, и мы получим то, что текст внутри аббревиатуры будет красным.
Не все стили наследуются.
Полный список мы приведем в дополнительных материалах к данной лекции.
Вот здесь на слайде я показываю лишь некоторые из стилей,
которые могут быть унаследованы.
Последняя тема, о которой хотелось бы поговорить,
это порядок наложения стилей в зависимости от источника их получения.
Начинающие верстальщики ожидают, что стили, которые они указывают в CSS-файлах
— это единственный источник стилей на их веб-страницах.
Но это не так.
Таких источников несколько.
Например, одним из таких источников являются стили браузера.
Именно благодаря им, не указав ни единой строчки кодов CSS,
вы получите на вашей странице черные тексты на белом фоне.
Следующий источник — это браузерные плагины или пользовательские стили,
которые можно указать в некоторых браузерах.
И только после них идут стили, которые верстальщики указывают на странице.
После этих стилей идут те же самые стили, но с ключевым словом !important,
и, что интересно, есть еще более приоритетные стили в данном случае.
Это стили, которые будут приходить из браузерных плагинов,
или пользовательские стили с ключевым словом !important.
Именно вот такая последовательность наложения стилей и называется каскадом.
В данном видео мы рассмотрели специфичность.
Понимание того, как выстраиваются приоритеты наложения стилей
в CSS — это одно из самых важных пониманий для дальнейшего изучения верстки.
Также мы рассмотрели термин «каскад» и порядок
наложения стилей в зависимости от получения их из разных источников.
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
