Выбор значений для семейства

Листинг 4.1. Выбор значений для семейства шрифтов

Закрыть окно

{font-family:arial; font-variant:small-caps; font-size:10pt; font-weight:bold; font-style:italic}

Листинг 4.2. Настройка шрифта с использованием отдельных свойств оформления

Закрыть окно

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Пример стилей шрифта</title>

<style type="text/css"> body {font:12pt arial; text-indent:25px; margin:20px} .head {font:bold 14pt; text-align:center; text-indent:0px} .offset {margin-left:25px; margin-right:25px; text-indent:0px} .cap {font:bold 24pt} .fancy {font:13pt comic sans ms} .style1 {font: bold 14pt times new roman} .style2 {font:bold 12pt courier new; color:fuchsia} </style>

</head> <body>

<div class="head">Оформление шрифта</div>

<p><span class="cap">Э</span>та страница показывает различное оформление шрифта, задаваемое с помощью встроенной таблицы стилей. Оформление применяется ко всей странице и к отдельным частям текста на странице.</p>

<div class="offset">

<p>Эти два параграфа смещают относительно окружающих параграфов, помещая их внутри раздела. Раздел имеет левое и правое поле по 25 пикселей, и ни один из параграфов не использует отступ первой строки.</p>

<p class="fancy">Этот параграф оформлен с помощью класса, который содержит тип шрифта и размер. Внутри этого параграфа имеется тег span, который оформляет <span class="style1">эту строку текста</span> иначе по сравнению с остальной частью параграфа. Кроме того, это <span class="style2">слово</span> использует свой собственный специальный стиль оформления.</p>

</div>

</body> </html>

Листинг 4.3. Задание стилей оформления шрифта для страницы

Закрыть окно

<p> <span style="font-size:12pt"> Здесь <span style="font-size:16pt"> показано <span style="font-size:20pt"> вложение <span style="font-size:24pt"> стилей </span> друг </span> в </span> друга. </span> </p>

Листинг 4.4. Вложенные настройки стиля, использующие теги <span>

Закрыть окно

<p><span style="font-size:12pt">Здесь<span style="font-size:16pt">показано<span style="font-size:20pt">вложение<span style="font-size:24pt">стиля </span> друг</span>в </span>друга.</span></p>

Листинг 4.5. Другая запись кода задания вложенных стилей

Закрыть окно

<div style="font-size:12pt"> Here <div style="font-size:16pt"> are <div style="font-size:20pt"> styles <div style="font-size:24pt"> nested </div> inside </div> one </div> another. </div>

Листинг 4.6. Вложенные настройки стилей, использующие теги <div>

Закрыть окно

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" <http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Познавательный профиль</title>

<style type="text/css"> body {line-height:1.5; text-indent:20px; text-align:justify} .head1 {text-align:center; letter-spacing:1.5px; font:bold 16pt} .head2 {text-indent:0px; font:bold 14pt} .uline {text-decoration:underline} .ital {font-style:italic} .offset {margin-left:20px; text-indent:0px; line-height:normal} .line {text-indent:0px} .super {font-size:7pt; vertical-align:text-top} .footnote {line-height:normal; text-indent:20px} </style>

</head> <body>

<div class="head1">Модель познавательного профиля</div>

<p> <span class="uline">Модель познавательного профиля</span> является инструментом самооценки, который должен помочь студентам определить свои познавательные характеристики. Она позволяет оценить, как студент думает, учится и принимает решения.</p>

<p>Модель классифицирует познавательные стили по двум биполярным осям: Сенсорный-Интуитивный и Мыслитель-Чувственно воспринимающий. Квадранты, сформированные двумя этими пересекающимися осями, помечены ST (Сенсорный Мыслитель), SF (Сенсорный Чувственно воспринимающий), NF (Интуитивный Мыслитель), и NF (Интуитивный Чувственно воспринимающий). Самооценки изображаются на этой сетке как точечные значения в каждом из квадрантов. Соединение точек создает некоторый четырехугольник, который показывает сочетание предпочтительных стилей изучения.</p>

<div class="offset"> Вполне возможно, что имеется доминирующий квадрант, или один из квадрантов составляет большую часть четырехугольника. Можно видеть, что студент имеет некоторую область/предпочтения/способности для каждого вида мышления и что можно усилить эти способности, изучая необходимые в каждой из этих областей навыки. <span class="super">1</span> </div>

<p><span class="head2">Оценочный тест</span></p>

<p>Тест состоит из 60 пар слов, из которых студенты выбирают ту, которая им больше нравится или лучше всего их описывает. Примеры пар слов включают:</p>

<div class="offset"> <span style="width:80px; text-align:left"> Практический<br/> Факты<br/> Действие<br/> </span> <span style="width:100px; text-align:center; font-weight:bold"> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> </span> <span style="width:80px; text-align:right"> Эмоциональный<br/> Чувства<br/> Обсуждение<br/> </span> </div>

<p>Значение между 1 (слабое предпочтение) и 4 (сильное предпочтение) присваивается одной из пар слов. Эти значения суммируются по всем позициям и изображаются в квадранте для создания познавательного профиля.</p>

