Предыдущий ролик Следующий ролик  

Видео урок: Изучение CSS

Основы веб-дизайна

Аббревиатура CSS расшифровывается как "cascading style sheets" (каскадные таблицы стилей). В отличие от HTML, который является языком разметки, CSS - это язык отображения. Это означает, что его синтаксис абсолютно отличается от синтаксиса HTML. Я не имею в виду, что изучать его труднее. На самом деле я хотел сказать, что CSS немного проще HTML. Основы CSS довольно просты. Таблицы стилей состоят из правил, которые регулируют стиль и расположение элементов HTML. Каждое правило состоит из селекторов, позволяющих определить те элементы страницы, к которым будет применяться стиль, и объявлений, содержащих свойства и значения, которые впоследствии используются браузером для стилизации элемента.

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

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

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

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

В связи с тем что браузеры могут отображать одни и те же свойства с небольшими отличиями, и поскольку они не всегда поддерживают свойства CSS, важно иметь общее представление о том, какие свойства поддерживаются и каковы отличия отображения этих свойств в том или ином браузере. Временами можно использовать для браузеров fallback-режимы или так называемые "обходные пути" (workarounds) или просто учитывать в дизайне различия браузеров. Как и во время обсуждения HTML, мне хочется поделиться с вами парочкой ресурсов, посвященных CSS. В первую очередь вы должны обратить внимание вот на эту страницу. Это страница "CSS current work" (Текущая работа с CSS) на сайте проекта W3C.

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

Как и в случае с языком HTML, на странице docs.webplatform.org есть раздел "CSS", имеющий практически аналогичную структуру. В нем есть обучающие материалы, приведено описание различных свойств и селекторов, различных функций, которые поддерживаются с недавних пор, медиа-запросов на тот случай, если вам захочется заняться адаптивным дизайном, и тому подобное. Таким образом, в одном месте собрано множество обучающего материала. Если вам хочется подробнее ознакомиться с различиями отображения свойств в браузерах, то рекомендую вам посетить вот этот сайт - caniuse.com. Этот сайт не относится к тем сайтам, которые просто просматриваются на досуге.

Обычно сюда заходят за конкретной информацией. Например, если вы хотите понять, насколько хорошо поддерживаются в CSS градиенты, то можете щелкнуть по этой ссылке, в результате чего вам будет предоставлена таблица с перечнем браузеров, в которой будет указано, какие версии браузеров поддерживают это свойство. На этом сайте содержится множество полезной информации. Скорее всего, вы добавите этот сайт в закладки и будете часто к нему обращаться, поскольку в своих файлах будете использовать свойства CSS. После овладения основами CSS рекомендую ознакомиться с сайтом css-tricks.com. Страница Криса стала фактически главной страницей для тех пользователей, которые ищут информацию о CSS и действительно интересные статьи.

На его сайте есть несколько удивительных пособий, а также статьи, посвященные развитию CSS. Этот сайт вам определенно захочется добавить в закладки, чтобы потом снова к нему возвращаться. И конечно, есть еще один ресурс, на котором вы сейчас и находитесь, - сайт lynda.com. Я особенно горжусь тем материалом, который посвящен CSS, поскольку я разработал полноценный комплект курсов по CSS, предназначенный для обучения CSS в логической последовательности. Например, как вы сами видите, есть курсы "CSS Core Concepts" (Ключевые концепции CSS), "CSS Fundamentals" (Основы CSS) и "CSS Page Layouts" (Макеты страниц CSS).

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