Основные теоретические сведения
Лабораторная работа № 1
Создание HTML страницы с применением CSS
Цель:
знакомство с языками HTML и CSS, а также получение практических навыков применения каскадных таблиц стилей для формирования отображения страниц HTML.
Порядок выполнения:
1. Ознакомиться с использованием каскадных таблиц CSS и их применением в HTML.
2. Выполнить задание согласно варианта.
ОСНОВНЫЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
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>
• <date>April 7, 2005</date> •
<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">, а зависит только от заданной позиции в стиле.
Плавающие элементы
Плавающее размещение не является схемой позиционирования. Оно было введено как средство, позволяющее получить обтекание элементов, но не для создания макета страницы.
Например, следующие свойства стиля обеспечат отображение элементов-изображений img в правой части страницы, а все остальные элементы будут размещены в свободном пространстве слева:
img {
float: right;
padding: 15px;
}
Плавающее размещение иногда применяют к блокам, содержащим меню и прочие средства навигации.
ПОРЯДОК ВЫПОЛНЕНИЯ ЗАДАНИЯ
Выполнить разметку страницы с помощью стилей и блоков.
Задание выполнить в указанном ниже порядке.
1. Подготовить разметку произвольного текста, содержащего не менее 10 строк с использованием таблицы стилей. Продемонстрировать выделение отдельных слов с помощью стилей, цвета и шрифта.
2. Сформировать фрагмент расписания занятий, используя элемент div и стили.
3. Создать страницу, содержащую форму с набором кнопок. На этой странице добавить список ссылок, соответствующих кнопкам. Модифицировать с помощью стилей отображение ссылок так, чтобы они стали похожи на кнопки.
4. Проверить корректность всех разработанных страниц и устранить ошибки. Составить таблицу выявленных ошибок и пояснить, как они отображаются в браузере.
СОДЕРЖАНИЕ ОТЧЕТА
Отчет должен включать:
1) ФИО студента и номер группы;
2) наименование лабораторной работы;
3) названия выполненных пунктов и тексты реализованных HTML-страниц и стилей CSS с указанием имен файлов.
Отчет представляется в электронном виде в формате pdf или docx.
Зачет ставится при условии выполнения всех пунктов задания, демонстрации работы программы и при наличии отчета и устных ответов на контрольные вопросы.
КОНТРОЛЬНЫЕ ВОПРОСЫ
1. Для чего предназначен язык CSS?
2. Какие примеры селекторов CSS вы можете привести?
3. Какие примеры описания шрифтов с помощью CSS вы можете привести?
4. Что представляет собой блочная модель?
5. В чем различие абсолютного и относительного позиционирования?
6. Какие средства существуют для отладки стилей?
Лабораторная работа № 1
Создание HTML страницы с применением CSS
Цель:
знакомство с языками HTML и CSS, а также получение практических навыков применения каскадных таблиц стилей для формирования отображения страниц HTML.
Порядок выполнения:
1. Ознакомиться с использованием каскадных таблиц CSS и их применением в HTML.
2. Выполнить задание согласно варианта.
ОСНОВНЫЕ ТЕОРЕТИЧЕСКИЕ СВЕДЕНИЯ
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>
• <date>April 7, 2005</date> •
<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">, а зависит только от заданной позиции в стиле.