<div><span class="line">_________________</span></div> <div class="footnote"> <span class="super">1</span> Краус, Луис Брюер, <span class="ital">Как учиться, и почему мы этого не делаем</span>, Cincinnati: Thomson Learning, 2000 (p. 19). </div>

</body> </html>

Листинг 4.7. Код создания отчета

Закрыть окно

Практический 4 3 2 1 1 2 3 4 Эмоциональный Факты 4 3 2 1 1 2 3 4 Чувства Действие 4 3 2 1 1 2 3 4 Обсуждение

Листинг 4.8. Использование span внутри div

Закрыть окно

<div class="offset"> <span style="width:80px; text-align:left"> Практический<br/> Факты<br/> Действие<br/> </span> <span style="width:100px; text-align:center; font-weight:bold"> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> 4 3 2 1 1 2 3 4<br/> </span> <span style="width:80px; text-align:right"> Эмоциональный<br/> Чувства<br/> Обсуждение<br/>

</span> </div>

Листинг 4.9. Код вложения span в div

Закрыть окно

Листинг 4.10. Вложение тега <span> в блочный тег

Закрыть окно

Листинг 4.11. Код для создания выступающих параграфов

Закрыть окно

Листинг 4.12. Оформление тега заголовка в таблице стилей

Закрыть окно

Листинг 4.13. Теги оформления заголовков стилями

Закрыть окно

Листинг 4.14. Использование групповых селекторов для оформления группы тегов

Закрыть окно

Листинг 4.15. Использование групповых селекторов для дополнительного оформления групп тегов

Закрыть окно

Листинг 4.16. Использование групповых селекторов для оформления различных тегов

Закрыть окно

<pre> Таблица 1 Продажи по регионам ----------------------------------------------- Регион/ Год 2000 2001 2002 2003 ----------------------------------------------- Восток 35.2 37.4 39.8 40.0 Запад 28.0 25.6 27.4 29.8 Юг 102.3 86.1 98.6 100.2 Север 10.5 8.6 9.8 10.4 ----------------------------------------------- </pre>

Листинг 4.17. Использование тега <pre> для сохранения форматирования редактора

Закрыть окно

<pre style="color:blue"> <b>Таблица 1</b> <b>Продажи по регионам</b> ---------------------------------------------- <b><i>Регион/ Год 2000 2001 2002 2003</i></b> ---------------------------------------------- <b>Восток</b> 35.2 37.4 39.8 40.0 <b>Запад</b> 28.0 25.6 27.4 29.8 <b>Юг</b> 102.3 86.1 98.6 100.2 <b>Север</b> 10.5 8.6 9.8 10.4 ---------------------------------------------- </pre>

Листинг 4.18. Добавление оформления к тексту, форматированному тегом <pre>

Закрыть окно

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtdc>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head> <title>Цветная страница</title>

<style type="text/css"> body {color:white; background-color:silver} .PARAstyle {color:rgb(0,0,0)} .PHRASEstyle {color:#0000FF} .TEXTstyle {color:green; background-color:yellow} </style>

</head> <body>

<p> Эта страница содержит три параграфа. Вся страница оформляется серым цветом фона, а цвет текста будет белым. Первый параграф использует эти значения цветов страницы по умолчанию.</p>

<p> class="PARAstyle"> Второй параграф задает свой собственный цвет текста как черный с помощью значения RGB. В этом параграфе <span class="PHRASEstyle">данная строка текста сделана синей, а фраза <span class="TEXTstyle"><b>зеленый на желтом</b></span> имеет свои собственные настройки стиля цвета.</span></p>

<p>Третий параграф возвращается к используемым по умолчанию настройкам цвета для страницы.</p>

</body> </html>

Листинг 4.19. Код задания на странице свойств цвета текста

Закрыть окно

МЕЖДУ  •  ЭТИМИ  •   СЛОВАМИ • ЗАДАНО • ПО  •  ПЯТЬ  •   ПРОБЕЛОВ.

Листинг 4.20. Использование специальных символов для вывода страницы Web

Закрыть окно

МЕЖДУ · ЭТИМИ · СЛОВАМИ · ЗАДАНО · ПО · ПЯТЬ · ПРОБЕЛОВ.

Листинг 4.21. Вывод браузером фиксированных пробелов и маркеров

Закрыть окно

<p>Это параграф, в котором слово <span class="red">RED</span> выводится красным цветом, помещенное внутри тега <span>, к которому применяется класс стиля.</p>

Листинг 4.22. Вывод в браузере кода XHTML

Закрыть окно

<pre style="font-size:9pt"> <p>Это параграф, в котором слово <span class="red"> RED</span> выводится красным цветом, помещенное внутри тега <span> , который использует класс стиля.</p> </pre>

Листинг 4.23. Код для вывода тегов XHTML в браузере без интерпретации

Закрыть окно

Листинг 4.24. Применение стилей для кодов символов

Закрыть окно

Содержание раздела