Для большинства CSS вам не нужно беспокоиться об заучивании свойств и значений. Вы можете найти их, когда они вам понадобятся. Однако есть некоторые базовые основы языка, без которых его будет сложно понять. На самом деле, стоит потратить некоторое время, чтобы убедиться, что вы понимаете эти вещи, так как это сэкономит вам много времени и нервов в долгосрочной перспективе.
Псевдокласс и псевдоэлемент, больше, чем просто класс
Селектор выбирает часть вашего документа, чтобы вы могли применить к нему правила CSS. Хотя большинство пользователей знакомы с использованием классов или непосредственным проектированием HTML-элемента, такого как body, существует большое количество расширенных селекторов, которые могут выбирать элементы в зависимости от их положения в документе, можно выбирать дочерний элемент или каждую нечетную строку.
Селекторы, которые являются частью спецификации уровня 3 (вы, возможно, слышали, что они называются селекторами уровня 3), имеют отличную поддержку браузера. Подробное описание различных селекторов, которые вы можете использовать, см. В справочнике MDN.
Некоторые селекторы действуют так, как если бы вы применили класс к чему-то в документе. Пример: p: first-child ведет себя так, как если бы вы добавили класс к первому элементу p. Их называют селекторами псевдоклассов. В псевдоэлементе селекторы ведут себя так, как если бы элемент был вставлен динамически.
Пример: ::first-line действует таким же образом как обернуть <span> вокруг первой строки текста. Однако он будет применен повторно, если длина этой строки изменится, чего не будет, если вы используете <span>. С этими селекторами можно усложнить задачу.
На CodePen показан пример псевдоэлемента, связанного с псевдоклассом. Мы нацелены на первый pэлемент с :first-child псевдо-классом, затем на ::first-line selector выбирает первую строку этого элемента, действуя так, как если бы вокруг этой первой строки был добавлен <span>, чтобы сделать его жирным и изменить цвет.
Независимо от наполнения первый параграф всегда, динамически будет подстраивать стиль под размер параграфа
Наследование и каскадирование (не путать с каскадерами ! )
Каскад определяет, какое правило выигрывает, когда к одному элементу может применяться несколько правил. Если вы когда-либо были в ситуации, когда не могли понять, почему какой-то CSS не работает, скорее всего, вас сбивает каскадирование. Каскад тесно связан с наследованием, которое определяет, какие свойства наследуются дочерними элементами элемента, к которому они применяются. Это также связано со спецификой; разные селекторы имеют разную специфику, которая определяет, какой из них выигрывает, когда есть несколько селекторов, которые могут применяться к одному элементу.
Примечание . Чтобы понять все эти вещи, я бы посоветовал прочитать «Каскад и наследование» в MDN Introduction to CSS.
Если вам не удается применить какой-либо CSS к элементу, тогда лучше всего начать с DevTools в браузере. Взгляните на приведенный ниже пример, в котором у меня есть h1 элемент, которому я задаю оранжевый цвет, h1 должен становится оранжевым. Я также использую класс " veggies", который устанавливает h1 значение rebeccapurple. Класс более конкретный, поэтому h1 стал фиолетовым а не оранжевым. В DevTools( Это опция внутри браузера, комбинация клавиш: cntrl + shift + i) вы можете видеть, что селектор элемента перечеркнут, поскольку он не применяется. Как только вы увидите, что браузер получает ваш CSS (но что-то другое его отменило), вы можете начать выяснять, почему.
Этот же код на codepen
Блочная модель CSS
CSS - это все о блоках. Все, что отображается на экране, имеет поле, а модель блока описывает, как определяется размер этого поля - с учетом полей, отступов и границ. Стандартная модель бокса CSS берет ширину, которую вы задали элементу, а затем добавляет к этой ширине отступ и рамку- это означает, что пространство, занимаемое элементом, больше, чем ширина, которую вы ему задали.
Совсем недавно мы смогли использовать альтернативную блочную модель, которая использует заданную ширину элемента в качестве ширины видимого элемента на экране. То есть контент вписывается в заданную ширину блока. Это позволяет верстать дизайн макеты без головной боли и не держать калькулятор под рукой.
В демонстрации ниже у меня есть две коробки. Оба имеют ширину 200 пикселей, границу 5 пикселей и отступ 20 пикселей (все значения складываются). Первый блок использует стандартную модель блока, поэтому его общая ширина составляет 250 пикселей. Во втором используется альтернативная блочная модель, поэтому ширина на самом деле составляет 200 пикселей.
Browser DevTools снова может помочь вам разобраться в используемой блочной модели. На изображении ниже я использую Firefox DevTools для проверки блоков, используя content-box модель блоков по умолчанию . Инструменты говорят мне, что это используемая модель блока, и я могу видеть его размер и то, как граница и отступы добавляются к назначенной мной ширине.
На этом пожалуй все, продолжим в следующем выпуске
Ссылки на материалы по темам:
1. Псевдоклассы и псевдоэлементы
2. Наследование и каскадирование
