Назначение стилей нескольким элементам одной страницы – создание внедренной таблицы стилей
Допустим, мы хотим, чтобы все абзацы на странице выглядели, как в предыдущем примере, все заголовки первого уровня отображались шрифтом «Arial» зеленого цвета полужирного начертания размером 16 пунктов, а все заголовки второго уровня – шрифтом «Helvetica» размером 14 пунктов полужирного курсивного начертания желто-зеленого цвета. Для этого нам понадобится создать в «голове» страницы (в любом месте между тегами <head >и </head>) внедренную таблицу стилей, в которой мы пропишем несколько правил сразу. Для этого создаем тег-контейнер таблицы стилей, начинающийся открывающим тегом <style type=»text/css»> и заканчивающийся тегом </style>. Внутри этого тега-контейнера мы вольны задать любое количество правил CSS, состоящих из селектора (названия тега HTML, к которому будет применяться правило) и его определения (непосредственно набора средств форматирования), заключенного в фигурные скобки. Синтаксис для приведенного выше примера такой:
| <html> <head> <style type=»text/css»> body { font-family: ‘Times New Roman’, serif; font-size: 12pt; color: darkgreen; } h1 { font-family: Arial, sans-serif; font-size: 16pt; color: green; font-weight: bold; } h2 { font-family: Arial, sans-serif; font-size: 14pt; color: greenyellow; font-weight: bold; font-style: italic; } </style> </head> <body> <h1>Заголовок №1</h1> <h2>Заголовок №2</h2> <p>Обратите внимание – когда мы задавали стиль шрифта, после названия «Times New Roman» мы указали начертание «serif», что обозначает любой шрифт. Если на компьютере пользователя не установлен шрифт «Times New Roman», браузер подставит вместо него любой из имеющихся шрифтов, и отображение страницы будет максимально приближено к тому, что вы задумали.</p> </body> </html> |
Этот способ связывания CSS и HTML называется внедрением. Его рекомендуется применять в тех случаях, когда вы решили задать какой-либо набор правил форматирования только для одной страницы сайта, а все остальные страницы по вашему замыслу должны выглядеть по-другому.
Дальше мы рассмотрим, как привязать все страницы вашего сайта к одному файлу с расширением «css» то есть создадим одну таблицу стилей, к которой можно привязать любое количество страниц вашего сайта.
