CSS
CSS (/siːɛsɛs/ англ. Cascading Style Sheets «каскадные таблицы стилей») — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.
Для чего нужен CSS
Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.
Документ обычно представляет собой текстовый файл, структурированный с использованием языка разметки:
- HTML — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как SVG или XML.
Представление документа пользователю означает преобразование его в форму, используемую вашей аудиторией. Firefox, Chrome или Edge, предназначены для визуального представления документов.
CSS может использоваться для очень простой стилизации текста документа, например, изменение цвета и размера заголовков и ссылок. Он может быть использован для создания макета, например, превращение одного столбца текста в макет с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как анимация. Посмотрите на ссылки в этом параграфе для конкретных примеров.
Как работает CSS
В HTML-документе находятся данные только о структуре веб-страницы. Чтобы правильно вывести её на экран, с учётом дизайна сайта и особенности экрана пользовательского устройства, браузер объединяет HTML-документ с файлом «стилей», который есть у любого сайта. Такое объединение происходит поэтапно. Вот основные шаги, как работает CSS:
- Пользователь открывает сайт, например, переходя на него со страницы результатов поиска.
- Браузер начинает загрузку HTML-документа.
- Файл преобразуется в DOM, чтобы использовать компьютерную память.
- Браузер анализирует все компоненты, на которые в HTML-документе есть URL, и которые связаны с таким документом. К таким ресурсам и компонентам как раз и относятся «стили» (а также, например, любые медиафайлы: картинки, GIF, видеофайлы). Внимание: если ссылки в HTML-документе на «стили» нет, то браузер не сможет получить к ним доступ. JS-код обрабатывается далее, но не на этом этапе.
- Браузер начинает проверять файл «стилей». В частности, он пытается отсортировать правила, содержащиеся в нём (по их типу селектора). Каждое правило определяется в свою категорию или bucket (например, ID, элемент, класс). Далее, на этом промежуточном шаге, также происходит связывание обнаруженных селекторов с правилами. Правила применяются к определенным DOM-узлам, а затем к каждому из них привязывается определённый «стиль». Всё, теперь браузер знает, как именно нужно отрисовывать страницу.
- Происходит отрисовка страницы уже с настроенным дизайном её элементов.
