Что такое CSS. Понятие селектора.

Free Preview
Продолжительность: 15 мин

В предыдущем модуле мы использовали атрибут style для стилизации HTML-элементов. Это удобный и наглядный способ познакомиться с CSS и быстро увидеть результат.

Однако по мере усложнения страницы становится понятно, что inline-стили — не лучший инструмент для реальной разработки. В этом уроке мы разберём, почему так происходит, и познакомимся с более правильным и масштабируемым подходом — CSS-селекторами.

Inline-стили и их ограничения

Стили, заданные напрямую в HTML-теге называются inline-стилями:

<div style="color: red; font-size: 20px;">Текст</div>
html

На первый взгляд это выглядит просто и понятно. Но у такого подхода есть серьёзные недостатки:

  1. Во-первых стили смешиваются с разметкой, а это существенно снижает читаемость кода
  2. Стили невозможно переиспользовать. Очевидно, что в процессе создания приложений часто возникает необходимость применить один и тот же визуальный эффект к разным блокам приложения. В случае с inline-стилями придется писать один и тот же каод для каждого элемента.
  3. Сложно поддерживать и изменять код, по той же причине что и в предыдущем пункте. Стили получаются "размазанными" по всему приложению и в случае если возникает необходимость изменить что-то (например поменять размер или цвет шрифта), то это нужно будет делать много-много раз.

На самом деле список можно продолжать бесконечно, но этих трех пунктов уже достаточно, чтобы не использовать inline-стили (или использовать их редко, в исключительных случаях)

Идея CSS: отделить стиль от структуры

Если вы поищете, например, в Википедии "что такое CSS?", то найдете вот такой ответ:

CSS (англ. Cascading Style Sheets «каскадные таблицы стилей») - формальный язык декорирования и описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки (чаще всего HTML или XHTML).

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

Первый шаг — теговые селекторы

Для разделения стилей и HTML существет специальный тег <style>. Внутри него мы можем опредлять стили для разных элементов страницы. Остается только определить к каким элементам страницы нужно применить те или иные стили. Для такого "связывания" стилей и HTML-элементов сущесвуют селекторы. Селекторы - это указатели того, к какому элементу применить тот или иной стиль.

Самый простой селектор - селектор по имени тега. Т.е. Мы можем внутри тега <style> указать имя тега к которому мы хотим применить каки-либо визуальные эффекты и сами стили в виде пар ключ-значение, подобно тому как мы делали это внутри атрибута style:

<p>Первый абзац</p>
<p>Второй абзац</p>
<style>
  p {
    color: red;
    font-size: 20px;
  }
</style>
html

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

Универсальный селектор *

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

* {
  font-size: 2rem;
}
css

В следующих уроках пойдет речь о других типах селекторов и их особенностях.

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