Идентификаторы CSS, еще их могут называть селекторы идентификаторов или селекторы по ID, позволяют назначать свойства отдельным компонентам HTML.
В файле CSS идентификаторы обозначаются значком #(решетка), а в документе HTML – атрибутом ID. Идентификаторы имеют собственное обозначение, которое может содержать символы латинского алфавита и цифры. Идентификаторы очень напоминают классы CSS, как по описанию, так и по применению. И также реализованы два метода применения

Идентификаторы CSS с привязкой к элементу

Вот синтаксис в формате CSS

   НАЗВАНИЕ ЭЛЕМЕНТА#имя идентификатора {свойство: значение }

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

P#ident1 { text-align: left }

Пример в HTML документе

<P id=””ident1””> Текст выровнен по левой границе</P>

Идентификаторы CSS без привязки к элементу

Также как и в случае с классами есть возможность использования без указания имени элемента.
Синтаксис в формате CSS

  #имя идентификатора {свойство: значение }

Использование в формате CSS

#ident2 {color: blue }

Этот идентификатор может использовать любой элемент HTML страницы.

<p id=”ident2”>   Текст голубой         </p>
<h3 id=”ident2”> Заголовок голубой </h3>

Как видим, идентификаторы CSSи классы CSS очень похожи. Разницу я вижу лишь в том, что классы могут использоваться в HTML документе для нескольких элементов, а идентификаторы для одного. В остальном же получается дублирование функций.
И еще одно важное дополнение. Правило с классом, важнее, чем правило без класса, а правило и идентификатором, важне, чем правило с классом. Но учитывая, что стандарт CSS развивается, возможно, в дальнейшем эти два селектора будут обладать разными функциями.

Комментарии (25) на “Идентификаторы CSS”

  • Ирина пишет:

    инфорация как раз в тему с нашим курсом.

  • Дмитрий пишет:

    информация вроде полезная,но уж очень тяжелая)

    • Юрий пишет:

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

  • Анастасия пишет:

    Важно это все и интересно, но совершенно непонятно(((

  • Ефим пишет:

    Если честно, то я ничего не понял.

  • Михаил Вайзбург пишет:

    И кто- то же разбирается в этом

  • Елена пишет:

    Как только я начала изучать CSS, сначала само название казалось страшным, ведь я к программированию никакого отношения не имела. Надеюсь, что с Вашей помощью студенты СтартАпа украсят свои сайты, а то , честно,большинство выглядят уныло.

  • Сергей пишет:

    Теперь и я отличаю классы CSS от идентификаторов CSS. Спасибо за просвещение.

  • Юрий пишет:

    Очень рад, заходите еще, в следующем посте дам немного практики.

  • Родион пишет:

    Пока туговато для понимания, но захотелось вникнуть поглубже)

  • Ринат пишет:

    Тоже решил занятся изучением этой темы. Возможно пригодится в дальнейшем. Подписываюсь на блог. Спасибо!

  • Cветлана пишет:

    Достаточно сложная тема, но очень хочется в ней разобраться!

  • Блог о диабете пишет:

    Смотрите, вы пишите P#ident1 { text-align: left } то есть всем параграфам вы задали класс и с помощью его выравняли текст по левому краю. А не легче ли в такой ситуации, просто задать всем параграфам один класс?
    p {text-align: left}

    • Юрий пишет:

      Согласен с Вами, но если Вы хотите разные параграфы прописать по разному, то для этого и существуют классы и идентификаторы. Описываем все варианты в файле стилей, а затем вызываем требуемое описание в своих страницах. Можете на одной странице использовать один стиль, на другой другой и т.д. Можете на одной странице использовать несколько стилей, это уже Ваш выбор.
      PS. Уточняю значком #(решетка) обозначаются идентификаторы, а значком .(точка) – классы.

  • Надежда пишет:

    Это для меня темный лес, но с удовольствием прочитала

  • Сергей пишет:

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

  • Сергей Бочкарев пишет:

    Спасибо за статью. Буду регулярно посещать ваш сайт.

  • Дмитрий пишет:

    Да очень понятно все написано даже проще чем я думал

  • Александр пишет:

    Извините но в самом начале статье вы немного напутали. Селекторы идентификаторов и идентификаторы это разные вещи. Проще было сказать, что идентификаторы как и классы применяются к разным типам селекторов. Про селекторы можете почитать у меня на сайте www. sdcvoy. ru

    • Юрий пишет:

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

      • Александр пишет:

        Согласен, что в разных источниках пишут по-разному. Но согласитесь, что в роли селекторов в основном употребляются теги HTML. У а уже к селекторам присоединяется идентификатор или класс.

  • Александр пишет:

    Текст выровнен по левой границе
    Текст голубой
    Заголовок голубой

    Зачем ставите двойные кавычки? Проще так:
    Текст выровнен по левой границе

Оставить комментарий

Популярные записи
Получать новые статьи
Свежие статьи на сайте Ваш e-mail: