42240

Форматирование Web-страниц. Знакомство с элементами и стилями форматирования языка HTML

Лабораторная работа

Информатика, кибернетика и программирование

Программное обеспечение: операционная система Windows Webбраузер Internet Explorer версии 6. Разработчики Webстраниц должны включать в свои документы одно из трех объявлений типов. Сущности и комментарии HTML и XHTML В Webстраницах могут быть представлены только символы кодовой таблицы SCII.

Русский

2013-10-27

725 KB

1 чел.

 31 -

Лабораторная Шонин В.А. работа 2-04

Форматирование Web-страниц 

1. Цель работы

Целью работы является знакомство с элементами и стилями форматирования языка HTML.

2. Состав рабочего места

2.1. Оборудование: IBM-совместимый   персональный компьютер (ПК).

2.2. Программное обеспечение: операционная система Windows, Web-браузер Internet Explorer версии 6.0 и выше.

3. Краткие теоретические сведения

3.1. Типы структур HTML и XHTML  

В HTML и XHTML в качестве инструментов разметки определены структуры документов, элементы, сущности и комментарии.

Согласно спецификации HTML 4.01 для документов HTML определены три структуры, описываемые тремя DTD. Разработчики Web-страниц  должны включать в свои документы одно из трех объявлений типов. Разница между DTD заключается в поддерживаемых ими элементах. Объявление DTD должно размещаться в самом начале документа.

HTML 4.01 Strict DTD (строгое определение) включает все элементы и атрибуты, не являющиеся отмененными (deprecated) и не использующиеся в документах с фреймами. Для таких документов используется следующее объявление типа документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

       "http://www.w3.org/TR/REC-html40/strict.dtd">

Определение HTML 4.0 Transitional DTD (переходное определение) включает все элементы, включенные в строгом DTD, а также отмененные элементы и атрибуты.  Таковыми, являются, например, практически все элементы форматирования, в частности, элемент <font>.    Для документов, использующих это DTD, необходимо задавать такое объявление типа документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

       "http://www.w3.org/TR/REC-html40/loose.dtd">

Определение HTML 4.0 Frameset DTD (определение для фреймов) включает, помимо элементов переходного DTD, фреймы. Для документов, использующих это DTD, задается такое объявление типа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

       "http://www.w3.org/TR/REC-html40/frameset.dtd">. 

Первая строка документа HTML, определенного в соответствии со спецификацией XHTML, должна иметь следующий вид:

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

Эта строка определяет используемую версию XML и кодировку символов документа. При кодировании символов в XML используется двухбайтовый код Unicode. В качестве значений параметра encoding наиболее часто используются кодировки  UTF-8, в котором значения первых 128 символов представляются в однобайтовой кодировке, символы наиболее распространенных языков (в том числе русского и украинского) – двумя байтами, а остальные символы тремя байтами. В кодировке UTF-16 все символы представляются двумя байтами (эти кодировку рекомендуется использовать для русских и украинских документов HTML).  

Следующая строка должна содержать DTD для версии XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

3.2. Элементы  и атрибуты HTML и XHTML 

Для записи данных разметки в HTML и XHTML используются элементы (tags). Элементы заключаются в угловые скобки "<" и ">" и содержат только текстовые символы. Элементы можно записывать как строчными, так и прописными буквами, однако в соответствии со спецификацией XHTML 1.0 и XHTML 1.1 (для совместимости с XML) имена элементов должны записываться только строчными буквами.   

Существует два типа элементов HTML: контейнеры и одиночные элементы. Контейнер – это пара элементов, т.е. начальный и конечный элементы, имеющие соответственно вид: <имя атрибуты> и </имя>, где имя – это имя реального элемента, а атрибуты – параметры элемента. Начальный и конечный элементы контейнера вместе с заключенным между ним содержимым  являются элементом документа HTML (XHTML). Например, элемент, представляющий собой отформатированный текст, заключается между элементами <pre> и </pre>:

<pre>Это фрагмент отформатированного текста</pre>

Хотя для некоторых контейнеров, в соответствии со спецификацией HTML 4.01, конечный элемент не является обязательным, все же рекомендуется всегда завершать контейнер конечным элементом. К тому же, по спецификации XHTML конечный элемент является обязательным для всех контейнеров.

Одиночный элемент HTML отличается от контейнера тем, что это фактически только начальный элемент. Этот элемент не связан с действиями над текстом. Например, элемент <hr> создает горизонтальную линию. В соответствии со спецификацией XML каждый элемент (даже одиночный) должен быть закрыт. Для этого либо сразу же после элемента задать закрывающий элемент, например, <hr></hr>, либо в конце элемента (перед символом ">") необходимо поставить символ "/", например <hr/>.

Для каждого элемента определяется множество возможных атрибутов. Спецификация атрибута состоит из элементов, расположенных в следующем порядке:

  •  имени атрибута, например width;
  •  знак равенства (=);
  •  значения атрибута, которое задается строкой символов, например, 80.

Некоторые атрибуты могут иметь только одно, фиксированное значение, совпадающее с именем атрибута. В этом случае в HTML принято задавать только имя атрибута без знака равенства и значения атрибута.

Атрибуты, также как и элементы, можно записывать как строчными, так и прописными буквами, однако для совместимости с XML имена атрибутов в документе XHTML также должны записываться только строчными буквами. Разделителями между атрибутами служит один или несколько пробелов.

