Самоучитель CSS Справочник CSS Единицы измерения Селекторы Цвета CSS

CSS: Селекторы ID и CLASS

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

Селектор id

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

Для использования селектора id, нужно создать идентификатор(id), придумав ему уникальное название, и прописать его в атрибуте id элемента, к которому будет применяться стиль. В описании стиля селектор id начинается с символа # сразу после которого идет название идентификатора.

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      #para1 {
        text-align: center;
        color: red;
      } 
    </style>
  </head>

  <body>
    <p id="para1">Добро пожаловать!</p>
    <p>К этому абзацу не будет применен стиль.</p>
  </body>
</html>
Попробовать »

Примечание: не давайте идентификаторам имена, начинающиеся с цифр, они не будут работать в браузере Mozilla Firefox.

Селектор class

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

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

Правила для имен классов:

Описание стиля для классов ничем не отличается от описания стилей к другим селекторам, после имени класса идет блок объявлений, содержащий все необходимые свойства:

.menu {
  color: #33CCFF;
  font-family: sans-serif;
}

Если вам нужно, чтобы стиль применялся только к определенным тегам на странице, то в селекторе перед именем класса нужно указать элемент, к которому и будет применен стиль:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.center { text-align: center; }
    </style>
  </head>

  <body>
    <h1 class="center">Стиль не будет применен.</h1>
    <p class="center">Абзац будет выровнен по центру.</p> 
  </body>
</html>
Попробовать »

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

    
Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011-2016 © puzzleweb.ru

Реклама на сайте | Обратная связь