Что такое CSS?

CSS — Cascading Style Sheets — Каскадные таблицы стилей.
CSS — это формальный способ описания внешнего вида веб страниц. Если HTML отвечает на вопрос «что отображать?», то CSS отвечает на вопрос «как отображать?». CSS может быть использован как внутри HTML файла, так и быть вынесеным в отдельный файл. Вторая опция имеет ряд преимуществ.

Не хочешь читать скучный текст? Посмотри скучное видео!



Зачем выносить в отдельный файл:

  1. Разделение семантической и презентационной верстки. Это позволяет облегчить HTML код страницы и повысить вероятность сканирования содержимого веб страницы роботом. Количество ресурсов у поисковых роботов растет ежедневно и чаще всего даже HTML файл со встроенными стилями будет скачан. Но задача маркетолога — максимально облегчить работу поисковому роботу. Именно поэтому, разделяя файлы стилей и HTML документ мы облегчаем роботу процесс скачивания страницы и ее анализа.
  2. Экономия кода. Чем больше сайт — тем больше в нем страниц, которые поддаются типизации. На группе страниц одинакового типа может выполняться один и тот же файл CSS, что позволяет экономить код, а не бессмысленно дублировать один и тот же код CSS 100-1000-1000 000 раз.
  3. Удобство редактирования. При необходимости изменения стиля, либо исправления ошибок достаточно изменить всего один файл CSS и изменения вступят в силу на абсолютно всех страницах, на которых этот код выполняется.

Как подключить файл CSS к HTML документу

1. Элемент link (РЕКОМЕНДУЕМЫЙ)
Пример:

See the Pen тег link by Alexander (@Alex_SEOHARD) on CodePen.

Для даного элемента используется внешний файл CSS.
Достаточно использовать элемент link, для которого указать пару атрибутов:
rel=’stylesheet’ и href=’https://goo.gl/7p28zM’.
URL https://goo.gl/7p28zM — это сокращенный URL, по которому находится CDN версия файла CSS от Bootstrap.

В этом файле указаны стили для классов:

  • text-info;
  • text-warning;
  • text-danger;

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

2. Сочетание тега style и @import URL (РЕКОМЕНДУЕМЫЙ)
Пример:

See the Pen style и @import by Alexander (@Alex_SEOHARD) on CodePen.

Здесь используется тег style, внутри которого содержится правило @import. Для этого правила задан URL внешнего файла стилей, который и выполняется на данной странице.

3. Атрибут style (НЕ РЕКОМЕНДУЕМЫЙ).
Пример:

See the Pen атрибут sytle by Alexander (@Alex_SEOHARD) on CodePen.

Здесь для элемента p указан атрибут style, в качестве значения которого и используется код CSS.

4. Тег style (НЕ РЕКОМЕНДУЕМЫЙ).
Пример:

See the Pen тег style by Alexander (@Alex_SEOHARD) on CodePen.

Здесь перед элементом p находится элемент style, внутри которого указан код CSS.

Синтаксис файла CSS

Глобально файл CSS состоит из 2 частей:

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

Пример использования селекторов:

See the Pen селекторы CSS by Alexander (@Alex_SEOHARD) on CodePen.


Для того, чтоб разобраться в данном примере, переключайтесь между вкладками HTML и CSS.
1. Анализ содержимого HTML-файла (вкладка HTML)

Если перейти на вкладку HTML, то видно, что между тегами присутствует иерархия.
Давайте предоставим этот HTML-документ в виде древовидной структуры:

Удобнее всего будет открыть вкладку CSS для анализа файла стилей и смотреть на структуру файла.

2. Анализ селекторов (вкладка CSS)
➤А) Все элементы параграфов имеют высоту шрифта 20px.
Для этого использован селектор элемента p, после которого в фигурных скобках указан стиль.
С помощью названия тега (без треугольных скобок) указывается селектор элемента, который позволяет видоизменить все элементы, соответствующие этому тегу.