Если значения атрибутов содержат пробелы, то эти значения должны быть заключены в одинарные (') или двойные (") кавычки. В остальных случаях заключения значения атрибута в кавычки является необязательным, однако в XML (и соответственно в XHTML) значения всех атрибутов необходимо заключать в кавычки.

Хотя для каждого элемента задан свой набор атрибутов, некоторые атрибуты определены практически для всех элементов. Эти атрибуты приведены в табл. 4.1.

 

Таблица 4.1. Общие атрибуты HTML (XHTML)

Имя атрибута

Назначение

В каких элементах используется

class

Определяет класс данного элемента.

Все элементы, кроме <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, <title>

dir

Определяет направление просмотра текста: ltr – слева  направо (как в европейских языках) или rtl – справа  налево (как в арабском языке и иврите). Значение по умолчанию: ltr.

Все элементы, кроме <applet>, <base>, <basefont>, <bdo>, <br>, <frame>, <frameset>, <iframe>, <param>, <script>

id

Идентификатор элемента.

Все элементы, кроме <base>, <head>, <html>, <meta>, <script>, <style>, <title>

lang

Язык содержимого элемента (для русского языка используется значение кода языка ru, для украинского – uk, для английского – en).

Все элементы, кроме <applet>, <base>, <basefont>, <br>, <frame>, <frameset>, <iframe>, <param>, <script>

style

Стиль содержимого элемента.

Все элементы, кроме <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style>, <title>

title

Вывод всплывающего текста при подведении курсора к содержимому элемента.

Все элементы, кроме <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <title>

3.3. Сущности и комментарии HTML и XHTML

В Web-страницах могут быть представлены только символы кодовой таблицы ASCII. Кроме того, некоторые символы, например "<" и ">" имеют зарезервированное значение. Для представления других символов (например, греческих букв) можно использовать ссылки на символы – независимый от кодировки механизм ввода любых символов. Ссылки на символы позаимствованы из SGML и являются одним из видов сущностей (entities).

Ссылки на символы в HTML могут принимать две формы:

  •  числовые ссылки на символы (десятичные или шестнадцатеричные).
  •  ссылки на комбинации символов.

Числовые ссылки на символы указывают код символа в наборе символов документа. Числовые ссылки на символы могут также принимать две формы:

  •  синтаксис "&#D;", где D – десятичное число, указывает символ Unicode с десятичным номером D.
  •  синтаксис "&#xH;" или "&#XH;" , где H – шестнадцатеричное число, указывает на символ Unicode с шестнадцатеричным номером H.

Например, ссылка "&#960;" или "&#x03C0;" в Web-странице выведет на экран Web-браузера греческую букву .

Вторая форма имеет синтаксис "&имя;", где имя является символическим обозначением ссылки, например, для вывода буквы  можно использовать ссылку "&pi".

Полный список символических и числовых обозначений часто используемых символов приведен в спецификации HTML 4.01. В этот список входят следующие группы символов:

  •  специальные знаки, не входящие в стандартный набор символов клавиатуры (например, знак фунта  "£", знак авторского права "©" или знак "±");
  •  латинские буквы с надстрочными и подстрочными знаками (например, буквы "â" и "ç" французского алфавита);
  •  греческие буквы и математические символы (например, "" или "");
  •  технические символы (например, символ градуса "˚").

Следующие ссылки используются наиболее часто для представления специальных символов:

  •  <  (символ "меньше чем", левая угловая скобка) – &lt; 
  •  > (символ "больше чем", правая угловая скобка) – &gt; 
  •  &  (амперсант) – &amp; 
  •  "  (двойные кавычки) – &quot;
  •  «жесткий» или «неразрывный» пробел  – &nbsp; 

Последний символ используется тогда, когда необходимо задать определенное количество пробелов, поскольку при выравнивании содержимого Web-страницы браузер сам регулирует количество пробелов между словами и переносы строк, независимо от количества пробелов и переносов строк, заданных в исходном документе HTML.

В любом месте документа HTML и XHTML могут быть вставлены комментарии, которые так же, как и в текстах программ, служат для пояснения выполняемых действий и не выводятся на экран Web-браузера. Комментарии записываются в следующем виде:

<!--Текст комментария -->

Комментарий может занимать несколько строк.

3.4. Модули Structure и Metainformation

В состав модуля Structure входят контейнеры <body>…</body>, <head>…</head>, <html>…</html> и <title>…</title>, а в состав модуля Metainformation входит единственный одиночный элемент <meta />.

Все создаваемые Web-страницы должны иметь общую структуру, представленную на рис. 4.1.

<?xml version="1.0" encoding="тип-кодировки"?>

определение типа документа (DTD) – одно из описанных в 3.1

<html>

<head>

<title>Заголовок Web-страницы</title>

 Элементы заголовка

</head>

<body>

 Содержимое Web-страницы

</body>

</html>

Рис. 4.1. Общая структура Web-страницы

3.4.1. Элементы <html>, <head> и <title>

Элементы <html> и </html> ограничивают Web-страницу. Хотя они являются необязательными, но на практике используются для указания того, что данный файл является файлом в формате HTML. Для элемента <html> могут использоваться атрибуты class, dir и lang, описанные выше.

При использовании спецификации XHTML 1.1 в элементе <html> должен быть задан атрибут xmlns, определяющий пространство имен для элементов XML. В этом случае элемент <html> должен иметь следующую фиксированную форму:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="код-языка">

Для кода-языка используются те же значения, что и для атрибута lang, описанного выше.

Заголовок Web-страницы, заключенный между элементами <head> и </head>, представляет собой общую информацию о файле и не отображается в самом документе. Допустимыми атрибутами элемента <head> являются атрибуты class, dir, id и lang, описанные выше.

Единственным обязательным элементом заголовка является контейнер <title>…</title>, в котором задается имя Web-страницы. При просмотре страницы в Web-браузере это имя выводится в строке заголовка окна. Допустимыми атрибутами элемента <title> также являются атрибуты class, dir, id и lang, и, кроме того, в Internet Explorer дополнительно определен атрибут title, описанный выше.

3.4.2. Элемент <meta>

Если необходимо, чтобы созданная Web-страница была доступна для возможно большего числа потенциальных пользователей, можно включить в заголовок одиночный элемент <meta>, в которой задаются ключевые слова и другая информация о документе. По этой информации поисковые серверы сети Internet индексируют и каталогизируют Web-страницу в своих базах данных. При обращении пользователя к поисковому серверу (например, Yahoo!) пользователь по наименованию Web-страницы или ключевым словам получает доступ к нужной ему Web-странице.

Элемент <meta>  должен находиться в заголовке документа HTML. В этом элементе могут быть заданы следующие атрибуты:  http-equiv,   name, content и lang.

Элементы <meta> с атрибутом http-equiv эквивалентны заголовкам протокола HTTP. Обычно они управляют действиями Web-браузеров и могут быть использованы в дополнение к информации, выдаваемой обычными заголовками (на некоторых Web-серверах они могут автоматически переводиться в обычные заголовки HTTP).

Атрибут content задает значение параметра, заданного в атрибуте  http-equiv. Общая форма задания элемента <meta> с атрибутами http-equiv и content:

<meta http-equiv="имя-параметра " content="значение-параметра " />

Основные параметры атрибута http-equiv приведены в табл. 4.2.

Таблица 4.2. Основные параметры атрибута http-equiv

Имя параметра

Значение параметра

Expires

Дата устаревания. Если указанная дата прошла, то очередной запрос этого документа вызывает повторный сетевой запрос, а не загрузку документа из кэш-памяти. Дата со значением "0" интерпретируется как "сейчас". Пример:

content="Wed, 26 Feb 2002 08:21:57 GMT"

Content-Type

Указание типа документа. Может быть расширено (после символа ";") указанием кодировки страницы (charset), например:

content="text/html; charset=1251"

Content-language

Указание языка документа, например, content="uk_UA".

Refresh

Определение задержки в секундах, после которой Web-браузер автоматически обновляет документ, например,

content="3,  url=http://www.new.com/pag.html"

Элементы <meta> с атрибутом name используются в случаях, когда поля не являются с заголовками HTTP. Так же, как и для атрибута http-equiv, в атрибуте name задается имя параметра, а в атрибуте content – значение параметра.

Основные параметры атрибута name приведены в табл. 4.3.

Таблица 4.3. Основные параметры атрибута name

Имя параметра

Значение параметра

Robots

Управление индексацией страницы для поисковых роботов. Возможные значения: all, none, index и noindex. Пример:

content="noindex"

Description

Краткая аннотация содержания документа (длина текста до 100 символов). Используется поисковыми системами для описания документа, например:

content="Документ - словарь элементов META"

Keywords

Ключевые слова документа (длина списка до 1000 символов). Пример: content="элементы, метаданные, список"

Author

Обычно имя автора, формат произвольный, например:

content="Ivanov I.I."

Generator

Обычно название и версия редактора HTML, с помощью которого создана эта страница, например:

content="FrontPage.Editor.Document"

Copyright

Обычно описание авторских прав на документ в произвольном формате, например:

content="1999 by Coriolis Group"

Distribution

Вид распределения документа. Возможные значения: global, local, iu (internal use), например:

content="local"

Subject

Тема документа, например:

content="Об атрибутах элемента <meta>"

Для Web-страниц на русском или украинском языках рекомендуется включить в состав заголовка элемент:

<meta http-equiv="Content-Type"

content="text/html;charset=кодировка " />

где параметр кодировка обычно имеет значение Windows-1251 для Windows, либо KOI8-R для Unix.

В атрибуте lang можно задать язык документа (например, lang="ru"). 

3.4.3. Элемент <body>

Часть документа, заключенная в контейнер <body>…</body>, содержит информацию Web-страницы, выводимую пользователю. В качестве атрибутов элемента <body>, помимо общих атрибутов class, dir, id, lang, style и title, могут быть заданы следующие атрибуты форматирования: alink (цвет активной гиперссылки), background (URL для изображения, которое будет служить в качестве фона Web-страницы), bgcolor (цвет фона Web-страницы), link (цвет не посещенной гиперссылки), text (цвет текста на Web-странице) и vlink (цвет посещенной гиперссылки). Однако параметры форматирования, задаваемые этими атрибутами, можно задать и с помощью стилей.  

3.5. Модуль Text 

В состав модуля Text входят элементы форматирования текста. Эти элементы можно разбить на три группы:

  •  элементы заголовков (<h1>, <h2>, <h3>, <h4>, <h5> и <h6>);
  •  блоковые элементы (<address>, <blockquote>, <div>, <p> и <pre>);
  •  строковые (inline) элементы (<abbr>, <acronym>, <br>, <cite>, <code>, <dfn>, <em>, <kbd>, <q>, <samp>, <span>, <strong> и <var>).  

Содержимым блоковых элементов являются отдельные логические фрагменты документа HTMLблоки (абзацы и группы абзацев). Содержимым строковых элементов обычно являются фрагменты абзацев – символы, слова и группы слов.  

Вывод содержимого заголовков и блоковых элементов всегда начинается с новой строки и, кроме того, текст после заголовка или блока также начинается с новой строки.

3.5.1. Блоковые элементы

Для структуризации текста Web-страницы, как и в обычном текстовом документе, используются заголовки. В HTML определены шесть уровней заголовков, определяемые контейнерами <h1>…</h1>, <h2>…</h2>, <h3>…<h3>, <h4>…<h4>, <h5>…</h5> и <h6>…<h6>. Содержимое этих контейнеров зависит от используемого Web-браузера, однако заголовок всегда выводится жирным шрифтом и размер шрифта заголовка зависит от уровня заголовка (чем выше уровень, тем меньше размер шрифта).

Заголовки различных уровней обычно используются для выделения структурных единиц текста: наименования Web-страницы, наименований разделов, подразделов и т.п., например:

<h1>Заголовок Web-страницы</h1>

Как уже говорилось выше, Web-браузер сам осуществляет форматирование содержимого Web-страницы: расставляет пробелы между словами и переносит текст на новую строку независимо от пробелов межу словами и переносов строк в исходном HTML документе.

Так же, как и в современных текстовых процессорах, структурной единицей текста в Web-странице является не строка, а абзац (Web-браузер сам осуществляет перенос строк абзаца).  Для того, чтобы в Web-страницах выделить абзацы, используется контейнер <p>…</p>. Содержимое абзаца помещается между начальным элементом <p> и конечным элементом </p>. Текст каждого абзаца начинается с новой строки и между абзацами выводится пустая строка.

Хотя использование закрывающего элемента </p> не является, согласно спецификации HTML 4.01, обязательным, тем не менее, его рекомендуется использовать для завершения абзаца (в спецификации XHTML, как уже говорилось, все открывающие элементы должны иметь соответствующие закрывающие элементы).

Помимо общих атрибутов class, dir, id, lang, style и title в элементах заголовков и элементе <p> можно использовать атрибут align, задающий выравнивание в абзаце.  Следует отметить, что в спецификации HTML 4.01 и в спецификации XHTML атрибут align объявлен устаревшим (вместо него рекомендуется использовать стили).

Иногда необходимо в нескольких идущих подряд заголовках или абзацах обеспечить одинаковое выравнивание. Для этого можно использовать контейнер <div>…</div>., в который можно поместить один или несколько элементов <p>. Для элемент <div> также можно задать атрибут align, но, как и в случае с элементами заголовков и абзаца, более удобным является использование стилей. Сам по себе элемент <div> не выполняет никаких действий и служит только для одинакового стилевого оформления нескольких блоковых элементов.

Web-браузер сам форматирует текст. Для того, чтобы при выводе Web-страницы сохранить форматирование текста, приведенное в документе HTML, используется контейнер <pre>…</pre>. Обычно в Web-браузерах для вывода содержимого этого контейнера используется моноширинный шрифт (моноширинным шрифтом называется такой шрифт, все символы которого имеют одинаковую ширину). В этом элементе можно задавать только общие атрибуты class, dir, id, lang, style и title.

Два элемента <blockquote> и <address> служат для выделения на Web-страницы цитат и адресов, и в настоящее время не используются, поскольку для вывода этих компонент Web-страницы можно применить элемент <p> с соответствующими стилями.  

3.5.2. Строковые элементы

Для перехода на новую строку в блоковых элементах используется строковый одиночный элемент <br>. Помимо общих атрибутов class, id, lang, style и title, в этом элементе можно использовать атрибут clear. Этот атрибут задает вставку в текст промежутка при «обтекании» изображения текстом, однако для этих же целей может быть использовано свойство стиля clear (допустимые значения и использование этого свойства будет рассмотрено при рассмотрении вставки изображений в текст документа с помощью атрибута <img>).

Остальные строковые элементы модуля Text называют элементами логического форматирования, поскольку они указывают, что содержимое контейнера, заключенное между начальным и конечным элементом, необходимо выделить, однако как будет выделено содержимое, определяет Web-браузер. Это следующие элементы: <abbr> (вывод аббревиатуры), <acronym> (вывод акронима), <cite> (вывод цитаты), <code> (вывод фрагмента компьютерного кода), <dfn> (вывод определения термина), <em> (вывод выделенного текста), <kbd> (вывод текста, введённого пользователем), <q> (вывод цитаты внутри блока), <samp> (вывод программ, сценариев и т.п.), <span> (не выполняет никакого действия), <strong> (вывод сильно выделенного текста) и <var> (вывод аргумента переменной или программы).

Для всех приведенных выше элементов можно задавать только общие атрибуты class, dir, id, lang, style и title.

В настоящее время все эти элементы, кроме элемента <span>, который служит для стилевого оформления строковых элементов, не используются.

3.6. Модуль Presentation

Модуль Presentation содержит элемент горизонтальной линейки <hr>, а также строковые элементы физического форматирования <b>, <big>, <i>, <small>, <sub>, <sup> и <tt>.

3.6.1. Элемент <hr>

Для разграничения отдельных фрагментов текста в Web-страницах можно использовать горизонтальные линии, называемые также линейками. Линейки в тексте Web-страницы задаются с помощью одиночного элемента <hr>. Помимо общих атрибутов class, id, style и title, для этого элемента можно задать атрибуты, приведенные в табл. 4.4.

Таблица 4.4. Атрибуты элемента <hr>

Имя атрибута

Что определяет

Значение по умолчанию

Поддержка

align

Выравнивание линейки (допустимые значения center – по  центру, left – влево, или right – вправо).

center

HTML 4.01,

Internet Explorer,

Firefox, Opera,

Netscape Navigator

color

Цвет линейки.

светло-серый

Internet Explorer/

Firefox,

Netscape Navigator

noshade

Отсутствие тени у линейки (атрибут задается по имени, без значения).

тень есть

HTML 4.01,

Internet Explorer,

Firefox, Opera,

Netscape Navigator

size

Толщину линейки (в пикселях).

2

HTML 4.01,

Internet Explorer,

Firefox, Opera,

Netscape Navigator

width

Ширину линейки (в пикселях или в процентах от ширины экрана).

100%

HTML 4.01,

Internet Explorer,

Firefox, Opera,

Netscape Navigator

 

3.6.2. Элементы физического форматирования

Текст, выделенный с помощью начального и конечного элементов физического форматирования, во всех Web-браузерах отображается одинаково (если монитор и операционная система поддерживают данный стиль). В HTML 4.01 определены следующие элементы физического форматирования:  <b> (вывод полужирным шрифтом),  <big> (увеличение размера текста на единицу – условный размер текста на Web-странице может иметь значение от 1 до 7),  <i> (вывод курсивом), <small> (уменьшение размера текста на единицу), <sub> (вывод подстрочного текста),  <sup> (вывод надстрочного текста) и <tt> (вывод моноширинным шрифтом).

В спецификации HTML 4.01 определены еще три элемента физического форматирования: <u> – для подчеркивания текста, а также элементы <s>  и <strike> – для перечеркивания текста.  

Для всех элементов физического форматирования можно задавать только общие атрибуты class, dir, id, lang, style и title.

Вместо элементов физического форматирования также рекомендуется использовать стили.

3.6.3. Элементы <font> и <basefont>

Для установления параметров шрифта Web-страницы: типа шрифта, размера и цвета можно использовать одиночный элемент <basefont>. Этот элемент должен быть задан в начале тела документа HTML. По умолчанию, если элемент <basefont> опущен, используется тип шрифта, принятый в данном Web-браузере по умолчанию, размер шрифта, равный 3 (при диапазоне изменений от 1 до 7) и цвет текста – черный.

Строковый элемент <font> задает тип, размер и цвет шрифта своего содержимого, заключенного между элементами <font> и </font>.

Помимо общих атрибутов class, dir, id, lang, style и title, для элементов <basefont> и <font> можно задать атрибуты:  color – цвет текста,  face – список имён шрифтов, разделённых запятыми, которые Web-браузер должен искать в порядке убывания приоритета и size – абсолютный (от 1 до 7) или относительный (со знаками "+" или "-") размер шрифта.  

Элементы <basefont> и <font>, также как и другие элементы форматирования, согласно спецификации HTML 4.01, не рекомендуется использовать в Web-страницах (вместо них нужно использовать стили). В рекомендации XHTML 1.1 эти два элемента определены в модуле Legacy (Наследство) .

3.6. Синтаксис таблиц стилей

3.6.1. Единицы измерения в таблицах стилей

Для задания значений свойств, определяющих некоторые размеры, в каскадных таблицах стилей применяются относительные и абсолютные единицы измерения длины. Относительные единицы задают Шонин В.А.длину относительно значения другого свойства, определяющего длину. Документы, в которых таблицы стилей используют относительные единицы измерения, более приспособлены для отображения на разных устройствах (например, дисплей или лазерный принтер). Абсолютные единицы измерения полезны только тогда, когда известны физические характеристики устройства отображения. В табл. 4.5 отображены единицы измерения, используемые в таблицах стилей.

Таблица 4.5. Единицы измерения, используемые в таблицах стилей

Единицы измерения

Относительные

Абсолютные

em  Высота буквы M шрифта элемента

in  Дюйм (1 in = 2.54 cm)

ex  Высота буквы x шрифта

cm  Сантиметр

рх  Пиксель

mm  Миллиметр

%  Процент

pt  Пункт (1pt = 1/72 in)

pc  Пика (1 рс = 12 pt)

3.6.2. Определение стиля и правила таблиц стилей

Определение стиля задается следующим образом:

наименование-свойства : значение-свойства

Если значение свойства содержит несколько элементов, то элементы отделяются друг от друга пробелами:

значение-1 значение-2

Если необходимо задать несколько свойств (список стилей), они отделяются друг от друга символом ";":

наименование-свойства-1 : значение-свойства-1; наименование-свойства-2 : значение-свойства-2;

Таблица стилей состоит из правил CSS. Каждое правило задается следующим образом:

селектор {список-стилей},

где список-стилей содержит одно или несколько определений стилей (символ ";" в конце списка можно опустить). В качестве селектора в правиле CSS могут задаваться следующие элементы:

  •  элемент HTML;
  •  элемент HTML со ссылкой на класс;
  •  элемент HTML со ссылкой на идентификатор элемента (значение атрибута id элемента);
  •  псевдоклассы;
  •  псевдоэлементы.

Правила каскадных таблиц стилей, в которых в качестве селектора используются элементы HTML, влияют на отображение всех элементов заданного типа в документе.

Если необходимо некоторые элементы отобразить по-другому, можно использовать, ссылку на класс. Имя класса указывается в селекторе правила после имени элемента и отделяется от него точкой.

Если класс должен применяться ко всем элементам документа, то в селектор задают либо в виде символа "*", либо просто опускают. Для того, чтобы правило со ссылкой на класс использовать в каком-либо элементе, в этом элементе указывается атрибут class, значением которого является имя класса.

Параметром атрибута class может быть не одно значение, а набор значений, отделенных друг от друга пробелами. Для того, чтобы правило работало только для при наличии определенных значений в наборе, необходимо указать этот набор значений, отделяя их друг от друга символом ".".

Атрибут id, который также можно задавать практически для любого элемента, не влияет на отображение Web-браузером элемента HTML, но он задает уникальное имя элемента, которое используется для ссылок на него в сценариях и таблицах стилей. Ссылка на значение атрибута id в правиле, как и всякая ссылка в HTML, предваряется символом "#".

Псевдоклассами называют селекторы, которые связаны с выполнением некоторых действий на Web-странице.  Они будут рассмотрены в лабораторной работе 2-05.

Псевдоклассы :link и :visited применяются для отображения не просмотренных и просмотренных гиперссылок.

Псевдокласс :hover применяется, когда пользователь (с помощью некоторого указывающего устройства) выделяет элемент, но не активизирует его.

Псевдокласс :active применяется, когда элемент активизируется пользователем.

Псевдоэлементы позволяют сформировать правила, которые не могут быть получены с помощью других типов селекторов.

Псевдоэлемент :first-line используется для применения стилей к первой форматируемой строке абзаца.

Псевдоэлемент :first-letter используется для применения стилей к первой букве абзаца.

Для уменьшения размеров таблиц стилей можно группировать разные селекторы в виде списка элементов страницы HTML, разделенных запятыми, если для них задается одно правило

В HTML некоторые элементы могут содержать другие. Если для вложенного элемента не определены свои правила форматирования, то вложенный элемент наследует правила форматирования элемента-родителя.

Если необходимо, чтобы выделяемые только в абзаце элементы отображались желтым цветом, а в других частях документа каким-то другим цветом, используются контекстные селекторы, состоящие из нескольких простых, разделенных пробелами.

3.7. Использование стилей в Web-странице

Существует четыре способа использования Шонин В.А.стилей в Web-странице:

  1.  Внедрение – позволяет задавать все правила таблицы стилей непосредственно в самом документе.
  2.  Связывание – позволяет использовать одну таблицу стилей для форматирования многих страниц HTML.
  3.  Импортирование – позволяет встраивать в документ таблицу стилей, расположенную на сервере.
  4.  Встраивание в элементы документа – позволяет изменять форматирование конкретных элементов страницы.

3.7.1. Внедрение таблицы стилей

При внедрении таблицы стилей в документ HTML правила, ее составляющие, задаются в контейнере <style>…</style>, размещаемом в заголовке  документа (контейнере <head>…</head>). Элемент <style> является единственным элементом в модуле Style Sheet в XHTML.  Помимо общих атрибутов dir, lang и title, для элемента <style> допустимыми атрибутами  являются атрибуты type и media.

Атрибут type является обязательным атрибутом, в котором задается MIME-тип содержимого контейнера <style>…</style>. Поскольку содержимым контейнера является таблица стилей, значение MIME-типа всегда равно text/css.

Атрибут media определяет среду, в которой будут использоваться внедряемые таблицы стилей. Допустимые значения этого атрибута те же, что и для аналогичного атрибута элемента <link>. Чаще всего используется значения screen, print или all (по умолчанию предполагаются значение all).

3.7.2. Связывание и импортирование таблиц стилей

Связывание позволяет хранить таблицу стилей в отдельном файле и присоединять ее к документам с помощью одиночного элемента <link>, задаваемого в разделе заголовка:

<link rel="stylesheet" type="text/css"

href="URL таблицы стилей">

где атрибут rel определяет, что элемент, с которым выполняется связь, является таблицей стилей, атрибут type определяет MIME-тип файла (в данном случае text/css), а атрибут href,  задает местоположение файла с таблицей стилей (файл должен имеет расширение .css).

Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, а также может содержать комментарии HTML.

В контейнере <style> … </style> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей.

3.7.3. Встраивание в элемент документа

Встраивание в элемент документа выполняется с помощью атрибута style, который можно задать практически в любом элементе HTML (кроме элементов <base>, <basefont>, <head>, <html>, <meta>, <param>, <script>, <style> и <title>). В этом атрибуте можно задать значения свойств стиля для элемента Шонин В.А.Web-страницы  в соответствии с синтаксисом каскадных таблиц стилей.

3.7.4. Правила приоритетности для таблиц стилей

Правила приоритетности довольно сложны и могут быть изменены разработчиком или пользователем Web-страницы. Однако для начальных разработок таблиц стилей можно просто запомнить следующую приоритетность правил (от низшего к высшему):

  1.  Связанная таблица стилей.
  2.  Импортируемая таблица стилей.
  3.  Правило с элементом HTML в качестве селектора.
  4.  Правило со ссылкой на класс в качестве селектора.
  5.  Правило со ссылкой на идентификатор в качестве селектора.
  6.  Встроенное в элемент HTML правило.

3.8. Стили шрифтов

В CSS свойства шрифтов используются для задания желаемого стиля отображения содержимого Web-страницы.

3.8.1. Задание гарнитуры шрифта

Гарнитура шрифта определяется свойством font-family. Значением этого свойства является имя гарнитуры шрифта или список гарнитур (разделенный запятыми), просматриваемый в порядке появления в списке. Если первый шрифт у пользователя отсутствует, то ищется второй шрифт и т.д. Кроме того, если данный шрифт не содержит каких-то символов (например, русских букв) среди шрифтов списка ищется шрифт, который может вывести эти символы. Если ни один шрифт из списка не найден, используется шрифт по умолчанию данного Web-браузера. Если имя шрифта состоит из нескольких слов, его можно заключить в кавычки (одиночные или двойные).

Помимо задания имени гарнитуры, в свойстве font-family можно задавать также имена общих семейств гарнитур, которые могут иметь значения, представленные в табл. 4.6.

Таблица 4.6. Имена семейства гарнитур, допустимые в значениях свойства  font-family

Имя общего семейства

Свойства

cursive

Буквы курсивных шрифтов наклонены и имитируют  рукописный, текст (например, Monotype Corsiva).

fantasy

Декоративные шрифты (например, Western).

monospace

Шрифты с одинаковой шириной букв (например, Courier New).

serif

Шрифты с засечками (например, Times New Roman).

sans-serif

Шрифты без засечек (например, Arial).

3.8.2. Задание стиля шрифта

Стиль шрифта определяется свойством font-style, которое может иметь допустимые значения, представленные в табл. 4.7.

Таблица 4.7. Допустимые значения свойства font-style

Значение свойства font-style

Что задает

normal

Нормальный стиль (значение по умолчанию).

italic

Курсивный шрифт или наклонный шрифт (если курсивный шрифт недоступен).  

oblique

Шрифт, получаемый из нормального шрифта с помощью наклона букв.  

inherit

Стиль шрифта наследуется из родительского элемента.

3.8.3. Задание варианта шрифта

Свойство font-variant позволяет задать варианты шрифта. Допустимые значения этого свойства представлены в табл. 4.8.

Таблица 4.8. Допустимые значения свойства font-variant

Значение свойства font-variant

Что задает

normal

Нормальный вариант – обычный шрифт с большими и маленькими буквами (значение по умолчанию).

small-caps

Шрифт, в котором строчные буквы будут заменены уменьшенным вариантом прописных.  

inherit

Вариант шрифта наследуется из родительского элемента.

3.8.4. Задание веса шрифта

Вес шрифта определяется с помощью свойства font-weight. В качестве значений этого свойства обычно используются два значения: normal (для нормального шрифта) и bold (для жирного шрифта).

3.8.5. Задание размера шрифта

Размер шрифта задается с помощью свойства font-size. Значениями этого свойства могут быть:

  •  абсолютный размер;
  •  относительный размер;
  •  размер в относительных и абсолютных единицах;
  •  число.

Для указания абсолютного размера шрифта в свойстве font-size используются значения свойства, представленные в табл. 4.9.

Таблица 4.9. Значения свойства font-size для указания абсолютного размера шрифта

Значение свойства font-size

Что задает

xx-small

Сверхмалый шрифт.

x-small

Очень маленький шрифт.  

small

Малый шрифт.  

medium

Средний шрифт.

large

Большой шрифт

x-large

Очень большой шрифт.

xx-large

Сверхбольшой шрифт.

Для указания относительного размера шрифта (относительно размера шрифта родительского текста) можно использовать значения larger и smaller.

Можно также указать размер в относительных (em, ex, px и %) или в абсолютных (in, cm, mm, pt и pc) единицах.

И, наконец, в качестве размера шрифта можно задать неотрицательное целое число (в этом случае размер шрифта будет определяться в пикселях).

3.8.6. Задание высоты строки

Свойство line-height позволяет задать высоту строку текста. Допустимые значения для этого свойства представлены в табл. 4.10.

Таблица 4.10. Допустимые значения для свойства line-height

Значение свойства

line-height

Что задает

inherit

Наследование значения свойства от родительского элемента.

normal

Нормальную высоту строки (обычно равную 1,0 или 1,2 высоты строки) (значение по умолчанию).

высота

Высоту строки в абсолютных или относительных единицах.  

число

Значение высоты строки, получаемое после умножения числа на высоту шрифта.  

процент

Значение высоты строки, получаемое после умножение высоты шрифта на заданный процент.

3.8.7. Интегральное свойство font

Для задания шрифта можно использовать также интегральное свойство font, значение которого описывает все свойства шрифта (за исключением свойства font-stretch). Значения свойств шрифтов должны идти в описании в следующем порядке:

font style font-variant font-weight

font-size/line-height font-family

При задании значений свойств шрифта могут быть опущены первые три значения, а также символ "/" и значение свойства line-height (высоты строки).

3.9. Стили текста

Стили текста управляют визуальным  представлением символов, пробелов, слов и абзацев.

3.9.1. Задание отступа первой строки

Свойство text-indent определяет отступ первой строки теста в блоке. Значение этого свойства является длина отступа (в относительных или абсолютных единицах) или процент относительно ширины содержащего блока. В качестве значения свойства может быть также задано inherit, что означает наследование значения данного свойства из родительского блока. Значение text-indent по умолчанию – 0.

3.9.2. Задание выравнивания текста

Свойство text-align определяет способ горизонтального выравнивания содержимого блока. Допустимые значения этого свойства представлены в табл. 4.11.

Таблица 4.11. Допустимые значения свойства text-align

Значение свойства

text-align

Что задает

center

Выравнивание по центру.

inherit

Наследование выравнивания от родительского блока.  

justify

Выравнивание по ширине.  

left

Выравнивание слева (значение по умолчанию).

right

Выравнивание справа.

3.9.3. Задание декорирования текста

Свойством text-decoration описываются элементы декорирования (украшения) текста. Допустимые значения этого свойства представлены в табл. 4.12.

Таблица 4.12. Допустимые значения свойства text-decoration

Значение свойства

text-decoration

Что задает

inherit

Наследование декорирования от родительского блока.

line-through

Перечеркивание текста.  

none

Отсутствие декорирования (значение по умолчанию).

overline

Надчеркивание сверху.

underline

Подчеркивание снизу.

3.9.4. Задание промежутков между буквами и словами

Свойства letter-spacing и word-spacing позволяют задавать расстояние между соответственно буквами и словами в тексте. Для свойств letter-spacing и word-spacing допустимыми являются значения, представленные в табл. 4.13.

Таблица 4.13. Допустимые значения свойств letter-spacing и word-spacing

Значение свойств

letter-spacing и word-spacing

Что задает

inherit

Наследование расстояния между буквами или словами  от родительского блока

normal

Стандартное для текущего шрифта расстояние между буквами или словами (значение по умолчанию).  

длина

Увеличение (если длина – без знака) или уменьшение (если длина со знаком "-") расстояния между буквами или словами (в абсолютных или относительных единицах) по сравнению со стандартным расстоянием.

3.9.5. Управление выводом заглавных букв в тексте

Свойство text-transform управляет заглавными буквами в тексте элемента. Допустимые значения этого свойства представлены в табл. 4.14.

Таблица 4.14. Допустимые значения свойства text-transform

Значение свойства

text-transform

Что задает

capitalize

Вывод каждого слова в тексте с заглавной буквы.

lowercase

Вывод всех слов в тексте строчными буквами.  

inherit

Наследование вывода слов от родительского блока.

none

Вывод текста без изменения (значение по умолчанию).

uppercase

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

3.10. Стили цвета и фона

Стили цвета и фона позволяют управлять цветами переднего плана и фоном элемента.

3.10.1. Задание цвета переднего плана и цвета фона

Свойства color и background-color задает соответственно цвет выводимых элементов (цвет переднего плана) и цвет фона. Значение этих свойств можно задать следующими способами:

  •  с помощью имени цвета (например, red) – в CSS1 определены 16 основных и в CSS2 – 124 дополнительных наименования цвета;
  •  с помощью шестнадцатеричного обозначения цвета в модели RGB (например, #FF0000 – в  Internet Explorer можно опустить символ "#");
  •  с помощью функции rgb, параметрами которой являются компоненты цвета в модели RGB в виде десятичных чисел (например, rgb(255,0,0)).

Для свойств color и background-color определено также значение inherit, при задании которого цвет наследуется из родительского блока. Кроме того, для свойства background-color определено значение transparent, благодаря которому все цвета, лежащие под элементом, становятся видимыми.

Для свойства color значение по умолчанию зависит от Web-браузера (обычно черный цвет). Для свойства background-color значением по умолчанию является transparent.

3.10.2. Задание фонового изображения

Свойство background-image задает изображение в качестве фона элемента. Допустимые значения этого свойства представлены в табл. 4.15.

Таблица 4.15. Допустимые значения свойства background-image

Значение свойства

background-image

Что задает

inherit

Наследование фонового изображения от родительского блока.

none

Отмену использования изображение в качестве фона.  

url("URL-изображения")

Адрес фонового изображения.

При определении фонового изображения следует также указывать цвет фона, который будет использоваться, если изображение недоступно. Если изображение доступно, то оно отображается поверх фонового цвета (который будет виден только сквозь прозрачные фрагменты изображения).

3.10.3. Управление выводом фонового изображения

Если задано фоновое изображение и оно меньше размера экрана, то с помощью свойств background-repeat, background-position, background-attachment и background можно управлять выводом изображения в Web-странице.

3.10.3.1. Управление повторением фонового изображения

Свойство background-repeat определяет, как будет повторяться фоновое изображение при заполнении фона Web-страницы. Это свойство имеет допустимые значения:, представленные в табл. 4.16.

Таблица 4.16. Допустимые значения свойства background-repeat

Значение свойства

background-repeat

Что задает

inherit

Наследование способа повторения изображения от родительского блока.

no-repeat

Отмену повторения изображения (выводится только один раз).  

repeat

Повторение изображения в виде мозаики (по горизонтали и вертикали) (значение по умолчанию).

repeat-x

Повторение изображения только по горизонтали.

repeat-y

Повторение изображения только по вертикали.

3.10.3.2. Управление позицией фонового изображения

Свойство background-position позволяет задать позицию фонового изображения в Web-странице (в том случае, если значение свойства background-repeat равно no-repeat, repeat-x или repeat-y).  

Значениями свойства background-position являются координаты x и y привязки определенных точек изображения и блока содержимого. Значения x и y можно задавать в процентах, в абсолютных единицах длины, а также с использованием комбинаций ключевых значений.

Пара 0% 0% означает, что верхний левый угол изображения помещается в верхний левый угол блока содержимого элемента (это значение является значением по умолчанию). Пара 100% 100% размещает нижний правый угол изображения в нижний правый угол блока содержимого. Пара значений, отличных от указанных, например 10% 80%, помещает точку изображения, расположенную на расстоянии в 10% ширины от левого края и в 80% высоты от верхнего края, в точно такую же точку блока содержимого элемента.

Пара абсолютных значений, например 10mm 5mm, размещает верхний левый угол изображения на 10 мм правее и на 5 мм ниже левого верхнего угла блока содержимого.

Ключевые значения для свойства background-position и их допустимые комбинации вместе с эквивалентными числовыми значениями представлены в табл. 4.17.

Таблица 4.17. Допустимые комбинации ключевых значения свойства background-position

Комбинация координат x и y

Значение

top left, left top

0% 0%

top, top center, center top

50% 0%

top right, right top

100% 0%

left, center left, left center

0% 50%

center, center center

50% 50%

right, center right, right center

100% 50%

bottom left, left bottom

0% 100%

bottom, bottom right, bottom center

50% 100%

bottom right, right bottom

100% 100%

3.10.3.3. Управление прокруткой фонового изображения

Свойство background-attachment определяет, будет ли фоновое изображение оставаться неподвижным при прокрутке содержимого окна Web-браузера или он будет прокручиваться вместе с документом. Для этого свойства можно задавать следующие значения: fixed – фоновое  изображение остается в том же месте экрана при прокрутке экрана (т.е. перемещается при прокрутке) и scroll – фоновое  изображение остается в том же месте Web-страницы при прокрутке экрана (т.е. не перемещается при прокрутке) (значение по умолчанию).

3.10.4. Интегральное свойство background

Свойство background является интегральным свойством, используемым для определения отдельных свойств фона (background-color, background-image, background-repeat, background-attachment и background-position) одновременно.

Значения свойств  background-color, background-image, background-repeat, background-attachment и background-position в свойстве background можно задавать в любом порядке и в любом количестве (от 1 до 5). Отдельные свойства отделяются друг от друга пробелами.

3.11. Модель представления документа в виде блоков

Модель представления документа в виде блоков, используемая в CSS, вводит понятие прямоугольных блоков, которые генерируются для элементов документа.

Каждый блок имеет информативную область, в которой заключено содержимое породившего его элемента (например, текст, изображение и т.п.), и наряду с нею может также иметь области, отведенные для оформления отступов, границ и полей. Размер каждой из этих областей задается свойствами, описанными ниже. Взаимное расположение полей, границ и отступов, а также свойства, используемые для их установки, приведены на рисунке.

3.11.1. Задание ширины полей блока

Свойства margin-top, margin-right, margin-bottom и margin-left определяют ширину соответственно верхнего, правого, нижнего и левого полей блока.

Значения свойств задаются либо в абсолютных или относительных единицах, либо в процентах к размерам блока. Кроме этих значений, свойства могут иметь значение auto (автоматическое определение ширины поля) или inherit (значение наследуется из родительского блока).

Значения всех свойств, по умолчанию, равны 0.

Интегральное свойство margin определяет значения ширины верхнего, правого, нижнего и левого полей блока (может быть задано от 1 до 4 значений). Значения ширины полей в зависимости от количества значений представлены в табл. 4.18.

Таблица 4.18. Значения ширины полей в зависимости от количества значений в свойстве margin

Количество значений

Значение 1

Значение 2

Значение 3

Значение 4

1

Ширина всех полей

2

Ширина верхнего и нижнего полей

Ширина правого и левого полей

3

Ширина верхнего поля

Ширина правого и левого полей

Ширина нижнего поля

4

Ширина верхнего поля

Ширина правого поля

Ширина нижнего поля

Ширина левого поля

3.11.2. Задание границ блока

Свойства границы позволяют устанавливать ширину, цвет и стиль области границы блока.

3.11.2.1. Задание ширины границы блока

Свойства border-top-width, border-right-width, border-bottom-width и border-left-width определяют ширину соответственно верхней, правой, нижней и левой границ блока.

Допустимые значения свойств ширины границы представлены в табл. 4.19.

Таблица 4.19. Допустимые значения свойств ширины границы

Значение свойств

ширины границы

Что задает

число

Значение ширины в абсолютных или относительных единицах.

thin

Тонкую граница.

medium

Границу средней толщины (значение по умолчанию).

thick

Толстую граница.

Интегральное свойство border-width определяет значения ширины верхней, правой, нижней и левой границ блока (может быть задано от 1 до 4 значений). Это свойство определяет значения ширины аналогично свойству margin для полей блока.

3.11.2.2. Задание цвета границы блока

Свойства border-top-color, border-right-color, border-bottom-color и border-left-color определяют цвет соответственно верхней, правой, нижней и левой границ блока. В качестве значения по умолчанию используется значение свойства color для данного блока.

Интегральное свойство border-color определяет значения цвета верхней, правой, нижней и левой границ блока аналогично свойству margin для полей блока. Помимо значений цвета и inherit, свойство border-color может иметь значение transparent (в этом случае граница является прозрачной, хотя она может иметь ширину).

3.11.2.3. Задание стиля границы блока

Свойства border-top-style, border-right-style, border-bottom-style и border-left-style определяют стиль границы (сплошная, двойная, пунктирная и т.д.), выступающей в качестве границы блока. Допустимые значения для этих свойств представлены в табл. 4.20.

Таблица 4.20. Допустимые значения свойств стиля границы

Значение свойств

стиля границы

Что задает

dashed

Отображение границы штрихпунктирной линией.

dotted

Отображение границы пунктирной линией.

double

Отображение границы двойной линией.

groove

Отображение границы вдавленной линией.

hidden

Отображение границы как скрытой.

inherit

Наследование стиля границы от родительского элемента.

inset

Отображение всего блока как вдавленного.

none

Отсутствие границы (значение по умолчанию).

outset

Отображение всего блока как выпуклого.

ridge

Отображение границы выпуклой линией.

solid

Отображение границы сплошной линией.

Поскольку по умолчанию граница не выводится (даже если заданы свойства ширины и цвета границы), для вывода границы надо обязательно задать хотя бы ее свойство стиля, со значением, отличным от none и hidden.  

Интегральное свойство border-style определяет значения стилей верхней, правой, нижней и левой границ блока аналогично свойству margin для полей блока.

3.11.2.4. Интегральные свойства границы блока

Для одновременного задания ширины, цвета и стиля верхней, правой, нижней и левой границ используются соответственно свойства border-top, border-right, border-bottom и border-left. Значения ширины, цвета и стиля могут быть заданы в произвольном порядке, если какое-либо значение опущено, предполагается значение по умолчанию для соответствующего свойства.

Свойство border определяет значения ширины, цвета и стиля для границ блока (от одного до трех значений). Каждое значение определяет значение соответствующего свойства для всех четырех границ: верхней, правой, нижней и левой.

3.11.3. Задание отступов от границы блока

Отступы от границы до содержимого блока задаются с помощью свойств padding-top, padding-right, padding-bottom и padding-left. Эти свойства задаются в той же форме, что и значения для ширины поля.

Интегральное свойство padding определяет значения верхнего, правого, нижнего и левого отступов в блоке аналогично свойству margin для полей блока.

4. Порядок выполнения работы

  1.  Откройте папку Web-страницы и скопируйте папку своего варианта в свою папку.
  2.  Откройте текстовый файл (с расширением .txt) для своего варианта. Оформите его как Web-страницу, добавив открывающие и закрывающие элементы <html>, <head>, <title>, <body>, как показано на рис. 4.1. В качестве типа документа возьмите DTD для версии XHTML 1.1. В качестве содержимого элемента <title> задайте наименование  Web-страницы (первую строку файла).  Содержимое текстового файла должно находиться между элементами <body> и </body>.
  3.  Введите в заголовок элементы:

<meta http-eqiv="Content-Type"

content="text/html;charset=Windows-1251">

<meta name="Author"

content="автор-или-авторы;номер-группы">.

где в атрибуте content укажите свои фамилии и инициалы, а также номер группы.

  1.  Задайте структурную разметку файла с помощью блоковых элементов <h1>, <h2>,  <h3>, <h4>  и <p> по следующим правилам:
  •  заголовок  Web-страницы задается как заголовок первого уровня: <h1>;
  •  раздел Введение (если он есть), а также разделы 1, 2 и т.д. задаются как заголовки второго уровня: <h2>;
  •  подразделы 1.1, 1.2 и т.д. в разделах задаются как заголовки третьего уровня: <h3>;
  •  пункты 1.1.1, 1.1.2 и т.д. (если они есть) в подразделах задаются как заголовки четвертого уровня: <h4>;
  •  абзацы в разделах, подразделах и пунктах задаются с помощью элемента <p>.

Не забудьте в конце каждого заголовка и абзаца вставить соответствующий закрывающий элемент!

  1.  Сохраните созданную Web-страницу с тем же именем и расширением .html и просмотрите получившуюся Web-страницу в Internet Explorer.
  2.  Создайте таблицу стилей в заголовке Web-страницы. Вставьте в нее правила для селекторов h1, h2, h3 и h4 в соответствии со своим вариантом (табл. 4.21). Прочерк в значении свойства означает, что данное свойство не задается.

Таблица 4.21. Правила стилей для заголовков Web-страницы

Вари-ант

Правила стилей

Наименование свойства

Значение свойства

h1

h2

h3

h4

1

Гарнитура

Verdana

Verdana

Verdana

Verdana

Стиль

italic

italic

italic

Вес

bold

bold

bold

bold

Цвет

red

navy

navy

navy

Размер

20pt

16pt

14pt

12pt

Выравнивание

center

center

left

left

Украшение

underline

Расстояние между буквами

2pt

2pt

Расстояние между словами

4pt

3pt

2

Гарнитура

Arial

Arial

Arial

Arial

Стиль

Вес

bold

bold

bold

bold

Цвет

navy

green

green

green

Размер

24pt

18pt

16pt

14pt

Выравнивание

center

left

left

left

Украшение

Расстояние между буквами

3pt

2pt

2pt

2pt 

Расстояние между словами

4pt

3pt

3pt

3pt

3

Гарнитура

Times New Roman

Times New Roman

Times New Roman

Times New Roman

Стиль

italic

italic

italic

Вес

bold

bold

bold

bold

Цвет

red

navy

navy

navy

Размер

22pt

18pt

16pt

14pt

Выравнивание

center

center

left

left

Украшение

underline

underline

underline

Расстояние между буквами

2pt

2pt

Расстояние между словами

4pt

3pt

4

Гарнитура

Arial

Arial

Arial

Arial

Стиль

Вес

bold

bold

bold

bold

Цвет

brown

navy

navy

navy

Размер

20pt

18pt

14pt

12pt

Выравнивание

center

left

left

left

Украшение

Расстояние между буквами

2pt

2pt

Расстояние между словами

4pt

3pt

5

Гарнитура

Comic Sans MS

Comic Sans MS

Comic Sans MS

Comic Sans MS

Стиль

Вес

bold

bold

bold

bold

Цвет

darkmagenta

darkred

darkred

darkred

Размер

22pt

18pt

16pt

14pt

Выравнивание

center

center

left

left

Украшение

underline

underline

underline

Расстояние между буквами

2pt

Расстояние между словами

4pt

6

Гарнитура

Tahoma

Tahoma

Tahoma

Tahoma

Стиль

italic

italic

italic

Вес

bold

bold

bold

bold

Цвет

darkblue

darkgeen

darkgeen

darkgeen

Размер

24pt

20pt

16pt

14pt

Выравнивание

center

left

left

left

Украшение

underline

underline

underline

Расстояние между буквами

2pt

Расстояние между словами

4pt

7

Гарнитура

Arial

Times New Roman

Times New Roman

Times New Roman

Стиль

Вес

bold

bold

bold

bold

Цвет

darkgreen

darkcyan

darkcyan

darkcyan

Размер

22pt

18pt

14pt

12pt

Выравнивание

center

center

left

left

Украшение

underline

underline

underline

Расстояние между буквами

2pt

2pt

Расстояние между словами

4pt

3pt

8

Гарнитура

Comic Sans MS

Times New Roman

Times New Roman

Times New Roman

Стиль

italic

italic

italic

Вес

bold

bold

bold

bold

Цвет

maroon

darkgreen

darkgreen

darkgreen

Размер

24pt

20pt

16pt

14pt

Выравнивание

center

left

left

left

Украшение

underline

underline

underline

Расстояние между буквами

2pt

2pt

Расстояние между словами

4pt

3pt

9

Гарнитура

Verdana

Verdana

Verdana

Verdana

Стиль

italic

italic

Вес

bold

bold

bold

bold

Цвет

indigo

darkred

darkred

darkred

Размер

22pt

16pt

14pt

12pt

Выравнивание

center

center

left

left

Украшение

underline

underline

Расстояние между буквами

2pt

Расстояние между словами

4pt

10

Гарнитура

Arial

Times New Roman

Arial

Arial

Стиль

italic

Вес

bold

bold

bold

bold

Цвет

crimson

blue

blue

blue

Размер

24pt

18pt

14pt

12pt

Выравнивание

center

center

left

left

Украшение

Расстояние между буквами

2pt

2pt

Расстояние между словами

4pt

3pt

11

Гарнитура

Tahoma

Tahoma

Tahoma

Times New Roman

Стиль

italic

italic

Вес

bold

bold

bold

bold

Цвет

orange

indigo

blue

blue

Размер

22pt

16pt

14pt

12pt

Выравнивание

center

left

left

left

Украшение

Расстояние между буквами

2pt

2pt

Расстояние между словами

4pt

3pt

12

Гарнитура

Verdana

Comic Sans MS

Times New Roman

Times New Roman

Стиль

Вес

bold

bold

bold

bold

Цвет

fuchsia

red

darkgreen

darkgreen

Размер

24pt

20pt

16pt

14pt

Выравнивание

center

center

left

left

Украшение

underline

underline

underline

Расстояние между буквами

2pt

Расстояние между словами

4pt

7. Вставьте в таблицу стилей правила для селекторов p (обычный абзац), p.selected (выделенный абзац) и p.def (абзац, содержащий определение) в соответствии со своим вариантом (табл. 4.22). Прочерк в значении свойства означает, что данное свойство не задается.

Таблица 4.22. Правила стилей для абзацев Web-страницы

Вариант

Правила стилей

Наименование свойства

Значение свойства

p

p.selected

p.def

1

Гарнитура

Times New Roman

Verdana

Verdana

Размер

12pt

14pt

14pt

Стиль

italic

italic

Цвет

black

black

black

Цвет фона

lavender

ivory

Отступ в первой строке

25pt

25pt

25pt

Ширина левого поля

30pt

Ширина левой границы

8pt

Цвет левой границы

red

Стиль левой границы

ridge

Отступ от левой границы

6pt

Ширина всех границ

10pt

Цвет всех границ

green

Стиль всех границ

outset

Отступ от всех границ

5pt

2

Гарнитура

Arial

Times New Roman

Times New Roman

Размер

12pt

12pt

12pt

Стиль

italic

Цвет

black

indigo

darkgreen

Цвет фона

yellow

cornsilk

Отступ в первой строке

25pt

Ширина левого поля

40pt

Ширина левой границы

6pt

Цвет левой границы

green

Стиль левой границы

dotted

Отступ от левой границы

7pt

Ширина всех границ

8pt

Цвет всех границ

aliceblue

Стиль всех границ

inset

Отступ от всех границ

6pt

3

Гарнитура

Times New Roman

Times New Roman

Times New Roman

Размер

12pt

14pt

14pt

Стиль

Цвет

black

black

darkred

Цвет фона

limonchiffon

floralwhite

Отступ в первой строке

20pt

20pt

20pt

Ширина левого поля

30pt

Ширина левой границы

5pt

Цвет левой границы

green

Стиль левой границы

dashed

Отступ от левой границы

8pt

Ширина всех границ

6pt

Цвет всех границ

darksalmon

Стиль всех границ

solid

Отступ от всех границ

8pt

4

Гарнитура

Arial

Arial

Arial

Размер

12pt

12pt

14pt

Стиль

Цвет

black

indigo

darkgreen

Цвет фона

mintcream

azure

Отступ в первой строке

25pt

20pt

Ширина левого поля

25pt

Ширина левой границы

5pt

Цвет левой границы

navy

Стиль левой границы

solid

Отступ от левой границы

9pt

Ширина всех границ

7pt

Цвет всех границ

fuchsia

Стиль всех границ

dotted

Отступ от всех границ

7pt

5

Гарнитура

Times New Roman

Arial

Arial

Размер

14pt

14pt

14pt

Стиль

italic

Цвет

black

black

darkblue

Цвет фона

lightyellow

oldlace

Отступ в первой строке

25pt

25pt

Ширина левого поля

50pt

Ширина левой границы

8pt

Цвет левой границы

darkorchid

Стиль левой границы

dashed

Отступ от левой границы

6pt

Ширина всех границ

12pt

Цвет всех границ

green

Стиль всех границ

outset

Отступ от всех границ

5pt

6

Гарнитура

Tahoma

Arial

Arial

Размер

14pt

12pt

12pt

Стиль

italic

Цвет

black

darkgreen

black

Цвет фона

ghostwhite

cyan

Отступ в первой строке

30pt

Ширина левого поля

40pt

Ширина левой границы

12pt

Цвет левой границы

blue

Стиль левой границы

double

Отступ от левой границы

6pt

Ширина всех границ

6pt

Цвет всех границ

green

Стиль всех границ

outset

Отступ от всех границ

8pt

7

Гарнитура

Verdana

Times New Roman

Arial

Размер

14pt

12pt

14pt

Стиль

italic

Цвет

black

darkblue

darkblue

Цвет фона

yellow

ivory

Отступ в первой строке

30pt

Ширина левого поля

40pt

Ширина левой границы

12pt

Цвет левой границы

cyan

Стиль левой границы

groove

Отступ от левой границы

6pt

Ширина всех границ

6pt

Цвет всех границ

brown

Стиль всех границ

dotted

Отступ от всех границ

7pt

8

Гарнитура

Times New Roman

Arial

Comic Sans MS

Размер

14pt

14pt

14pt

Стиль

italic

italic

Цвет

black

black

gray

Цвет фона

lemonchiffon

whitesmoke

Отступ в первой строке

25pt

Ширина левого поля

50pt

Ширина левой границы

7pt

Цвет левой границы

navy

Стиль левой границы

dotted

Отступ от левой границы

8pt

Ширина всех границ

6pt

Цвет всех границ

red

Стиль всех границ

dashed

Отступ от всех границ

6pt

9

Гарнитура

Tahoma

Arial

Arial

Размер

12pt

14pt

14pt

Стиль

italic

Цвет

black

darkgreen

red

Цвет фона

khaki

honeydew

Отступ в первой строке

30pt

Ширина левого поля

60pt

Ширина левой границы

12pt

Цвет левой границы

navy

Стиль левой границы

double

Отступ от левой границы

7pt

Ширина всех границ

10pt

Цвет всех границ

maroon

Стиль всех границ

ridge

Отступ от всех границ

6pt

10

Гарнитура

Arial

Verdana

Verdana

Размер

14pt

12pt

14pt

Стиль

italic

Цвет

black

indigo

white

Цвет фона

yellow

black

Отступ в первой строке

25pt

Ширина левого поля

30pt

Ширина левой границы

5pt

Цвет левой границы

darkgreen

Стиль левой границы

solid

Отступ от левой границы

7pt

Ширина всех границ

10pt

Цвет всех границ

aliceblue

Стиль всех границ

inset

Отступ от всех границ

7pt

11

Гарнитура

Arial

Verdana

Verdana

Размер

14pt

12pt

14pt

Стиль

italic

Цвет

black

brown

white

Цвет фона

aliceblue

darkred

Отступ в первой строке

25pt

Ширина левого поля

30pt

Ширина левой границы

5pt

Цвет левой границы

darkgreen

Стиль левой границы

solid

Отступ от левой границы

7pt

Ширина всех границ

10pt

Цвет всех границ

aquamarine

Стиль всех границ

outset

Отступ от всех границ

6pt

12

Гарнитура

Tahoma

Comic Sans MS

Comic Sans MS

Размер

14pt

14pt

14pt

Стиль

italic

Цвет

black

purple

white

Цвет фона

oldlace

darkgreen

Отступ в первой строке

30pt

Ширина левого поля

50pt

Ширина левой границы

5pt

Цвет левой границы

brown

Стиль левой границы

dashed

Отступ от левой границы

6pt

Ширина всех границ

10pt

Цвет всех границ

red

Стиль всех границ

inset

Отступ от всех границ

6pt

8. Вставьте в таблицу стилей правила для селекторов span.bold (жирное выделение) со свойством веса шрифта, равным bold, span.italic (выделение курсивом) со свойством стиля шрифта, равным italic, span.underline (выделение подчеркиванием) со свойством украшения текста, равным underline, и span.color (выделение цветом) со свойством цвета фона в соответствии со своим вариантом (табл. 4.22):  

1) yellow; 2) aquamarine; 3) azure; 4) lime; 5) mistyrose;

