Устройство CSS

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

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

Необходимые умения

Перед изучением этого раздела вы должны иметь:

  1. Стандартную рабочую среду (Установке базового программного обеспечения), а также понимание того, как создавать файлы и работать с ними (Работа с файлами).
  2. Общее представление о HTML (модуль Введение в HTML).
  3. Общее представление о CSS (модуль Начало работы с CSS).

Примечание: Если вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, вы можете опробовать примеры (большую часть) на таких онлайн-программах, как JSBin или Glitch.

Руководства

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

Каскад и наследование

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

CSS-селекторы

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

Блоки в CSS

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

Фон и границы

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

Изменение направления текста

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

Перекрытие содержимого

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

Значения свойств CSS

У каждого CSS-свойства есть значения. В этом уроке мы рассмотрим основные значения и их единицы.

Изменение размеров в CSS

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

Элементы изображений, форм и медиа-элементы

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

Стилизация таблиц

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

Отладка CSS

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

Организация CSS-кода

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

Смотрите также

Узконаправленные функции CSS

В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.