➤Б) Первые 2 параграфа выделены золотым цветом, а параграф «Глобально …» — нет.
Почему так?
На структуре файла хорошо видно: 2 первых элемента p имеют идентификаторы p1 и p2, третий — p3.
Смотрим CSS: для того, чтоб выбрать только первые 2 параграфа используются 2 селектора идентификатора: #p1 — для выбора первого параграфа и #p2 — для второго.
Обратите внимание: эти 2 селектора указаны через запятую, которая в данном случае является аналогом логического «или»: стиль будет применен ко всем элементам, которые имеют значение id=’p1′ или id=’p2′.

Таким образом, #p1,#p2 выбирает все элементы, которые имеют идентификатор p1 (#p1) и(,) все элементы с идентификатором p2 (#p2)


➤В) Оба элемента нумерованного списка «1. Внутри…» имеют высоту шрифта 18px и отображаются подчеркнутыми.
Здесь мы столкнемся с иерархическим селектором.

Посмотрите на дерево документа: в файле HTML есть 4 элемента li, поэтому селектор элемента li в данном случае не подходит. Перейдите на вкладку CSS: давайте разберем запись ol > *:

  • ol — селектор элемента ol, который является родительским для целевых li;
  • *селектор всех элементов
  • >селектор непосредственных потомков.

Таким образом, ol > * — селектор, который выбирает все элементы (*), являющиеся непосредственными потомками (>) элемента ol (ol). Таким образом были выбраны 2 первые элемента li в файле примера.


➤Г) Два последних элемента li в документе имеют другой размер шрифта, отступ между буквами а также написаны прописными буквами. Перейдите на вкладку CSS, разбираем запись section#two li:

  • section#two — идентификатор элемента section с идентификатором id=’two’. Обратите внимание, для того чтоб выбрать элементы с необходимым идентификатором, нужно слитно указать селектор элемента и селектор идентификатора. Будут выбраны только элементы необходимого типа, которые имеют указанный идентификатор.
  • li — селектор элементов li
  • ‘ ‘(пробел) — важная часть записи, иерархический селектор для выбора всех элементов справа от знака «пробел» в рамках элементов, указанных слева от знака «пробел».

Таким образом, section#two li находит все элементы li, которые находятся внутри элемента section с идентификатором id=’two’. Обратите внимание, если посмотреть на древовидную структуру HTML файла, то видно, что элементы li — не прямые потомки элемента section; селектор ‘ ‘(пробел) выбирает все элементы внутри указанного, а не только прямых потомков.


➤Д) Самый последний элемент li — имеет другой цвет а также эффект «тень». Данный элемент li имеет класс .lastli, поэтому проще всего выбрать этот элемент с помощью селектора класса .lastli. Этот селектор выбирает все элементы, имеющие указанный класс.

Это примеры популярных простых и иерархических селекторов. Главная цель — показать, что они позволяют выбрать целевой элемент практически всегда, после чего он доступен для манипуляций (как с помощью CSS так и с помощью JS, о котором будет следующая статья).

Хорошая новость: рассматривая селекторы мы с вами увидели и самые популярные свойства,а также их синтаксис (типичный синтаксис CSS показан в глоссарии).
Свойства задаются после селектора и выделяются фигурными скобками. Внутри скобок вводятся пары «свойство:значение», свойство отделяется от значение двоеточием. Пары «свойство:значение» разделяются между собой точкой с запятой.

Полезные и интересные ресурсы CSS:

  1. Список CSS селекторов от W3Schools (eng)
  2. Большой файл с примерами использования селекторов от W3Schools. Кликайте по селекторам в левой части рабочей области и в правой части подсветятся выбранные элементы.
  3. Простой инструмент для сжатия CSS Minifier.org. Преимущество сжатия — скорость загрузки файла, недостаток — нечитабельность. Именно поэтому используется следующий инструмент:
  4. Code Beautifier — позволяет сделать сжатый CSS файл читабельным, что дает удобство при редактировании.
  5. Code Pen — удобная платформа для того, чтобы делиться собственным кодом HTML, CSS и JS.
  6. Bootstrap — самый популярный фронтенд фреймворк для создания сайтов с адаптивным дизайном.