6) lightyellow; 7) gold; 8) thistle; 9) aqua; 10) peachpuff;

11) khaki; 12) lightpink.

9. Проверьте вывод стилей для заголовков и обычного абзаца в Web-браузере Internet Explorer (остальные стили будут использованы в лабораторной работе 2-05). Сохраните созданный вами документ HTML для Web-страницы. Этот документ будет использоваться в лабораторных работах 2-5, 2-06 и 2-07.

5. Содержание отчета

В отчете должен быть представлено содержимое файла с исходным текстом документа HTML для вашего варианта.

6. Вопросы для самоконтроля

  1.  Какая версия HTML является действующей на сегодняшний день?
  2.  Какие существуют типы элементов и какова форма записи элемента и его атрибутов?
  3.  Какова структура Web-страницы?
  4.  Чем отличается заголовок, задаваемый в   элементе <title> от заголовков, задаваемых в элементах <h1><h6>?
  5.  Какие режимы работы и типы редакторов используются при проектировании Web-страниц?
  6.  Как можно выровнять текст и горизонтальную линию относительно экрана дисплея?
  7.  Как в Web-страницу можно вставить предварительно отформатированный текст?
  8.  Как в Web-страницу можно вставить в качестве текста служебные символы и символы, отсутствующие на клавиатуре?
  9.  Какие способы форматирования можно использовать в Web-страницах?
  10.  Чем отличаются логические стили форматирования от физических стилей?
  11.  Как в значениях атрибутов в элементах Web-страницы можно задать цвет?
  12.  Как можно указать цвет и размер текста для всего документа и для его отдельных фрагментов?
  13.  Как вставляется изображение в Web-страницу?
  14.  Как задается выравнивание изображения, и какие значения оно может принимать?
  15.  Как можно прервать «обтекание» изображения текстом в нужном месте?
  16.  Какие типы списков определены в языке HTML?
  17.  Какие символы нумерации можно задать в упорядоченных списках?
  18.  Как можно задать продолжение нумерации в упорядоченных списках?
  19.  Какие типы маркеров можно задать в неупорядоченных списков?
  20.  Как в списках определений задается определение и его расшифровка?
  21.  Как описываются метки в документе HTML?
  22.  Как формируются ссылки на внешний документ HTML?
  23.  Как можно сформировать гиперссылку на фрагмент документа?
  24.  Как сделать изображение гипертекстовой ссылкой?
  25.  Как задать толщину рамки вокруг таблицы?
  26.  Как можно изменить расстояние между рамками ячеек и расстояние от рамки ячейки до содержимого ячейки?
  27.  В каких случаях, и каким образом задается фиксированная ширина и высота таблицы?
  28.  Как можно задать расположение таблицы по центру в окне просмотра?
  29.  Как можно задать обтекание таблицы текстом?
  30.  Как можно задать цвет фона таблицы или рисунок в качестве фона?
  31.  Какими элементами и атрибутами определяется расположение заголовка таблицы?
  32.  С помощью каких элементов описывается структура таблицы в HTML?
  33.  Как отформатировать содержимое ячеек таблицы по горизонтали и вертикали?
  34.  Какие средства задания цвета рамки таблицы и форматирования колонок таблицы можно использовать в Internet Explorer?
  35.  Каковы основные компоненты карты-изображения?
  36.  Какими двумя способами можно реализовать карты-изображения?
  37.  Как задается ссылка на карту изображение и как описывается карта-изображение?
  38.  Какие формы активных областей допустимы в карте-изображении и в каком элементе они задаются?
  39.  Для каких целей используется форма активной области default?
  40.  Как задаются координаты активной области для разных форм активных областей?
  41.  Для  каких целей используется атрибут nohref в элементе <area>?
  42.  Чем отличается документ, содержащий описание структуры фреймов, от обычного документа HTML?
  43.  Как в элементе <frameset> задается разбиение окна просмотра на фреймы?
  44.  Для каких целей используется атрибут name в элементе <frame>?
  45.  Как можно управлять выводом полос прокрутки для фреймов?
  46.  Как отменить вывод рамки между фреймами?
  47.  Как в элементе <a> организуется гиперссылка с выводом Web-страницы в заданное окно фрейма?
  48.  Какие единицы измерения используются в таблицах стилей?
  49.  Как определяются стили?
  50.  Каков синтаксис правила CSS?  Какие элементы могут задаваться в качестве селектора?
  51.  Приведите краткую характеристику каждого типа элементов, используемых в селекторах.
  52.  Как можно задать одинаковые свойства для нескольких элементов и как задаются контекстные селекторы?
  53.  Какими способами можно задавать стили в Web-странице? Как реализуется каждый способ?
  54.  Каковы правила приоритетности стилей?
  55.  Какие параметры шрифта можно задать с помощью стилей?
  56.  Какие характеристики блоков текста можно задать с помощью стилей?
  57.  Как задается цвет текста и фона с помощью стилей?
  58.  Какие возможности по размещению фонового рисунка на Web-странице реализуются с помощью стилей?
  59.  Как определяется модель документа в CSS?
  60.  Какие свойства определены для поля, границы и отступа от границы?
  61.  Какие возможности по визуальному форматированию элементов обеспечиваются с помощью CSS?
  62.  Какие возможности по форматированию списков и таблиц обеспечиваются с помощью CSS?


 

