Таблицы стилей CSS или каскадные таблицы стилей

Веб-разработчики используют CSS, чтобы задать цветовую палитру, шрифты, расположение и другие элементы дизайна документа.

Цель и задачи CSS

Основная цель создания CSS заключалась в разделении содержимого, написанного на HTML или аналогичном языке разметки, от его визуального представления, оформленного с помощью CSS. Это разделение способствует повышению доступности документа, а также добавляет гибкость и контроль над его представлением, снижая при этом сложность и избыточность в структуре содержания.

Каскадные таблицы стилей CSS также предоставляют возможность отображать один и тот же документ в нескольких стилях или форматах — например, для экранного отображения, печати, чтения с использованием голосовых программ или на устройствах, в которых используется шрифт Брайля.

Приоритетность отображения стилей

При отображении страниц стили-CSS могут поступать из разных источников, и их приоритеты устанавливаются в следующем порядке (от наиболее важного к наименее важному):

1. Авторские стили — это информация о стилях, заданная автором страницы:
   • inline-стили, где стиль для конкретного элемента указывается непосредственно в атрибуте `style` HTML;
   • встроенные стили — CSS-блоки, размещенные в самом HTML-документе;
   • внешние таблицы стилей — отдельные файлы .css, на которые ссылаются в документе.
2. Пользовательские стили — локальный CSS-файл, указанный пользователем в настройках браузера, который переопределяет авторские стили и применяется ко всем документам.
3. Стили браузера — стандартный стиль, который браузер использует по умолчанию для отображения элементов.

Каждая из каскадных таблиц стилей состоит из совокупности правил. Правило включает в себя

• одно или несколько селекторов, разделённых запятыми,
• блок определений, который обрамляется фигурными скобками и включает набор свойств и значений.

Стандартом CSS устанавливается приоритет применения стилей, если для одного элемента определены свойства нескольких правил. Этот механизм называется «каскадом», и он позволяет предсказать результаты применения стилей, оценивая их приоритет или «вес». Приоритет определяется в следующем порядке (от большего к меньшему):

• Свойство задано через `!important`;
• Стиль прописан непосредственно в теге;
• Количество уникальных кодов или идентификаторов (`#id`) в селекторе (большее количество значит более высокий приоритет);
• Численность классов (`.class`) и псевдоклассов (`:pseudoclass`) в селекторе;
• Показатель количества имен тегов в селекторе.

 Также важно, в каком порядке указаны свойства: последнее объявленное свойство будет приоритетным. 

p { font-family: "Garamond", serif; }

h2 { font-size: 110%; color: red; background: white; }

.note { color: red; background: yellow; font-weight: bold; }

p#paragraph1 { margin: 0; }

a:hover { text-decoration: none; }

#news p { color: blue; }

В этом примере представлены правила с селекторами `p`, `h2`, `.note`, `p#paragraph1`, `a:hover` и `#news p`. 

Первыми двумя правилами определяются стили для субъектов `p` (абзацы) и `h2` (заголовки второго уровня). Абзацы будут отображаться с использованием шрифта Garamond или другого шрифта с засечками, если первый будет недоступен. Заголовки второго уровня будут красными на белом фоне с увеличенным кеглем. 

В третьем правиле стиль применяется к компонентам с классом `note`, например: `<p class="note">`. Эти абзацы будут выделяться полужирным шрифтом, цвет красный, фон желтый.

Четвертым правилом уточняется элемент `p`, у которых идентификатор равен `paragraph1`. Этот компонент не будет иметь внешних отступов (`margin`).

В пятом правиле описывается стиль при наведении (`hover`) на субъекты `a`, который удаляет подчеркивание, логично, так как оно присутствует по умолчанию в большинстве браузеров. 

Заключительное, шестое правило, применяется к компонентам`p`, которые расположены внутри субъекта с идентификатором `news`.

CSS-вёрстка

Когда еще CSS не был разработан, стилизация (оформление) веб-страниц выполнялось внутри содержания документа. С вводом CSS стало возможным чёткое разграничение между содержимым и его визуализацией. Это новшество упростило использование единого стиля оформления к множеству схожих документов и ускорило процесс изменений.

Преимущества: 

• Реализация альтернативных дизайнов страницы с визуализацией на разных устройствах. Например, на экране дизайн может быть адаптирован для широкой области просмотра, в то время как для печати меню может быть скрыто, а на мобильных устройствах оно будет находиться в соответствии с основным содержанием.
• Сокращение времени на загрузку страниц сайта благодаря выделению стилей в отдельный CSS-файл. В таком случае браузер загружает только структуру документа и контент, а стили можно загружать один раз с кешированием.
• Упрощение изменения дизайна — необходимо менять только CSS-файл, а не каждую страницу.
• Расширение опций оформления — к примеру, создание обтекаемого текста вокруг блока или обеспечение видимости меню при прокрутке.

Недостатки:

• Различное отображение стилей в разных браузерах (особенно устаревших), что может привести к неоднородному восприятию одних и тех же CSS-данных.
• Часто возникают ситуации, когда необходимо не только корректировать один CSS-файл, но и изменять HTML-теги, что вызывает сложность в работе с селекторами и увеличивает время редактирования и тестирования.