Создание идентификаторов в CSS

Development | Amber | Комментировать запись

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

Создание идентификаторов в CSS

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

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

 Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Создание CSS-идентификатора

Создавая правило для идентификатора, вы должны поставить в начало символ диеза (#).

#my-first-id {
color: blue;
}

Это правило CSS создаст идентификатор my-first-id и объявит, что любой текстовый HTML-элемент, которому присвоен этот идентификатор, будет синего цвета.

Теперь давайте посмотрим на практике, как работают идентификаторы. Для начала убедитесь, что вы настроили все необходимые файлы и папки, как описано в одном из первых руководств этой серии (Подготовка проекта CSS и HTML с помощью Visual Studio Code).

Сотрите в файле styles.css все, что есть на данный момент, добавьте в него приведенное выше CSS правило # my-first-id и сохраните файл.

Затем вернитесь в свой файл index.html и сотрите все (кроме первой строки кода: <link rel=”stylesheet” href=”css/styles.css”>). Затем добавьте следующий фрагмент кода:

<p id="my-first-id">This text is styled using a CSS ID.</p>

Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

Вы должны получить что-то вроде этого:

This text is styled using a CSS ID.

В этом мануале вы создали идентификатор my-first-id в файле styles.css, а затем применили его к текстовому элементу из файла index.html с помощью атрибута ID. Обратите внимание, вы можете создавать и применять идентификаторы для любого типа HTML-контента (изображений, элементов <div> и т.п.).

Заключение

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