Приднестровская поддержка XOOPS
Рассмотрим данный основополагающий механизм на примере следую-
щего HTML-документа:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Пример страницы</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <h1>Первый заголовок</h1> <p>Параграф с интересным содержанием.</p> <h2>Второй заголовок</h2> <p>Параграф с интересным содержанием.</p> <h2>Третий заголовок</h2> <p>Параграф с интересным содержанием.</p> </body> </html>
Он содержит три заголовка (выделенных жирным шрифтом), созданных с помощью тегов <h1> и <h2>. Если разработчик не определил собственные стили, заголовки будут оформлены в соответствии со стандартной таблицей стилей брвузера, т. е. заголовок h1 будет отображаться крупным шрифтом, h2 – мельче, чем h1, но крупнее обычного текста абзаца. Документ, оформленный стилями по умолчанию, будет вполне читаемым, если он достаточно прост. Для изменения внешнего вида этих элементов будет достаточно добавить несколько строчек CSS-кода:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Пример страницы</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> h1, h2 { font-family: sans-serif; color: #3366CC; } </style> </head> <body> <h1>Первый заголовок</h1> <p>Параграф с интересным содержанием.</p> <h2>Второй заголовок</h2> <p>Параграф с интересным содержанием.</p> <h2>Третий заголовок</h2> <p>Параграф с интересным содержанием.</p> </body> </html>
Все преобразования разместились между тегами <style>, расположенными в заголовке страницы (элемент head). Мы определили, что заголовки h1 и h2 должны отображаться шрифтом sans-serif светло-голубого цвета. Особенности синтаксиса мы рассмотрим чуть позднее. Нам ничего не потребуется менять в разметке страницы – изменения в описании стиля, размещенного в верхней части страницы, распространяются на все три имеющихся на странице заголовка и будут также применены ко всем заголовкам, добавленным позднее с помощью тегов <h1> или <h2>.
Теперь, когда вы имеете представление о назначении стилей CSS, настало время рассмотреть способы их использования в HTML-документах.
Отправитель | Нити |
---|
10 пользователь(ей) активно (4 пользователь(ей) просматривают Инструкции)
Участников: 0 Гостей: 10 далее... |