Создание HTML страницы с применением CSS


Лабораторная работа № 1
Создание HTML страницы с применением CSSЦель:
знакомство с языками HTML и CSS, а также получение практических навыков применения каскадных таблиц стилей для формирования отображения страниц HTML.
Порядок выполнения:
Ознакомиться с использованием каскадных таблиц CSS и их применением в HTML.
Выполнить задание согласно варианта.
ОСНОВНЫЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, который написан с использованием языка разметки HTML. Подготовкой и выпуском спецификации занимается консорциум W3C (см. сайт http://www.w3.org/Style/CSS/).
Исторически CSS появился вместе с HTML версии 4.01 для упрощения манипулирования разметкой, поскольку именно применение стилей позволяет осуществлять групповую замену шрифта, цвета, размера и взаимного расположения элементов, разделив разметку и внешний вид как таковой.
CSS используется применительно к языкам разметки HTML и XHTML, но может также применяться к любым XML-документам, например, к SVG или XUL.
Селекторы
Ключевое понятие в CSS — селектор — представляет собой правило для использования стиля. Браузер для каждого элемента пытается применить стиль в соответствии с заданным правилом. Стиль содержит набор свойств.
Различают простые селекторы, которые будут использованы для указанного элемента, в приведенном ниже примере — к любому заголовку h1, h2, h3:
h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
Селекторы групп:
h1, h2, h3 { font-family: sans-serif }
Этот фрагмент эквивалентен предыдущему фрагменту, состоящему из трех простых фрагментов.
Селекторы класса:
*.pastoral { color: green } /* все элементы, имеющие class=pastoral */
или
.pastoral { color: green } /* все элементы, имеющие class=pastoral */
а также
H1.pastoral { color: green } /* только элементы H1, имеющиеclass=pastoral */
Селекторы идентификатора ID:
h1#chapter1 { font-family: sans-serif } /* для <h1
id=”chapter1”>…</h1> */
#chapter1 { font-family: sans-serif } /* для любого элемента с
id=”chapter1” */
Селекторы атрибутов:
h1[class] { font-family: sans-serif } /* элемент имеет class */
h1[class=”fancy”] { font-family: sans-serif } /* элемент имеет class=”fancy” */
*[title] { font-family: sans-serif } /* любой элемент, имеющий заголовок */
Селектор потомков (устанавливает иерархию применения):
tr h1 { font-family: sans-serif } /* <tr><td><h1>…</h1></td></tr>*/
Псевдоклассы (особый вид динамических атрибутов, которые изменяются в зависимости от определенных действий):
a:link /* ссылки, которые не были посещены */
a:visited /* посещенные ссылки */
a:hover /* выделенная в данный момент ссылка */
a:active /* активные ссылки */
Шрифты
При оформлении страницы доступны следующие семейства (family) шрифтов:
• Serif — шрифт с засечками. Обычно используется при бумажной печати. Наиболее используемый шрифт — Times;
• Sans-serif — шрифт без засечек. Подходит для заголовков. Наиболее часто применяемые шрифты этого семейства — Arial, Helvetica, Verdana;
• Monospace — шрифт, который обеспечивает равную ширину символов. Служит для вывода примеров кода, поскольку внешний вид этого текста будет соответствовать текстовой консоли. Наиболее распространен шрифт Courier;
• Fantasy, Cursive — декоративные и курсивные шрифты. Не рекомендуются к применению, поскольку шрифты этой группы необязательно присутствуют в компьютере, на котором будут просматривать html-страницу.
Выбор шрифта осуществляется свойством font-family. Пример использования семейств стилей:
<p style="font-family: serif">Serif: Образец текста</p>
<p style="font-family: sans-serif">Sans-serif: Образец текста</p>
<p style="font-family: cursive">Cursive: Образец текста</p>
<p style="font-family: fantasy">Fantasy: Образец текста</p>
<p style="font-family: monospace">Monospace: Образец текста</p>
Результаты отображения в разных браузерах представлены на рисунках 1 и 2.

Рисунок 1 – Пример отображения Рисунок 2 – Пример отображения
шрифта в Mozilla Firefox шрифта в Internet Explorer
Обратите внимание на то, что семейство Fantasy не совпадает по отображению. Кроме того, различен размер шрифта при отображении по умолчанию, который зависит от системных настроек браузера. Для каждого семейства шрифтов различные браузеры в различных операционных системах могут иметь разные конкретные шрифты, соответствующие этим семействам.
Свойство font-family может содержать перечисление шрифтов:
p{font-family:"Times New Roman", Times, serif;}
В этом случае браузер последовательно будет пытаться найти соответствующий шрифт в системе. Если конкретный шрифт не будет найден (в примере "Times New Roman", Times), то будет применен шрифт, назначенный для serif-семейства по умолчанию.
Можно указать начертание шрифта с использованием свойства font-style. Допустимые значения этого свойства:
font-style: normal | italic | oblique | inherit
где normal — обычное начертание; italic — курсив (имитация рукописного шрифта); oblique — наклонный шрифт (образован наклоном обычного).
Размер шрифта задается с помощью свойства font-size. Его возможные значения:
• larger и smaller — константы, определяющие относительный размер;
• xx-small, x-small, small, medium, large, x-large, xx-large — константы, определяющие абсолютный размер;
• ЧИСЛО % — число, определяющее размер в процентах от шрифта родительского элемента;
• ЧИСЛО px — число, определяющее размер в пикселах. Кроме того, размер шрифта указывается в специальных единицах: em (высота элемента, равная размеру текущего шрифта), ex (высота символа х), пункты (pt).
Толщина шрифта регулируется с помощью свойства fontweight:
font-weight: normal | bold | bolder | lighter | 100, 200 .. 900
Здесь normal — обычная толщина; bold — жирный шрифт; bolder — предельно жирный шрифт; lighter — тонкий шрифт; 100 — тонкий шрифт; 400 — соответствует нормальному; 700 — жирному.
Пример страницы с шрифтом разной толщины:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
#p1 {font-size: 100%}
#p2 {font-size: smaller}
#p3 {font-size: larger}
#p4 {font-size: 12px}
#p5 {font-size: 12pt}
#p6 {font-size: 0.5em}
#p7 {font-size: 12x}
</style>
</head>
<body>
<p id="p1">Образец текста</p>
<p id="p2">Образец текста</p>
<p id="p3">Образец текста</p>
<p id="p4">Образец текста</p>
<p id="p5">Образец текста</p>
<p id="p6">Образец текста</p>
<p id="p7">Образец текста</p>
</body>
</html>
Цвет
Свойство color задает цвет шрифта. Можно указать цвет по его названию на английском языке (red, green, lime) или задать точное значение цвета в системах RGB, HSL, а также в RGBA, HSLA, для которых добавлен канал прозрачности. Полный перечень допустимых значений свойства color приведен в спецификации (см. http://www.w3.org/TR/css3-color/).
Пример:
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Выбор цветовой схемы является очень важным этапом создания дизайна сайта. Существуют определенные методики подбора совместимых цветов. Имеются бесплатные средства в Интернете (например, см. http://colorscheme.ru/).
Фон
Фон элементов может быть задан однородным цветом, одиночным или мозаично расположенным изображением (возможности применения фона более подробно изложены на сайте (http://www.w3schools.com/css/css_background.asp).Используются следующие свойства фона:
• background-color — однородный цвет константой или кодом в одной из допустимых систем цветности. Пример:
div {background-color:#b0c4de;}
• background-image — фоновое изображение. Пример:
body {background-image:url('paper.gif');}
• background-repeat — флаг мозаичного размножения изображения. Пример:
body {
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
• background-attachment — указание на то, будет ли изображение смещаться при скроллировании или будет оставаться на месте.
Пример:
background-attachment:fixed;
• background-position — свойство, определяющее позицию размещения изображения на устройстве отображения. Пример:
body{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Преобразование текста
В соответствии со спецификацией (см. http://www.w3.org/TR/css3-text/) текст может быть подвергнут преобразованиям при отображении, например, таким как:
• изменение регистра букв (capitalize | uppercase | lowercase);
• изменение пробелов (collapse | preserve | preserve-breaks);
• ограничение длины строки;
• формирование переносов слов;
• форматирование текста;
• выравнивание и разреживание;
• отступы;
• декорирование.
Некоторые примеры средств преобразования текста:
footer { text-wrap: avoid; /* inherits to all descendants */ }

<footer>
<venue>27th Internationalization and Unicode Conference</venue>
&#8226; <date>April 7, 2005</date> &#8226;
<place>Berlin, Germany</place>
</footer>
В узком окне текст из приведенного выше примера будет отображен так:
27th Internationalization and Unicode Conference •
April 7, 2005 • Berlin, Germany
Если окно станет еще yже, то текст будет выглядеть следующим образом:
27th Internationalization and Unicode
Conference • April 7, 2005 •
Berlin, Germany
Но ни при каких условиях текст не будет отображен в виде
27th Internationalization and Unicode Conference • April
7, 2005 • Berlin, Germany
Блочная модель
Блочная модель лежит в основе модели визуализации элементов и описывает прямоугольники, формирующиеся вокруг всех элементов в соответствии с их иерархией в дереве элементов документа. (Для более подробного изучения блочной модели следует обратиться на сайт http://www.w3.org/TR/CSS2/box.html.)
Отступы и границы
В соответствии с блочной моделью для любого элемента имеются область самого элемента (content), внутренние поля (padding), рамка или граница (border), внешние границы (margin). Для каждой области может быть задан размер. Наличие внутреннего поля позволяет сформировать рамку на заданном расстоянии от содержимого элемента; наличие внешнего поля — установить отступ между рядом расположенными элементами. На рисунке 3 представлена схема расположения этих составных частей — элементов блочной модели. Обратите внимание на то, что рамка может иметь толщину, задаваемую соответствующим свойством CSS, и также участвует в расчете внешнего размера элемента.

Рисунок 3 – Блочная модель CSS
В CSS любой элемент имеет свойства width и height, которые устанавливают размер «содержимого» элемента в процентах, пикселах. Кроме того, значения этих свойств могут быть вычислены.
Размер отступа задается свойствами 'padding-top', 'paddingright', 'padding-bottom', 'padding-left' или единственным свойством padding, которому указывается один общий размер отступа или последовательно отступ сверху, справа, снизу, слева.
Пример:
div { padding: 10px }
blockquote { padding-top: 0.3em }
h1 {
background: white;
padding: 1em 2em;
}
Граница представляет собой видимое обрамление элемента с указанным начертанием, цветом и толщиной. Граница может быть задана единственным свойством border или отдельно для каждой стороны блока: 'border-top', 'border-right', 'border-bottom', 'border-left'. Типы границ представлены в таблице 1. Указываются толщина, тип начертания границы и цвет.
Пример:
h1 { border: thick solid red }
#content { border-style: solid dotted } /* horiz: 'solid'
vertical: 'dotted'*/
h1 { border-width: thin } /* thin thin thin thin */
h1 { border-width: thin thick } /* thin thick thin thick */
h1 { border-width: thin thick medium } /* thin thick medium thick */
h1 { border-bottom: 10px; border-color: red; }
При расчете размеров блока необходимо помнить про толщину границы.
Таблица 1 - Типы границ

Внешнее прозрачное поле может быть задано либо единственным свойством 'margin' с указанием одинакового размера границы для всех сторон, либо перечислением размеров по каждой из сторон, либо с использованием свойств 'margin-top', 'margin-right', 'margin-bottom', 'margin-left' для каждой из сторон в отдельности.
Пример:
body { margin: 2em } /* all margins set to 2em */
body { margin: 1em 2em } /* top & bottom = 1em, right & left =
2em */
body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em,
left=2em */
body {
margin-top: 1em;
margin-right: 2em;
}
Позиционирование
CSS поддерживает 4 вида позиционирования:
• статическое (static);
• абсолютное (absolute);
• относительное (relative);
• фиксированное (fixed).
В литературе используются следующие термины, относящиеся к разделу позиционирования:
• нормальный поток — обычное поведение браузера при отображении данных;
• окно просмотра браузера — окно браузера, в котором отображается содержимое документа.
Элементы-контейнеры могут быть размечены с помощью позиционирования. В качестве элементов-контейнеров может быть любой элемент, однако обычно применяется специальный элемент div. Все элементы, включенные в элемент-контейнер, будут размещены в его границах.
Статическое позиционирование устанавливается для всех элементов по умолчанию и означает нормальное следование элементов. В явном виде спецификатор static применяется для перекрытия унаследованных стилей.
Абсолютное позиционирование
Абсолютное позиционирование подразумевает указание расположения элемента относительно его блока-контейнера или корневого элемента html. При этом как только появляется абсолютное позиционирование, элемент выпадает из нормального потока и всегда будет позиционироваться относительно контейнера, независимо от остального содержимого страницы.
Приведем простейший пример позиционирования. В данном случае позиция будет совпадать с левым верхним отступом от окна отображения:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style type="text/css">
#content {
position: absolute;
left: 200px;
top: 100px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="content">
<p>Некоторый текст для проверки размещения элемента. </p></div>
</body>
</html>
Рассмотрим другой пример, включающий абсолютное позиционирование носительно другого блока:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<style type="text/css">
#main {
position: absolute;
left: 100px;
top: 50px;
border: 1px solid black;
padding: 0 100px 100px 0
}
#content {
position: absolute;
left: 50px;
top: 20px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="main">Главное меню:
<div id="content">
<p>Некоторый текст для проверки
размещения элемента.</p></div>
</div>
</body>
</html>
В данном случае элемент с идентификатором content смещен относительно элемента с идентификатором main. Обратите внимание на то, что его смещение не зависит от текста, который непосредственно помещен в <div id="main">, а зависит только от заданной позиции в стиле.
Относительное позиционирование
Смещение элемента в относительном позиционировании вычисляется не относительно соседних элементов, а относительно нормального потока.
В следующем примере блок с идентификатором content смещен относительно нормального потока, но элемент, расположенный за ним, будет отображен так, как будто никаких изменений в потоке не было (обратите внимание на то, что этот блок будет менять положение при изменении размеров окна браузера):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=
utf-8" />
<style type="text/css">
#content {
position: relative;
left: 50px;
top: 20px;
border: 1px solid green;
}
</style>
</head>
<body>
<p>Проект Mozilla официально выпустил релиз web-браузера
Firefox 15. Кроме того, выпущен корректирующий релиз ветки
с длительным сроком поддержки — Firefox 10.0.7, в котором
отмечается только исправление уязвимостей и серьезных оши-
бок.</p>
<div id="content"><p>В ближайшие дни на стадию бета-тестированияперейдет ветка Firefox 16 и будет отделена aurora-ветка Firefox
17.</p></div>
<p>В соответствии с шестинедельным циклом разработки, релиз
Firefox 16 намечен на 9 октября, а Firefox 17 на 20 ноября.</p>
</body> </html>
Чтобы понять различие во влиянии на нормальный поток абсолютного и относительного позиционирования, необходимо заменить в этом примере position на absolute.
Часто применяется комбинирование абсолютного и относительного позиционирования. Приведем пример, иллюстрирующий относительное позиционирование внутри блока с абсолютным позиционированием (обратите внимание на то, каким образом браузер отображает внешний блок при изменении размера окна):
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#main {
position: absolute;
left: 100px;
top: 50px;
border: 1px solid black;
padding: 0 100px 100px 0
}
#content {
position: relative;
left: 20px;
top: 10px;
border: 1px solid green;
}
</style>
</head>
<body>
<div id="main">Главное меню:
<div id="content">
<p>Некоторый текст для проверки размещения элемента.</p>
</div>
</div>
</body> </html>
Фиксированное позиционирование
В отличие от абсолютного позиционирования фиксированное позиционирование позволяет закрепить элемент относительно окна просмотра, а не элемента-контейнера. Это дает возможность разместить элементы, которые не будут подвергаться прокрутке, например постоянно отображаемый блок меню.
Плавающие элементы
Плавающее размещение не является схемой позиционирования. Оно было введено как средство, позволяющее получить обтекание элементов, но не для создания макета страницы.
Например, следующие свойства стиля обеспечат отображение элементов-изображений img в правой части страницы, а все остальные элементы будут размещены в свободном пространстве слева:
img {
float: right;
padding: 15px;
}
Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.
Управление отображением элемента
Для управления отображением элемента используется свойство display. Некоторые значения свойства display приведены в таблице 2.
Таблица 2 – Некоторые значения свойства display

Режимы отображения применяют в том числе для отображения блоков как таблиц:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>table using divs</title>
<style type="text/css">
.div-table{display:table; border:1px solid #003399;}
.div-table-caption{display:table-caption; background:#009999;}
.div-table-row{display:table-row;}
.div-table-col{display:table-cell; padding: 5px; border: 1px
solid #003399;}
</style>
</head>
<body>
<div class="div-table">
<div class="div-table-caption">This is a caption</div>
<div class="div-table-row">
<div class="div-table-col">1st Column</div>
<div class="div-table-col">2nd Column</div>
</div>
</div>
<a href="http://linuxandfriends.com/2009/04/04/how-to-style-divelements-
as-tables/">See source...</a>
</body>
</html>
Кроме того, формирование табличного представления блоков возможно средствами позиционирования без использования специальных значений свойства display.
С помощью CSS можно размещать элементы в любом порядке, в том числе соответствующем табличному представлению, но без использования таблиц.
Существуют генераторы HTML/CSS-шаблонов (например, см. сайт http://csstemplater.com/). Однако отметим, что аналогичную работу можно проделать самостоятельно или с помощью собственных шаблонов.
Отладка CSS в браузере FirefoxВсе современные браузеры предоставляют средства для просмотра разметки HTML, CSS и визуальной отладки таблиц стилей.
Рассмотрим более подробно отладчик Firebug (реализован как дополнение) для Mozilla Firefox. Если Firebug установлен, то для того, чтобы открыть отладчик на требуемой странице, необходимо нажать клавишу F12.
В нижней части окна браузера появятся дополнительные окна (рисунок 4). В Firebug доступны следующие закладки:
• Console — сообщения браузера об ошибках, предупреждения и отладочный вывод Javascript-программ;
• HTML — структура разметки страницы. Позволяет найти по отображенному элементу его соответствие в разметке и наоборот. Возможно интерактивное изменение стилей любых элементов;
• CSS — изменение таблиц стилей загруженной страницы;
• Script — Javascript-код страниц. Позволяет просматривать код, устанавливать точки останова, выполнять пошаговую отладку и трассировку значений переменных. По умолчанию отладка выключена;
• DOM — просмотр и изменение значения документа по модели DOM;
• Net — просмотр данных, передаваемых между браузером и сервером. Предоставляет возможность просмотра заголовков HTTP, переданных данных, а также порядка передачи данных. По умолчанию мониторинг сети выключен.

Рисунок 4 – Окно просмотра структуры и стилей в Firebug
Обратите внимание на то, что изменения, внесенные в отладчик, не сохраняются в исходных файлах. Для того чтобы сбросить внесенные в CSS или в HTML-разметку изменения, необходимо перезагрузить страницу.
Закладка CSS отображает файлы стилей примерно в том виде, в котором они были созданы. Различаться могут форматирование и способ отображения кода цвета. Этот режим удобен в том случае, если редактируется стиль для нескольких элементов сразу. Изменения такого стиля будут сразу же отображены на открытой странице.
Если необходимо редактирование одного конкретного элемента, следует использовать закладку HTML. В закладке HTML доступны следующие вложенные закладки:
• Style (стиль) служит для редактирования стиля одного конкретного элемента, причем Firebug группирует стили, назначенные конкретно для выделенного элемента, и стили, унаследованные для этого элемента;
• Computed (скомпилированный стиль) отображает результат применения к элементу всех назначенных правил. В отличие от закладки Style здесь приводятся конкретные значения измененных свойств;
• Layout (макет) позволяет работать с блочной моделью разметки и отображает размеры элемента, его полей и границ в пикселах. Возможно интерактивное изменение отображаемых размеров.
ПОРЯДОК ВЫПОЛНЕНИЯ ЗАДАНИЯ
Выполнить разметку страницы с помощью стилей и блоков.
Задание выполнить в указанном ниже порядке.
1. Подготовить разметку произвольного текста, содержащего не менее 10 строк с использованием таблицы стилей. Продемонстрировать выделение отдельных слов с помощью стилей, цвета и шрифта.
2. Сформировать фрагмент расписания занятий, используя элемент div и стили.
3. Создать страницу, содержащую форму с набором кнопок. На этой странице добавить список ссылок, соответствующих кнопкам. Модифицировать с помощью стилей отображение ссылок так, чтобы они стали похожи на кнопки.
4. Проверить корректность всех разработанных страниц и устранить ошибки. Составить таблицу выявленных ошибок и пояснить, как они отображаются в браузере.
СОДЕРЖАНИЕ ОТЧЕТА
Отчет должен включать:
1) ФИО студента и номер группы;
2) наименование лабораторной работы;
3) названия выполненных пунктов и тексты реализованных HTML-страниц и стилей CSS с указанием имен файлов.
Отчет представляется в электронном виде в формате pdf или docx.
Зачет ставится при условии выполнения всех пунктов задания, демонстрации работы программы и при наличии отчета и устных ответов на контрольные вопросы.
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Для чего предназначен язык CSS?
2. Какие примеры селекторов CSS вы можете привести?
3. Какие примеры описания шрифтов с помощью CSS вы можете привести?
4. Что представляет собой блочная модель?
5. В чем различие абсолютного и относительного позиционирования?
6. Какие средства существуют для отладки стилей?

Приложенные файлы

  • docx 11138629
    Размер файла: 1 MB Загрузок: 0

Добавить комментарий