0:00
[БЕЗ_ЗВУКА] В
этом видео мы помострим, что такое CSS
и его назначение, рассмотрим классы и идентификаторы,
понятие и виды селекторов, псевдоклассы и псевдоэлементы,
приоритеты селекторов, а также рассмотрим методологию БЭМ.
HTML, в отличие от XML, обладает семантикой,
то есть браузер знает, как отображать тот или иной HTML тэг.
Также в HTML есть тэги для управления внешним видом, например color,
font, big и так далее, но их возможности явно недостаточны.
Решение — это описывать внешний вид отдельно от структуры документа с
помощью языка CSS.
CSS выглядит следующим образом и имеет такой синтаксис.
Вначале указывается некий селектор (что такое селектор,
мы посмотрим немного позже), а в фигурных скобках указываются стили,
которые необходимо применить к элементам, которые соответствуют этому селектору.
Комментарии в CSS указываются как /*
комментарии и закрыть */ Где могут быть заданы стили?
Это стили, которые встроены в сам браузер; во внешнем файле,
это с помощью тэга link внутри тэга head,
который мы рассматривали в прошлом видео; в самом HTML — тэг style.
И стили могут быть привязаны непосредственно к самому
HTML элементу — к тэгу.
Теперь, что такое классы и идентификатор.
Идентификатор — это собственно id элемента.
Он указывается с помощью атрибута id.
Элемент с таким id может быть единственным на страницу.
Класс указывается в атрибуте class, их может быть несколько,
и может быть несколько элементов с таким классом.
Давайте теперь рассмотрим селекторы и как их описывать.
Еще раз повторюсь, что селекторы — это некие правила, по которым тестируется,
применять ли стили к тэгу или нет.
Универсальный селектор соответствует звездочке, то есть стили,
которые указаны в этом селекторе, применить на все тэги.
Селектор по имени тэга.
То есть все стили, которые указаны в этом селекторе,
будут применены к тэгу p в нашем случае.
Селектор по классу.
Он начинается с точки, например, .btn — это будет означать,
что данные стили будут применены ко всем элементам, в которых есть класс button.
И селектор по id.
Это будет означать, что данные стили будут
применены только к элементам, у которых id — userpic.
Такой селектор начинается с решетки.
Можно достаточно сложные правила указывать в селекторах.
Например, контекстные селекторы, или вложенные: div.article
a будет означать элементы a,
которые вложены в контейнер div с классом article.
Дочерние, например,
a > img будет означать,
что стиль будет
применен к всем тэгам img,
которые находятся внутри a.
Например, группировка — h1, h2 будет означать,
что данный стиль нужно применить как к тэгам h1, так и к тэгам h2.
То же самое действует и для классов.
То есть если через запятую указать селекторы по классам,
то эти стили будут применены и к тому и к другому классу.
Что же делать, если нам необходимо применить стиль к ссылке,
которую мы посетили, или к элементу, на который мы сейчас навели мышкой?
Для этого существуют псевдоклассы.
Например, a:visited будет соответствовать ссылкам,
по которым мы уже щелкнули; a:link — этот селектор будет соответствовать ссылкам,
по которым еще не щелкали; div:hover будет соответствовать элементу div,
на который мы навели мышкой; input:focus
будет означать тот input,
который является активным, то есть, например,
мы на него нащелкали табом; li:first-child будет означать первый
элемент в списке; li:last-child будет означать последний элемент в списке.
Псевдоэлементы — это виртуальные элементы сразу или непосредственно до элемента.
Например, это необходимо, когда у нас есть элемент с id el, то есть #el.
И до него нам нужно вставить какую-то иконку или после него.
Например, вы нажимаете оплату, и там будет иконка денег.
В таком случае используются псевдоэлементы.
Что же делать,
если тэгу соответствует несколько селекторов и происходит конфликт стилей?
В случае, если два разных стиля конфликтуют между собой,
применяется тот стиль, у которого большая специфичность у селектора.
Давайте теперь рассмотрим, как же эта специфичность считается.
Если в селекторе указан id, то это сразу специфичность 100.
Если в селекторе указан класс, то это специфичность 10.
Если в селекторе указан тэг, то это специфичность 1.
И они все суммируются.
Например, давайте рассмотрим селектор li.red.level.
Этот селектор будет означать, что все элементы,
все тэги li, у которых есть класс red и level,
у этого селектора будет специфичность 21.
А если, например, мы сделаем селектор .level,
он также будет применяться к этим элементам,
но у li.red.level большая специфичность, и его стили будут применены.
Давайте теперь рассмотрим методологию БЭМ.
БЭМ — это методология, как называть стили и
как в целом верстать.
Он описывает компонентный подход к веб-разработке.
В его основе лежит принцип разделения интерфейса на независимые блоки.
БЭМ расшифровывается как Блок, Элемент, Модель.
Блок в методологии БЭМ — это функционально независимый компонент страницы,
который может быть повторно использован.
Блоком будет являться кнопка у вас на сайте, потому что эта кнопка может быть
использована повсеместно на других страницах,
и глупо привязывать ее к текущей.
Название блока характеризует смысл (что это?
— меню или кнопка), а не состояние (например, как она выглядит).
В CSS по БЭМ не рекомендуется использовать селекторы по тэгам или по id,
а рекомендуется использовать селекторы по классам.
Элемент в методологии БЭМ — это составляющая часть блока,
которая не может быть использована в отрыве от него.
Например, у вас внутри кнопки есть некая иконка.
Эту иконку, скорее всего, в отрыве от этого блока нельзя будет использовать,
поэтому это будет называться элементом.
Или, например, у вас есть меню.
И элемент в этом меню тоже будет, как ни странно,
являться элементом методологии БЭМ.
Название элемента характеризует его смысл (пункт меню),
а не состояние (например, нажатый пункт меню или красный пункт меню).
Структура полного имени элемента соответствует схеме: имя блока,
которым является этот элемент, два андерскора, имя элемента.
В имени блока не допускается нижнее подчеркивание,
и в имени элемента тоже не допускается нижнее подчеркивание.
Разделять слова стоит с помощью черточек.
Модификатор в методологии БЭМ — это сущность,
которая определяет внешний вид, состояние или поведение блока.
Например, название модификатора характеризует внешний вид (например,
size_s, size_m — его размер) или его состояние (например,
disabled, visited и так далее).
Называется имя
блока или имя элемента, один андерскор, модификатор.
Собственно, дальше идет пример формы, сверстанной по БЭМ-у.
Форма у нас будет являться блоком.
И этот блок будет называться login-form.
Дальше идет первый input.
Это будет являться элементом этой формы, и стиль у него
будет login-form__ username-input.
Дальше у нас идет также элемент buttons,
то бишь класс у него будет login-form__buttons.
Внутри него также будут идти элементы.
Например, элемент button login-form__submit.
И в конце у нас будет еще один button, но можно увидеть,
что у него есть класс login-form__ reset_disabled.
Это будет означать, что мы применили модификатор к этой кнопке,
и эта кнопка сейчас в данный момент неактивна.
Это вкратце, что означает методология БЭМ.
В следующем видео мы поподробнее посмотрим на примере.
Сегодня мы рассмотрели, что такое CSS и его назначение,
дали понятие классам и идентификаторам, рассмотрели,
что такое селекторы, псевдоклассы и псевдоэлементы, рассмотрели,
что такое приоритеты селекторов и зачем они нужны,
и рассмотрели методологию БЭМ.
[ЗВУК] [БЕЗ_ЗВУКА]
Абрамов Тимур
Пестров Никита
Опрышко Александр
Партилов Алексей
