1. CSS для начинающих. Введение. Подключение, базовые концепции: каскад, специфичность, наследование

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

Три способа применения стилей с использованием внешних таблиц стилей в качестве наилучшей практики Стили могут быть применены встроенно с помощью атрибута style, внутри элемента style в head или с помощью внешнего css-файла. Рекомендуемый масштабируемый подход - привязка внешней таблицы стилей к head. Используйте rel="таблица стилей" и внешнюю ссылку на CSS-файл; тег link не имеет закрывающего тега и также соединяет другие ресурсы. Встроенные стили могут показаться удобными, но они плохо масштабируются по мере роста проектов.

Селекторы, свойства и значения формируют каждое правило CSS Правило CSS объединяет селектор с блоком объявления в фигурных скобках. Селекторы предназначены для стилизации элементов, таких как все абзацы p или все ссылки a. Свойства записываются как name: value и заканчиваются точкой с запятой, обычно размещаемые в отдельных строках для удобства чтения. К элементу может быть применимо любое количество свойств; практический способ изучить их - использовать в реальных задачах.

Каскад Разрешает конфликты по источнику, специфике и порядку Когда на элемент влияет несколько правил, каскад выбирает, какие из них применяются, исходя из приоритета, специфичности и источника. Источники ранжируются от самых низких до самых высоких: настройки браузера по умолчанию, пользовательские стили, авторские стили, стили анимации, авторские правила с !важно, пользовательские правила с !важно, правила браузера с !важно и стили при переходе. Знание того, какие источники могут повлиять на внешний вид элемента, важнее, чем запоминание точной последовательности. Наследование и переопределения являются неотъемлемыми частями этого механизма.

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

Наследование упрощает оформление текста; Экономьте на комментариях, чтобы сохранить чистоту кода Унаследованные свойства позволяют потомкам принимать значения от своих предков, поэтому настройка цвета заголовка распространяется на вложенные элементы nav, ul и li. Большинство унаследованных свойств относятся к тексту — параметры шрифта, цвет, тени от текста, а также стиль списка, внешний вид курсора и свойство видимости. Определение типографики в тексте удобно для применения ко всем видимым элементам. Комментарии CSS используют /* ... */ и могут занимать одну или несколько строк; удалите временные примечания, чтобы сохранить порядок в коде.