Идентификаторы 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”

  • Ирина says:

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

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

    • Юрий says:

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

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

  • Ефим says:

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

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

  • Елена says:

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

  • Сергей says:

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

  • Юрий says:

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

  • Родион says:

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

  • Ринат says:

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

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

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

    • Юрий says:

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

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

  • Сергей says:

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

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

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

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

    • Юрий says:

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

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

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

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

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

Популярные записи