htmlbook.ru - Для тех, кто делает сайты
Шаг за шагом Графика для Web
Шаг за шагом > CSS по шагам

CSS по шагам

Шаг 1. Что такое CSS

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

Шаг 2. Подключение CSS

Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением.

Шаг 3. Типы носителей

Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного приспособления.

Шаг 4. Базовый синтаксис

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

Шаг 5. Селекторы тегов

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

Шаг 6. Классы

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега.

Шаг 7. Идентификаторы

Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.

Шаг 8. Комментарии

Комментарии нужны, чтобы делать пояснения по поводу использования того или иного свойства CSS. Это позволяет легко вспоминать логику и структуру селекторов и повышает разборчивость кода.

Шаг 9. Контекстные селекторы

При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте.

Шаг 10. Соседние селекторы

Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Для управления стилем соседних элементов используется символ плюса, который устанавливается между двумя селекторами. Стиль при такой записи применяется ко второму селектору, но только в том случае, если он является соседним для первого селектора и следует сразу после него.

Шаг 11. Дочерние селекторы

Дочерним селектором считается такой, который в дереве элементов находится прямо внутри родительского элемента. При записи такие селекторы разделяются между собой символом > (больше) и стиль применяется ко второму селектору, но только в том случае, если он является дочерним для первого селектора.

Шаг 12. Селекторы атрибутов

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

Шаг 13. Универсальный селектор

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

Шаг 14. Группирование

При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода.

Шаг 15. Наследование

Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.

Шаг 16. Псевдоклассы

Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши.

Шаг 17. Псевдоэлементы

Псевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.

Шаг 18. Правила создания стиля

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

CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением. Стили являются удобным, практичным и эффективным инструментом для верстки веб-страниц и оформления текста, ссылок, изображений и других элементов.

Copyright Влад Мержевич, по всем вопросам пишите по адресу: vlad@htmlbook.ru