При створенні стилю для сайту, коли одночасно використовується безліч селекторів, можлива поява повторюваних стильових правил. Щоб не повторювати двічі одні і ті ж елементи, їх можна згрупувати для зручності подання та скорочення коду. У прикладі 17.1 показана звичайна запис, тут для кожного селектора наводиться свій набір стильових властивостей.
Приклад 17.1. Стиль для кожного селектора
h1 {font-family: Arial, Helvetica, sans-serif; font-size: 160%; color:#003; } h2 {font-family: Arial, Helvetica, sans-serif; font-size: 135%; color:#333; } h3 {font-family: Arial, Helvetica, sans-serif; font-size: 120%; color:#900;} P {font-family: Times, serif;} З даного прикладу видно, що стиль для тегів заголовків містить однакове значення font -family . Групування якраз і дозволяє встановити одну властивість відразу для декількох селекторів, як показано в прикладі 17.2.
Приклад 17.2. Згруповані селектори
h1, h2, h3 {font-family: Arial, Helvetica, sans-serif; } h1 {font-size: 160%; color:#003;} h2 {font-size: 135%; color:#333;} h3 {font-size: 120%; color:#900;} В даному прикладі font-family єдине для всіх селекторів застосовується відразу до декількох тегам, а індивідуальні властивості вже додаються до кожного селектору окремо.
селектори групуються у вигляді списку тегів, розділених між собою комами. До групи можуть входити не тільки селектори тегів, але також ідентифікатори і класи. Загальний синтаксис наступний.
Селектор 1, Селектор 2, ... Селектор N {Опис правил стилю}
При такому записі правила стилю застосовуються до всіх селекторів, перерахованих в одній групі.
Питання для перевірки
1. Який колір фону буде у елемента з класом button при включенні наведеного стилю?
. Bgzapas, .button, h1 {font-size: 1.2em; padding: 10px; background-color: #fcfaed;}. bgzapas {background-color:#e7f2d7;}. button, h2 {width: 95px; font-size: 11px; color:#f3fced; background-color:#5ca22e;}. bgzapas, .button {background-color:#d9d7f2;} - #fcfaed
- #e7f2d7
- #f3fced
- #5ca22e
- #d9d7f2
Відповіді
5. #D9d7f2