Іноді потрібно встановити одночасно один стиль для всіх елементів веб-сторінки, наприклад, задати шрифт або зображення тексту. В цьому випадку допоможе універсальний селектор, який відповідає будь-якому елементу веб-сторінки.
Для позначення універсального селектора застосовується символ зірочки ( * ) і в загальному випадку синтаксис буде наступний.
* {Опис правил стилю}
В деяких випадках вказувати універсальний селектор не обов'язково. Так, наприклад, записи *. Class і . Class є ідентичними за своїм результатом.
У прикладі 14.1 показано одне з можливих додатків універсального селектора — вибір шрифту і розміру тексту для всіх елементів документа.
Приклад 14.1. Використання універсального селектора
HTML5 CSS 2.1 IE Cr Op Sa Fx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>
Універсальний селектор </title>
<style>
* {Font-family: Arial, Verdana, sans-serif; /* Рубаний шрифт для тексту */ font-size: 96%; /* Розмір тексту */ } </style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </p>
</body>
</html>
Зауважимо, що аналогічний результат можна отримати, якщо в даному прикладі поміняти селектор * на BODY .
Питання для перевірки
1. Який стиль встановить червоний колір тексту в абзаці?
- * HTML P {color: red; }
- HTML * P {color: red; }
- P * {color: red; }
- BODY * P {color: red; }
- BODY P * {color: red; }
2. Що означає такий запис в стилях?
* div * {background: green; }
- Встановити фоновий колір для всіх елементів веб-сторінки.
- Задати колір для всіх текстових елементів документа.
- Встановити фоновий колір для всіх елементів всередині контейнера <div> .
- Встановити фоновий колір тільки для тегів <div > ;, вкладених в інші контейнери.
- Зелений колір фону для всіх тегів <div> в коді.
3. До якого слову застосовується стиль селектора div * em * в наступному фрагменті коду?
<div> <h1> <em> Lorem </em> ipsum </h1> <p> Lorem ipsum dolor sit amet, <strong> consectetuer </strong> adipiscing elit. </p> <ul> <li> <em> Ut </em> wisis enim ad </li> <li> Quis <em> <span> nostrud </span> </em> exerci </li> <li> Tution ullamcorper suscipit </li> </ul> <em> Nisl </em> ut aliquip exea commodo consequat. </div>
- Lorem
- consectetuer
- Ut
- nostrud
- Nisl
Відповіді
1. HTML * P {color: red; }
2. Встановити фоновий колір для всіх елементів всередині контейнера <div> .
3. nostrud