Идентификатор css: Идентификаторы | CSS | WebReference

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

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с 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>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 – особом типе классов, который активируется определенным поведением пользователя.

Все, что вам нужно знать об ID в CSS

HTML-элементы могут быть определены по типу, классу, атрибуту, псевдосостоянию или имени ID. То, как вы их определите, повлияет на то, как вы их настроите с помощью селекторов CSS.

Например, если вы хотите внести значительные изменения на свой сайт, вы можете использовать селектор типа. Допустим, вы хотите стилизовать каждый элемент span на своем сайте. Затем вы должны использовать селектор типа span { свойства стиля } .

Для внесения более подробных изменений вам нужен более конкретный селектор. Наиболее специфичным является селектор ID. Давайте подробнее рассмотрим этот тип селектора ниже.

Селектор CSS ID

Селектор CSS ID использует атрибут ID элемента HTML для выбора одного уникального элемента на странице. Чтобы использовать селектор идентификатора в CSS, вы просто пишете хэштег (#), за которым следует идентификатор элемента. Затем поместите свойства стиля, которые вы хотите применить к элементу, в скобки.

Вот синтаксис селектора ID в CSS:

 
 #idname { свойства стиля } 
 

Есть несколько правил, которым вы должны следовать, чтобы правильно использовать селектор ID CSS. Прежде чем мы рассмотрим приведенные ниже правила, позвольте мне сделать важное замечание о приведенных ниже примерах.

Я также буду использовать BootstrapCDN для загрузки таблицы стилей Bootstrap по умолчанию, чтобы примеры были оформлены соответствующим образом. Однако HTML и CSS из примеров будут работать и на сайтах HTML5. Поэтому, если вы создаете свой сайт с нуля, а не используете CSS-фреймворк Bootstrap, вы все равно можете использовать HTML и CSS в качестве шаблонов.

Как использовать ID в CSS

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

Допустим, на моем сайте есть несколько h3, и каждый отмечает начало новой главы. Затем я мог бы дать каждому h3 имя ID.

Правильный HTML-код:

 
 
Глава 1
 
 
Глава 2
 
 
Глава 3
 
 
Глава 4
 
 

 
 
Глава 1
 
 
Глава 2
 
 
Глава 3
 
 
Глава 4
 
 

Второе правило, о котором следует помнить, заключается в том, что если элементу присвоено имя ID, оно должно быть уникальным на странице. Таким образом, селектор ID выбирает только один уникальный элемент.

Возвращаясь к примеру с несколькими h3, скажем, я хочу, чтобы каждый из этих h3 имел разный стиль, чтобы визуально подсказывать читателю, когда начинается новая глава. В этом случае я бы дал каждому h3 уникальное имя идентификатора, чтобы я мог использовать селекторы идентификаторов для применения к каждому уникальному набору значений свойств.

Правильный HTML-код:

 
 
Глава 1
 
 
Глава 2
 
 
Глава 3
 
 
Глава 4
 
 

 
 
Глава 1
 
 
Глава 2
 
 
Глава 3
 
 
Глава 4
 
 

Следующий CSS изменит размер шрифта каждого h3 :

 
#C1 { 
   размер шрифта: 18 пикселей; 
 } 
 #C2 { 
   Размер шрифта: 20 пикселей; 
 } 
 #C3 { 
   размер шрифта: 22 пикселя; 
 } 
 #C4 { 
   размер шрифта: 24 пикселя; 
 } 
 

Вот результат:

См. Pen mdWVXKM Кристины Перриконе (@hubspot) на CodePen.

Последнее правило, о котором следует помнить при использовании селекторов идентификаторов, заключается в том, что значение свойства селектора идентификаторов должно точно совпадать с именем идентификатора.

Используя HTML из приведенного выше примера, следующий CSS будет правильным.

 
 #C1 { 
   Размер шрифта: 18 пикселей; 
 } 
 #C2 { 
   Размер шрифта: 20 пикселей; 
 } 
 #C3 { 
   размер шрифта: 22 пикселя; 
 } 
 #C4 { 
   размер шрифта: 24 пикселя; 
 } 
 

Это было бы неправильно:

 
 #c1 { 
   размер шрифта: 18px; 
 } 
 #c2 { 
   Размер шрифта: 20 пикселей; 
 } 
 #c3 { 
   Размер шрифта: 22 пикселя; 
 } 
 #c4 { 
   размер шрифта: 24 пикселя; 
 } 
 

Если бы я использовал этот CSS со строчной буквой «с», селекторы идентификатора CSS и соответствующие правила CSS не применялись бы. Вместо этого будет отображаться стиль h3 по умолчанию в Bootstrap, как показано ниже.

See the Pen Как НЕ использовать CSS ID [Пример] Кристины Перриконе (@hubspot) на CodePen.

Мы рассмотрели правила использования селектора ID в CSS. Теперь давайте применим их с помощью селектора ID для стилизации изображений.

Идентификатор изображения CSS

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

Допустим, вы хотите оформить определенное изображение на своей странице. Возможно, вы хотите, чтобы оно имело другую форму и уровень прозрачности, чем другие изображения на этой странице. В этом случае вы можете использовать селектор ID.