А также другие работы, которые могут Вас заинтересовать

18559. Математические модели: аналитические, алгоритмические 17.94 KB
  Математические модели: аналитические алгоритмические. Математические модели можно разделить на: аналитическиеалгоритмическиекомбинированные.Для аналитического моделирования характерно то что для описания процессов функционирования системы используются сист
18560. Математические модели: имитационные, теоретические, эмпирические 17.12 KB
  Математические модели: имитационные теоретические эмпирические. Имитационная модель определяется как такая алгоритмическая ММ которая отражает поведение объекта во времени при задании различных внешних воздействий на объект. Теоретические ММ создаются в резуль...
18561. Методика получения математических моделей 18.33 KB
  Методика получения математических моделей. включает в себя следующие операции: 1. Выбор свойств объекта которые подлежат отражению в модели. Выбор основан на анализе возможных применений модели и определяет степень универсальности ММ. 2. Сбор исходной информаци...
18563. Компонентные и топологические уравнения на иерархическом уровне Б 317.82 KB
  Лекция 9 Компонентные и топологические уравнения на иерархическом уровне Б. При получении математических моделей ММ элементов уровня Б чаще применяют теоретический подход. При этом сложный объем разбивается на элементы участки. Далее производится усреднение зна...
18565. Объект проектирования и его математическая модель 70.25 KB
  Лекция 3. Объект проектирования и его математическая модель. Математическая модель – это совокупность математических объектов чисел переменных векторов множеств и т.д. и отношений между ними которая адекватно отображает некоторые свойства проектируемого объекта...
18566. ОБЩИЕ СВЕДЕНИЯ О ПРОЕКТИРОВАНИИ ТЕХНИЧЕСКИХ ОБЪЕКТОВ 221 KB
  ОБЩИЕ СВЕДЕНИЯ О ПРОЕКТИРОВАНИИ ТЕХНИЧЕСКИХ ОБЪЕКТОВ Инженерная деятельность человека связанна прежде всего с разработкой технических объектов с их проектированием. Проектирование это комплекс работ по изысканиям исследованиям расчетам и конструированию и
18567. Системы автоматизированного проектирования и их место среди других автоматизированных систем 99 KB
  Системы автоматизированного проектирования и их место среди других автоматизированных систем Структура САПР Как и любая сложная система САПР состоит из подсистем рис. 1.1. Различают подсистемы проектирующие и обслуживающие. Проектирующие подсистемы непосредствен...