Статьи / Веб-разработка / CSS по шагам /

Шаг 1. Что такое CSSПросмотров: 1237
14.04.2009 20:02
CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор параметров форматирования, который применяется к элементам веб-страницы для управления их видом и положением. Стили являются удобным, практичным и эффективным инструментом при верстке веб-страниц и оформления текста, ссылок, изображений и других элементов. Далее описаны преимущества, которые дает CSS.
Шаг 2. Подключение CSSПросмотров: 1329
14.04.2009 20:05
Для добавления стилей на веб-страницу существует несколько способов, которые различаются своими возможностями и назначением. Далее рассмотрены способы подключения CSS.
Шаг 3. Типы носителейПросмотров: 1274
14.04.2009 20:12
Широкое развитие различных платформ и устройств заставляет разработчиков делать под них специальные версии сайтов, что достаточно трудоемко и проблематично. Вместе с тем, времена и потребности меняются, и создание сайта для различных устройств является неизбежным и необходимым звеном его развития. С учетом этого в CSS введено понятие типа носителя, когда стиль применяется только для определенного приспособления. В табл. 3.1 перечислены некоторые типы носителей.
Шаг 4. Базовый синтаксисПросмотров: 2079
14.04.2009 20:19
Способ записи CSS отличается от формы использования тегов HTML и в общем виде имеет следующий синтаксис.
Шаг 5. Селекторы теговПросмотров: 1212
14.04.2009 20:21
В качестве селектора может выступать любой тег HTML для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде.
Шаг 6. КлассыПросмотров: 1283
14.04.2009 20:24
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.
Шаг 7. ИдентификаторыПросмотров: 1262
15.04.2009 16:14
Идентификатор (называемый также «ID селектор») определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты, что позволяет управлять стилем элемента динамически.
Шаг 8. КомментарииПросмотров: 1266
15.04.2009 16:16
Комментарии нужны, чтобы делать пояснения по поводу использования того или иного свойства CSS. Это позволяет легко вспоминать логику и структуру селекторов и повышает разборчивость кода. Вместе с тем, добавление текста увеличивает объем документов, что отрицательно сказывается на времени их загрузки. Поэтому комментарии обычно применяют в отладочных или учебных целях, а при выкладывании сайта в сеть их стирают.
Шаг 9. Контекстные селекторыПросмотров: 1297
15.04.2009 16:19
При создании веб-страницы часто приходится вкладывать одни теги внутрь других. Чтобы стили для этих тегов использовались корректно, помогут селекторы, которые работают только в определенном контексте. Например, задать стиль для тега <B> только когда он располагается внутри контейнера <P>. Таким образом можно одновременно установить стиль для отдельного тега, а также для тега, который находится внутри другого.
Шаг 10. Соседние селекторыПросмотров: 1733
15.04.2009 16:26
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа. Рассмотрим несколько примеров отношения элементов.
Шаг 11. Дочерние селекторыПросмотров: 1293
15.04.2009 16:30
Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Чтобы лучше понять отношения между элементами документа, разберем небольшой код (пример 11.1).
Шаг 13. Универсальный селекторПросмотров: 1338
15.04.2009 16:38
Иногда требуется установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. В этом случае поможет универсальный селектор, который соответствует любому элементу веб-страницы.
Шаг 14. ГруппированиеПросмотров: 1174
15.04.2009 16:39
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся параметров. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 14.1 показана обычная запись, для каждого селектора приводится свой набор стилевых атрибутов.
Шаг 12. Селекторы атрибутовПросмотров: 1666
15.04.2009 16:40
Для изменения стиля элементов содержащих различные параметры, в CSS введены селекторы атрибутов. Они позволяют установить стиль тега по присутствию определенного параметра или его значения.
Шаг 15. НаследованиеПросмотров: 1268
15.04.2009 16:42
Наследованием называется перенос правил форматирования для элементов, находящихся внутри других. Такие элементы являются дочерними, и они наследуют некоторые стилевые свойства своих родителей, внутри которых располагаются.
Шаг 16. ПсевдоклассыПросмотров: 1426
15.04.2009 16:49
Псевдоклассы определяют динамическое состояние элементов, которое изменяется со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с их помощью можно получить разные динамические эффекты на странице.
Шаг 17. ПсевдоэлементыПросмотров: 1300
15.04.2009 16:54
Псевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Например, объектная модель документа не предлагает удобного механизма для доступа к первому символу текста, поэтому псевдоэлементы позволяют изменить стиль недоступного иным образом элемента.
Шаг 18. Правила создания стиляПросмотров: 1221
15.04.2009 16:59
При написании достаточно объемного CSS-файла следует придерживаться некоторых общих рекомендаций, которые помогут избежать ошибок, сделать код понятным и удобным.