Для начала вы должны добавить к изображению атрибут ID. Этот атрибут ID может появиться где угодно внутри элемента изображения: перед атрибутом img src, после атрибута src, но перед атрибутом alt, после обоих атрибутов img src и alt.

В приведенном ниже примере я помещу атрибут ID «round» перед атрибутами src и alt во втором элементе изображения. Затем я воспользуюсь селектором ID, чтобы сделать это изображение круглым и непрозрачным на 70%.

Вот HTML: 

Вот CSS:

 
 #round { 
   border-radius: 50%; 
   непрозрачность: 0,7; 
 } 
 

Вот результат:

См. идентификатор изображения Pen CSS от Christina Perricone (@hubspot) на CodePen.

Теперь, когда мы поняли, что такое селектор ID и как его использовать в CSS, давайте убедимся, что понимаем разницу между классом и ID в CSS.

Класс CSS и идентификатор

В CSS класс используется для группировки нескольких элементов, тогда как идентификатор используется для идентификации одного элемента. Поэтому селектор класса используется для стилизации нескольких HTML-элементов одного и того же класса, а селектор ID используется для стилизации одного HTML-элемента. Вы можете распознать селектор класса по содержащейся в нем точке («.»), а селектор идентификатора — по решетке («#») 9.0003

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

При сравнении селекторов классов и селекторов ID селекторы ID имеют более высокую специфичность и, следовательно, более мощные. (На самом деле, селекторы идентификаторов настолько мощны, что только свойство !important может переопределить их в CSS. ) Это означает, что если элемент выбран селектором идентификатора и селектором класса, стиль CSS селектора идентификатора будет применен к элементу, а не стилю селектора класса.

Давайте рассмотрим пример, демонстрирующий это правило ниже.

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

 
 Копировать кнопку  
 

На моем сайте я хочу, чтобы элементы кнопок были синего цвета Calypso. В этом случае я бы использовал селектор класса, чтобы определить все элементы в классе кнопки, чтобы они имели синий цвет фона (шестнадцатеричный код цвета #00A4BD) и белый цвет шрифта (#FFFFFF).

Вот HTML:

 
 Подписаться 
 Подписаться 
 

Вот CSS:

 
 . btn { 
    цвет фона: #00A4BD; 
    цвет: #FFFFFF; 
 } 
 

Вот результат:

См. Pen qBrbxwa Кристины Перриконе (@hubspot) на CodePen.

Но, скажем, я хочу, чтобы кнопка подписки на моей домашней странице была еще привлекательнее. Затем я мог бы использовать селектор идентификаторов, чтобы определить одну кнопку с идентификатором «домашняя страница» и настроить ее так, чтобы она имела цвет фона цвета фуксии и черный цвет шрифта (#000000). Все кнопки без идентификатора «домашняя страница» по-прежнему будут следовать правилу CSS селектора класса (синий цвет фона и белый цвет шрифта).

Вот HTML:

 
 Подписаться 
 Подписаться 
 

Вот CSS:

 
 #homepage { 90 019    фоновый цвет: #FF00FF; 
    цвет: #000000; 
 } 
 . btn { 
    цвет фона: #00A4BD; 
    цвет: #FFFFFF; 
 } 
 

Вот результат:

См. Pen CSS Class vs ID [Example] Кристины Перриконе (@hubspot) на CodePen.

Внесение подробных изменений с помощью селектора идентификаторов CSS

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

Примечание редактора: этот пост был первоначально опубликован в мае 2020 года и обновлен для полноты.

CSS ID и селекторы классов

❮ Пред. Следующий ❯

В предыдущей главе мы узнали о селекторах. Теперь мы поговорим о селекторах id и class, часто используемых для стилизации элементов веб-страницы.

Селектор ID — это уникальный идентификатор элемента HTML, к которому должен быть применен определенный стиль. Он используется только тогда, когда один элемент HTML на веб-странице должен иметь определенный стиль.

Как во внутренних, так и во внешних таблицах стилей мы используем решетку (#) для селектора идентификатора.

Пример селектора ID:

 

  <голова>
    
    <стиль>
      #синий {
        цвет: #1c87c9;
      }
    
  
  <тело>
    
Первый абзац.
    
Второй абзац.
    
Третий абзац.
  
 

Попробуй сам »

Проверьте этот код в нашем онлайн-редакторе HTML, чтобы увидеть, что цвет второго абзаца — #1c87c9.

Селектор класса используется, когда один и тот же стиль должен применяться к нескольким элементам HTML на одной и той же веб-странице.

Как во внутренних, так и во внешних таблицах стилей мы используем точку (.) для выбора класса.

Пример селектора класса:

 

  <голова>
    
    <стиль>
      .синий {
        цвет: #1c87c9;
      }
    
  
  <тело>
     
Это заголовок.
 
    
Второй абзац.
    
Третий абзац.
  
 

Попробуй сам »

В нашем примере селектор класса используется дважды, в заголовке и абзаце.

Как видите, мы назначили синий в качестве селектора класса (class=»blue») и объявили его стиль с помощью свойства цвета — .blue {color: #1c87c9;} в разделе. Это означает, что элементы, имеющие селектор класса синего цвета , будут отображаться в #1c87c9.