наверх






В синтаксисе CSS существует несколько видов селекторов (наборов стилей элемента), а если быть точнее, то их всего три вида.

  • Идентификатор
  • Класс
  • ИмяТэга


Разберем каждый из них, по порядку.

Идентификатор


В HTML присутствует такой атрибут, как идентификатор — id="idName". В CSS задается стиль лишь элементу с этим идентификатором (idName), у которого присвоено свое уникальное значение (idName). Название селектора начинается с хеш символа (# — или еще называют "решеткой").
Со стороны HTML стоит напомнить, что идентификатор - это уникальный атрибут, то есть он выдается лишь один раз одному элементу и не желательно его выдавать нескольким элементам. Так же, у одного HTML элемента может быть лишь один идентификатор.

Пример:

#note {
  color: #000;
}


<div id="note">Всем хорошего дня!</div>


Класс


HTML атрибут class, который позволяет назначить указанному элементу несколько наборов стилей (селекторов). Название селектора начинается с точки. Пример:

.book {
  color: #555;
}


<div class="book">Всем хорошего дня!</div>


ИмяТэга


Указав в качестве селектора название элемента, вы можете задать набор стилей для всех элементов на странице с указанными названием селектора. Отличное решение для задания стилей для всех, например, элементов <input>.

Пример:

input {
  color: #222;
}


<input type="text">


Кстати



- Вы можете к одному элементу использовать все три способа указания наборов элементов.
Например:

div {
  padding: 3px;
}
.store {
  color: #555;
}
#font10 {
  font-size: 10pt;
}


<div class="store" id="font10">Всем хорошего дня!</div>


- Вы можете задать всем элементам единый набор стилей, используя в качестве названия селектора звездочку (*).
Например:

* {
  font-size: 10pt;
}






Поделиться
Border-radius генератор
Занимаетесь веб-разработкой? Кроссбраузерный border-radius генератор с поддержкой выборочных скруглений краев.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.