Более предпочтительный вариант, чем использование атрибута id, — ссылаться при определении стилей элементов на атрибут class. Это более гибкий атрибут, который можно связать со всеми содержащимися в документе элементами HTML, требующими одинакового дизайна.
Листинг 2.8. Ссылка по значению атрибута class. text1 { font-size: 20px }
Для работы с атрибутом class необходимо объявить правило, название которого начинается с точки. Преимущество данного подхода состоит в том, что добавления атрибута class со значением text1 будет достаточно для назначения нужного стиля всем требующим этого элементам.
Листинг 2.9. Назначение стилей с помощью атрибута class
<!DOCTYPE html>
<html lang="ru">
<head>
<link rel="stylesheet" href="mystyles. css">
</head>
<body>
<p class="text1">Мой текст<^>
<p class="text1">Мой текст</p>
<p>Мой текст</p>
</body>
</html>
У элементов <p> в первых двух строках тела листинга 2.9 есть атрибут class со значением text1. Как уже упоминалось, один и тот же класс можно связать с разными элементами одного документа. Таким образом, первые два элемента <p> относятся к одному классу и, следовательно, оформляются с использованием стиля из листинга 2.8. К последнему элементу <p> применяются стили по умолчанию.
Смысл добавления точки в начале имени класса заключается в том, что одно название класса можно связывать с разными элементами и назначать каждому из них собственный стиль.
Листинг 2.10. Определение ссылки по значению атрибута class только на элементы <p>
P. text1 { font-size: 20px }
В листинге 2.10 мы создали правило, ссылающееся на класс под названием text1, но предназначенное исключительно для элементов <p>. Даже если атрибут class любого другого элемента будет содержать то же значение, к этому элементу данный стиль применяться не будет.
Добавить комментарий