Что такое 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.

Тег <style> принято размещать внутри <head> документа — это гарантирует, что стили загрузятся раньше, чем браузер начнёт отрисовывать содержимое страницы:

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
    <style>
      p {
        color: red;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <p>Первый абзац</p>
    <p>Второй абзац</p>
  </body>
</html>
html

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

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

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

* {
  font-size: 2rem;
}
css

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

Внешний файл со стилями

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

В панели разработчика выберете вклатку Network (Сеть). На этой вкладке можно отслеживать сетевые запросы, которые отправляет браузер. Сейчас мы не будем углубляться во все подробности данного инструмента, наша цель - своими глазами увидеть как стили для страницы приходят отдельным файлом по сети. Для этого можно выбрать фильтр CSS в панели фильтров и затем перезагрузить страницу, чтобы браузер снова выполнил все шаги для отрисовки страницы. После перезагрузки в списке отправленных запросов вы найдете один или несколько файлов CSS: css-dev-tools

Если вы кликнете по одному из этих файлов - откроетсяы окно с содержимым и в нем вы увидете набор CSS правил для сайта.

Добавление внешнего файла со стилями обычно происходит внутри тега <head>, следующим образом:

<link rel="stylesheet" href="styles.css">
html

У тега есть атрибут rel, указывающий что мы линкуем стили и в атрибуте href указываем путь к файлу со стилями.

Как я уже упоминал, для того чтобы внешний файл загружался корректно, нам необходим сервер, чтобы отвечать на запросы дополнительных ресурсов из браузера. Для этой цели можно использовать встроенный в среды разработки сервер или запускать дев-сервер самостоятельно. Работу с сервером мы рассмотрим чуть позже, а сейчас можно продолжать использовать тег <style>.

В следующих уроках познакомимся с другими типами селекторов — id и class, которые используются гораздо чаще тегового.

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

Комментарии

Войдите, чтобы оставить комментарий