Вступление в CSS

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

Предисловие

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

  1. Базовые знания о компьютере и умение пользоваться Интернетом (то есть, совершать поиск и просматривать страницы).
  2. Базовое рабочее окружение. Подробнее об установке базового программного обеспечения. Так же вы должны понимать, как работать с файлами. Об этом можно прочитать в разделе Работа с файлами.
  3. Базовые навыки в HTML. Их можно получить в разделе Введение в HTML.

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

Руководства

Этот раздел содержит статьи, которые дадут вам всю базовую теорию CSS и возможость проверить свои способности.

Как работает CSS
В этом разделе мы начнем с теоретической базы, разберем, что из себя представляет CSS, как браузеры превращают HTML в DOM и как CSS применяется к частям  DOM, рассмотрим самые простые примеры синтаксиса и узнаем, как подключить CSS к нашей веб-странице.
Синтаксис CSS 
В этом шаге мы погрузимся в CSS синтаксис более детально, посмотрим, как свойства и их значения формируют объявления, а несколько объявлений формируют блоки объявлений, а блоки объявлений и селекторы собираются в CSS. Мы также добавили описание некоторых синтаксических фич CSS вроде комментариев и форматирования пробелами.
Селекторы
Селекторы уже были затронуты в предыдущей статье, но в этом руководстве мы раскроем больше деталей и покажем, что селекторы могут и как они работают.
Значения и единицы измерения CSS
Здесь мы рассмотрим много типов значений в CSS, от численных значений цветов до функций, выполняющих определенное действие (таких, как встраивание фонового изображения или поворот элемента). Некоторые из них частично или полностью зависимы от единиц измерения величин. Например, вы можете создать блок шириной 30 пикселей, а можете 30 сантиметров. В этом руководстве мы рассмотрим много распространенных значений, таких как длина, цвет и простых функций, а также менее популярные единицы(такие, как градусы) и некоторые безразмерные величины.  
Каскады и наследование
CSS имеет две разных, но связанных друг с другом системы для разрешения конфликтов селекторов(это ситуации, в которых у одного элемента несколько различных селекторов) и элементы вложены в другой элемент. Некоторые стили родительских элементов должны быть унаследованы потомками, для других же это не имеет смысла. Это статья описывает обе этих системы и является очень полезной и при этом не перегруженной.
Блочная модель
Блочная модель CSS  является основой веб-верстки — каждый элемент представлен в виде прямоугольного блока, который имеет содержимое,  а также внутренний и внешний отступы и границу, которые "оборачивают" содержимое, как луковицу. Когда браузер отрисовывает страницу, он смотрит, какие стили применены к содержимому каждого блока, на размер "луковой шелухи" вокруг него и на расположение блоков относительно друг друга. Чтобы научиться создавать CSS-слои, вы для начала должны  для начала разобраться в блочной модели.
Отладка CSS
В последней статье этого раздела мы рассмотрим базовые принципы отладки CSS, включая изучение CSS, примененного к странице и других инструментов, которые могут помочь найти ошибки в вашем CSS-коде. 

Оценивание знаний

Следующее оценивание поможет проверить ваше понимание основ CSS, рассмотренных в этом руководстве.

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

Посмотрите также

Intermediate Web Literacy 1: Введение в CSS
Великолепный курс от Mozilla foundation, который поможет проверить и развить множество навыков, о которых упоминалось в модуле Введение в CSS. Научитесь стилизировать HTML элелементы на странице используя CSS селекторы, атрибуты и значения.

Метки документа и участники

 Внесли вклад в эту страницу: ezekeli
 Обновлялась последний раз: ezekeli,