• Страница 1 из 1
  • 1
Объединение селекторов CSS класса в один
Kosten
Суббота, 17 Февраля 2018, 18:39 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
Селекторы используются для выбора элементов на странице HTML, на которые влияют правила. Если несколько селекторов имеют одни и те же объявления, они могут быть сгруппированы вместе, чтобы сохранить одно и, то же правило. Каждый селектор должен быть разделен запятой. Они также могут включать широкий выбор. Вы можете дать одни и те же свойства ряду селекторов, не повторяя их.

Группировка в CSS, это метод используемый для уменьшения избыточности кода и записи чистого и сжатого кода. Будет множество случаев когда несколько селекторов CSS будут иметь одинаковые объявления. В этих случаях вы можете группировать все селекторы вместе и писать объявления только один раз. Например, если вы хотите применить точно такой же размер шрифта и цвет к трем различным заголовкам, вы можете записать его, как показано ниже.

Код
h1{

     font-size: 9px;
     color: #564B4B;

}

h2{

   font-size: 9px;
   color: #332929;

}

h3{

   font-size: 9px;
   color: #467896

}

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

Чем больше объявлений у вас одинаково для разных селекторов, тем больше места вы можете сэкономить, сконцентрировав его на группировке. Не забудьте поставить запятую после последнего селектора, поскольку это сделает блок кода бесполезным.

Код
h1, h2, h3 {

  font-size: 10px;
  color: #479646

}

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

Он обозначается символом # и ссылается на уникальный элемент внутри страницы. Селекторы используют атрибут class для выбора элементов. Он обозначается периодом (.), за которым следует имя класса. Все три типа могут быть сгруппированы таким образом

Код
p, #id_value, .class {

     //Declarations

}

Еще один совет, который следует иметь в виду, состоит в том, что вы можете группировать столько селекторов, сколько хотите и любой допустимый класс CSS может быть частью группы.

Вывод:

CSS группировка может использоваться для уплотнения кода, который имеет несколько селекторов с теми же декларациями. Это упрощает чтение и обслуживание кода. Кроме того, время разработки значительно сокращается, поскольку писать меньше кода. Время загрузки страницы также уменьшается при использовании группировки.
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: