Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

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

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного...

Динамика и детерминанты показателей газоанализа юных спортсменов в восстановительном периоде после лабораторных нагрузок до отказа...

Интересное:

Уполаживание и террасирование склонов: Если глубина оврага более 5 м необходимо устройство берм. Варианты использования оврагов для градостроительных целей...

Что нужно делать при лейкемии: Прежде всего, необходимо выяснить, не страдаете ли вы каким-либо душевным недугом...

Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Модели отображения блочных элементов

2021-01-31

0.00 из 5.00 0 оценок

Заказать работу

⇐ ПредыдущаяСтр 11 из 16Следующая ⇒

Учитывая популярность браузера Internet Explorer 6.0, можно по праву сказать, что существует две модели отображения блочных элементов, или так называемых боксовых моделей (box model):

Модель Internet Explorer (IE)
Стандартная модель W3C

Модель IE говорит о том, что, если вы определяете ширину (width) блочного элемента (например элемента DIV), то величина отступа (padding) и ширина границы (border-width) входят в состав этой величины. Стандартная модель W3C утверждает обратное: величина отступа и ширина границы должны дополнять ширину элемента. В итоге имеем два абсолютно разных значений реальной (отображаемой) ширины объекта при одних и тех же значениях width, padding и border-width. Рассмотрим пример с шириной объекта равную 200 пикселей, внутренним отступом в 20 пикселей и шириной границы, чтоже равной 20 пикселям. Получаем следующую запись в CSS:

CSS фрагмент для объекта

width: 200px;

padding: 20px;

border-width: 20px;

Реальная (отображаемая) ширина объекта для модели Internet Explorer равна 200 пикселей, для модели W3C:

200 + 2*20 + 2*20 = 280 пикселей.

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

Рисунок 6‑2. Модели отображения блочных элементов.

Использование модели W3C обязывает делать дополнительные вычисления при работе с CSS. К тому же модель Internet Explorer кажется более логичной с точки зрения взаимного расположения и взаимодействия объектов. Тем не менее, стандарт есть стандарт, модель Internet Explorer следует считать устаревшей, а ориентироваться нужно на модель W3C.

Браузер Internet Explorer 6.0 поддерживает обе модели, в зависимости от того, какой тип документа указан в начале документа. Имеет значение также и то, приведена полная его запись или укороченная, без URL на DTD. Таблица, приведенная ниже, описывает поведение Internet Explorer 6.0 в зависимости от записи DOCTYPE.

Таблица 6‑2 – Конструкция DOCTYPE и модель отображения блочных элементов Internet Explorer 6.0

Конструкция DOCTYPE	Режим Internet Explorer 6.0
DOCTYPE не указан	Модель IE
HTML 4.01 – не указан URL в DOCTYPE	Модель IE
HTML 4.01 – полная запись	Модель W3C
XHTML 1.0 – не указан URL в DOCTYPE	Модель W3C
XHTML 1.0 – полная запись	Модель W3C

Следует отметить, что есть еще одно принципиальное отличие между двумя моделями в Internet Explorer 6.0. Оно состоит в том, что стандартная модель рассматривает элемент html как отображаемый, который является контейнером для элемента body. Пример, приведенный ниже, поможет понять эту разницу.

Пример отображения свойств элемента HTML

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

"http://www.w3.org/TR/html4/loose.dtd">

<head>

<title>Style For HTML Element Sample</title>

</head>

<div style="background:yellow;">Content goes here...</div>

</body>

</html>

Если убрать описание DOCTYPE, Internet Explorer 6.0 покажет совершенно иную картину.

Заголовок документа

После описания типа документа, идут элементы: html, head и body (или frameset). В случае XHTML, элемент html должен содержать объявление пространства имен, используемое по умолчанию для всех входящих в него элементов. Это обусловлено тем, что XHTML это разновидность XML, а по правилам XML мы просто обязаны это сделать. Впрочем, не исключено, что если вы этого не сделаете, то никто (ни браузер, ни W3C-валидатор, ни тот, кто будет в дальнейшем работать с вашим документом) этого и не заметит. Мы не будем рассматривать все особенности спецификации XML, к тому же, я уверен, что пытливый читатель может самостоятельно в этом разобраться. Достаточно будет сказать, что описание пространства имен делается при помощи атрибута xmlns.

Описание пространства имен в XHTML

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

"DTD/xhtml1-transitional.dtd">

<head>

…

</head>

<body>

…

</body>

</html>

Следующее, что нужно сделать, это указать в какой кодировке создается ваш документ. Это делается при помощи тега meta в заголовке документа, внутри элемента head.

Описание кодировки документа

Кодировка задается непосредственно как значение параметра charset в HTTP заголовке content-type. Разумеется, что указанная кодировка должна соответствовать физически той кодировке, в которой создан данный документ. Нет никакого смысла указывать, например, кодировку ISO-8859-1 в то время, когда документ у вас создан в кодировке UTF-16. Используемая кодировка зависит от того, для чего и для кого создается документ, какие языки в нем используются. Если у вас нет специальных требований, или вы не уверены, какую кодировку нужно использовать, используйте UTF-8. Кодировка UTF-8 весьма удобна из-за своей совместимости с набором символов Latin-1. Если не считать текстового наполнения, такой документ может быть легко отредактирован в любом редакторе, не поддерживающем юникод, и, в частности, кодировку UTF-8. К тому же, вы не будете испытывать неудобств если внезапно окажется, что в вашем документе должна присутствовать пара строк на японском языке, а вы никак не могли этого предусмотреть заранее. Документы XHTML в дополнение ко всему, могут содержать XML-заголовок с указанием кодировки. Этот заголовок должен идти в самой первой строке документа, что соответствует спецификации XML.

XML заголовок в XHTML документе

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

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

"DTD/xhtml1-transitional.dtd">

<head>

…

</head>

<body>

…

</body>

</html>

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

С технической точки зрения перечисленных пунктов вполне достаточно, чтобы документ правильно воспринимался браузером. Далее в заголовке документа следует перечень ключевых слов и краткое описание, характеризующее эту страницу или сайт в целом, директивы для поисковых роботов и пр. Их нужно указывать, если на то есть специальные требования. Более подробно об оптимизации страницы для поисковых систем написано в разделе 7. Следом за перечнем тегов meta идет немаловажный элемент title. Затем подключение внешнего CSS-файла при помощи элемента style или элемента link.

Возможно 3 варианта подключения CSS:

Все стили описываюся в HTML:

div {…}

</style>

Cтили загружаются из внешнего файла

или

Параметр media указывает какому типу устройств соответствует данный блок стилей. Cписок распознаваемых дескрипторов устройств:

s creen - предназначен для дисплеев без постраничной разбивки.

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

tv - предназначен для устройств типа телевизора (для которых характерны низкое разрешение, цветное изображение, ограниченная прокрутка на экране).

projection - предназначен для проекторов.

handheld - предназначен для портативных устройств (небольшие монохромные экраны с ограниченной полосой частот, растровая графика).

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

braille - предназначен для устройств чтения азбуки брайля.

aural - предназначен для речевых синтезаторов.

all - предназначен для всех устройств.

Далее следует подключение, при надобности, JavaScript.

Скрипт находится в HTML:

function(){

…

}

//--></script>

Скрипт загружается из внешнего файла

Теперь переходим к рассмотрению разделов, касающихся тела документа.

⇐ Предыдущая 6 7 8 9 101112 13 14 15 Следующая ⇒

Поделиться с друзьями:

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

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

Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...

Архитектура электронного правительства: Единая архитектура – это методологический подход при создании системы управления государства, который строится...