Основы работы с XHTML и CSS

         

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


<style type="text/css"> body {font-family:helvetica, verdana, sans-serif} </style>
Листинг 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
Закрыть окно


<div><span class="line">_________________</span></div>
Листинг 4.10. Вложение тега <span> в блочный тег
Закрыть окно


<style type="text/css"> .head {text-align:center; font-weight:bold; font-size:14pt} .biblio {margin-left:20px; text-indent:-20px} .book {font-style:italic} </style>

<div class="head">Библиография</div>

<div class="biblio">

<p>Duthie, P. A. & MacDonald, M. (2002). <span class="book">ASP.NET in a Nutshell: A Desktop Quick Reference</span>. Sebastopol, CA: O`Reilly & Associates, Inc.</p>

<p>Goodman, Danny (2002). <span class="book"> Dynamic HTML: The Definitive Reference.</span>. Sebastopos, CA: O`Reilly & Associates, Inc.</p>

<p>Griffin, J., Morales, C., & Finnegan, J. (2003). <span class=<book<>Web Design & Development Using XHTML</span>. Wilsonville, Oregon: Franklin, Beedle & Associates.</p>

</div>
Листинг 4.11. Код для создания выступающих параграфов
Закрыть окно


<style type="text/css"> h2 {font-family:arial; font-style:italic} </style>
Листинг 4.12. Оформление тега заголовка в таблице стилей
Закрыть окно


<style type="text/css"> .head1 {font:bold 24pt} .head2 {font:bold 18pt} .head3 {font:bold 13.5pt} .head4 {font:bold 11pt} .head5 {font:bold 10pt} .head6 {font:bold 7.5pt} </style>

<p class="head1">Заголовок уровня 1</p> <p class="head2">Заголовок уровня 2</p> <p class="head3">Заголовок уровня 3</p> <p class="head4">Заголовок уровня 4</p> <p class="head5">Заголовок уровня 5</p> <p class="head6">Заголовок уровня 6</p>
Листинг 4.13. Теги оформления заголовков стилями
Закрыть окно


<style type="text/css"> h1, h2, h3 {font-family:verdana; color:goldenrod} </style>
Листинг 4.14. Использование групповых селекторов для оформления группы тегов
Закрыть окно


<style type="text/css"> h1, h2, h3 {font-family:verdana; color:goldenrod} h1 {text-align:center} h2, h3 {text-align:left} h3 {font-style:italic} </style>
Листинг 4.15. Использование групповых селекторов для дополнительного оформления групп тегов
Закрыть окно


<style type="text/css"> p, span, div {font-family:verdana; font-size:10pt} </style>
Листинг 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. Код задания на странице свойств цвета текста
Закрыть окно


МЕЖДУ&nbsp;&nbsp;&bull;&nbsp;&nbsp;ЭТИМИ&nbsp;&nbsp;&bull;&nbsp;&nbsp; СЛОВАМИ  •  ЗАДАНО  •   ПО&nbsp;&nbsp;&bull;&nbsp;&nbsp;ПЯТЬ&nbsp;&nbsp;&bull;&nbsp;&nbsp; ПРОБЕЛОВ.
Листинг 4.20. Использование специальных символов для вывода страницы Web
Закрыть окно


МЕЖДУ · ЭТИМИ · СЛОВАМИ · ЗАДАНО · ПО · ПЯТЬ · ПРОБЕЛОВ.
Листинг 4.21. Вывод браузером фиксированных пробелов и маркеров
Закрыть окно


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


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


<style type="text/css"> .equation {font-family:courier new; font-size:24pt; font-weight:bold} </style>

<p class="equation">&frac14; + &frac12; = &frac34;</p>
Листинг 4.24. Применение стилей для кодов символов
Закрыть окно

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