Лабораторная работа: Технологии создания гипертекстовых документов
}
</style>
Экранный стиль отображает черный текст на светло-сером фоне и темно-серое меню навигации.
Рис.3. Отображение текста на экране монитора.
● Стиль <style media="print"> для печатающих устройств:
<style type="text/css" media="print">
* {
font-family: "Times New Roman", Times, serif;
background-color: #fff;
color: #000;
}
#navigation { display: none; }
</style>
Для печати описание страницы другое. CSS-селектор «*» означает, что выбираются все элементы страницы. Для них используется шрифт Times New Roman черного цвета и белый фон, так как не в каждом офисе есть цветные принтеры. С помощью свойства display: none полностью удаляется с печатной версии блок навигации — на бумаге он бесполезен.
В результате получается качественная версия страницы для печати.
Рис.3. Отображение того же текста на бумаге.
3. ОБТЕКАНИЕ РИСУНКА ТЕКСТОМ И ВРЕЗКА К СТАТЬЕ
ТЕХНОЛОГИЯ: CSS
ПОДДЕРЖКА: все распространенные браузеры.
В предыдущем примере свойство CSS float использовалось, чтобы поместить в правой части страницы блок навигации. На самом деле у него иное предназначение — определять обтекание одного элемента другим.
Листинг 3_float – Обтекание рисунка текстом и врезка к статье.
<html>
<head>
<title>ОБТЕКАНИЕ РИСУНКА ТЕКСТОМ И ВРЕЗКА К СТАТЬЕ </title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css" media="screen">
body {
background-color: #e5f8be;
font: 0.8em Verdana, Tahoma, Arial, Helvetica, sans-serif;