CSS (Cascading Style Sheets, каскадные таблицы стилей) — язык описания внешнего вида веб-страниц. Он задаёт цвета, шрифты, отступы, размеры и расположение элементов. В Joomla CSS отвечает за оформление страниц, созданных шаблоном и расширениями.
Как устроены правила CSS
Правило содержит селектор и набор свойств со значениями. Селектор определяет, к каким элементам применяется оформление, например к элементам с определённым классом. HTML задаёт структуру содержимого, а CSS — его представление.
Классы подходят для повторяемых элементов: карточек, кнопок и блоков. Слишком общие селекторы могут изменить весь сайт, поэтому собственные стили полезно ограничивать конкретным компонентом или контейнером.
Каскад, специфичность и наследование
Если несколько правил задают одно свойство, браузер разрешает конфликт по правилам каскада. Учитываются источник и важность объявления, слои каскада, специфичность селектора, а при прочих равных — порядок. Поэтому последний файл не всегда «побеждает».
Наследование — отдельный механизм: некоторые значения, например цвет текста, могут переходить от родительского элемента к дочерним. Не все свойства наследуются. Частое применение !important затрудняет последующие изменения и обычно не заменяет поиск причины конфликта.
Блочная модель
Размер элемента складывается из области содержимого, внутренних отступов padding, границы border и внешних отступов margin. При box-sizing: border-box заданные ширина и высота включают внутренние отступы и границу. Это помогает предсказуемо рассчитывать размеры карточек и колонок.
Адаптивное оформление
Flexbox и Grid помогают строить макеты, а медиазапросы — менять оформление в зависимости от условий, например ширины экрана. Пользовательские свойства CSS позволяют переиспользовать значения цветов и размеров. Проверяйте не только ширину окна, но и увеличение текста, длинные заголовки и управление с клавиатуры.
CSS в Joomla
Шаблон Joomla и установленные расширения могут подключать собственные стили. Для доработок используйте предусмотренный шаблоном пользовательский файл или дочерний шаблон. Не считайте имя user.css или custom.css универсальным: оно зависит от выбранного шаблона и его правил загрузки.
Разработчики расширений Joomla управляют подключением стилей через Web Asset Manager. После изменения проверяют фактически загруженные файлы, кеш и итоговые свойства элемента в инструментах разработчика браузера.
Итог
CSS отделяет оформление от структуры страницы. Для устойчивых изменений сайта Joomla важно понимать каскад, ограничивать область действия правил и проверять макет на разных экранах.