Добавил:

Low Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Московский государственный университет печати им. И. Федорова

Предмет:

Системы мультимедиа

Файл:

Шпаргалка По Мультимедийным Технологиям (Клим А. И.).doc

Скачиваний:

Добавлен:

07.10.2014

Размер:

544.77 Кб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2122 / 2522 23 24 25 > Следующая >>>

60. Стили: форматирование объектов

Атрибуты вставляемых элементов

width – ширина в процентах или пикселях, применяется в таблицах, разделителях (HR), а так же, для резервирования места рисункам. height – высота. Float – определяет положение нетекстовых элементов none – запрещает отделение от текста, left – выравнивает влево, right – выравнивает вправо. Clear – определяет отделение нетекстовых элементов от текста: none – нет отделения, текст располагается рядом с объектом, left – текст располагается под объектом, слева, right – текст под объектом, справа, both – текст под объектом с любой из сторон.

61. Сравнение возможностей обычного форматирования html и форматирования с помощью стилей.

До появления таблиц стилей, форматирование документов HTML представляло собой форматирование при помощи атрибутов, определяющих цвет, выравнивание, шрифты, размеры и т.д. Например, для того, чтобы представить любой отрывок текста жирным выделением, красного цвета, большого размера необходимо было прибегнуть к конструкции типа: <B><FONT color="red" size="5">текст</FONT></B>

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

В этом смысле, использование таблиц стилей стало самым, что ни есть оригинальным выходом из положения, который позволяет учесть все эти минусы. Суть метода заключается в предварительном задании стиля для любого из элементов документа. Например, назначив один раз, приведенный в примере стиль для тэга <B>, ничего не надо больше предпринимать, т.е. везде в документе, где встретится тэг <B>, он будет представлен в заданном виде. Налицо простота и оригинальность решения, когда сокращается размер кода, а смена дизайна сводится к изменению только параметров стиля.

62. Таблицы стилей: переопределение дескрипторов

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

Дескрипторы типа носителя

ScreenПодразумевается нестраничный экран.TtyПодразумевается носитель, использующий сетку символов фиксированного размера, такие как телетайп, терминалы или портативные устройства с ограниченными возможностями дисплея.TvПодразумевается устройство типа телевизора (низкое разрешение и цветопередача, ограниченная возможность прокрутки экрана).projection Подразумевается прожектор.handheldПодразумеваются портативные устройства (маленькие экраны, монохромные, растровая графика, частотные ограничения.Print Подразумевается страничный непрозрачный материал и документы, просматриваемые на экране в режиме предварительного просмотра печати.BrailleПодразумеваются устройства для слепых. Aural Подразумевается речевой синтезатор .all Подходит для всех устройств.

63. Внутренние таблицы стилей.

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

Например, эта небольшая CSS (таблица стилей), находящаяся в файле "special.css", устанавливает цвет текста параграфа в зелёный и окружает его сплошной красной рамкой:

P.special {

color : green;

border: solid red;

}

Авторы могут подключить эту таблицу стилей к основному документу HTML с помощью элемента LINK:

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

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

<HTML>

<HEAD>

</HEAD>

<BODY>

<P class="special">Текст в этом параграфе должен быть зелёного цвета.

</BODY>

</HTML>

Гибкость размещения информации о стиле.

Размещение таблиц стилей в отдельных файлах облегчает их повторное использование. Иногда необходимо включить инструкции представления в документ, к которому они применяются, путём группировки их в начале документа или установкой в атрибутах по всему телу документа. Чтобы облегчить работу со стилями на базе сайта, эта спецификация описывает, как использовать заголовки-"шапки"/headers HTTP для установки применения таблиц стилей в документах.

Независимость от конкретного языка таблицы стилей.

Эта спецификация не привязывает HTML к какому-то определённому языку таблиц стилей. Это позволяет использовать разные языки, например, простой для большинства пользователей и более сложный - для пользователей с узко специализированными потребностями. Примеры, данные ниже, используют язык CSS (Cascading Style Sheets) [CSS1], но возможны и другие языки таблиц стилей.

Каскадирование

Это возможность, предоставляемая некоторыми языками таблиц стилей, такими как CSS, соединять информацию стилей из различных источников.

Добавление стиля в HTML

Установка языка по умолчанию для таблиц стилей.

Авторы должны использовать элемент META для установки в данном документе языка по умолчанию для таблиц стилей. Для этого, например, автор должен поместить следующее объявление в HEAD своих документов:

Язык по умолчанию для таблиц стилей может быть также установлен в заголовках HTTP. Предыдущее объявление META эквивалентно объявлению в заголовке HTTP:

Content-Style-Type: text/css

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

Если какое-либо объявление META устанавливает "Content-Style-Type", это выражение определяет язык по умолчанию для таблиц стилей.

Иначе, если какое-либо объявление заголовка HTTP устанавливает "Content-Style-Type", тогда данное выражение определяет язык по умолчанию для таблиц стилей.

Иначе языком по умолчанию является "text/css".

Документы, содержащие элементы с установленным атрибутом style, но не определившие язык по умолчанию для таблиц стилей, являются некорректными.

Инлайн-стиль (внедрённый)

Определение атрибута

style = style [CN]

Этот пример CSS устанавливает цвет и шрифт текста параграфа:

<P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful?

Информация о стиле в заголовках: элемент STYLE

<!ELEMENT STYLE - - %StyleSheet -- информация о стиле -->

<!ATTLIST STYLE

%i18n; -- lang, dir, для использования с названием элемента --

type %ContentType; #НЕОБХОДИМ -- тип содержимого языка стилей --

media %MediaDesc; #ПРЕДПОЛАГАЕТСЯ -- создан для использования с этим носителем --

title %Text; #ПРЕДПОЛАГАЕТСЯ -- информативное название --

Начальный тег: необходим, Конечный тег: необходим

Атрибуты, определённые в другом месте

lang (язык), dir (направление текста)

title (название элемента)

Элемент STYLE позволяет разместить информацию стиля в "шапке" документа. HTML допускает любое количество элементов STYLE в разделе HEAD документа.

ПА, не поддерживающие таблицы стилей или не поддерживающие определённый язык таблиц стиля, используемый элементом STYLE, должны прятать содержимое элемента STYLE.

Правила иерархии и наследования стиля зависят от языка таблиц стилей.

Следующее объявление CSS STYLE помещает рамку вокруг каждого элемента H1 в документе и выравнивает их по центру страницы.

<HEAD>

H1 {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

Чтобы эта информация стиля воздействовала только на элементы H1 определённого класса, мы изменим её так:

<HEAD>

H1.myclass {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

<BODY>

<H1 class="myclass"> В этом H1 наш стиль действует </H1>

<H1> Здесь наш стиль не действует </H1>

</BODY>

Наконец, чтобы ограничить область видимости стилевой информации до одного объекта H1, установим атрибут id:

<HEAD>

#myid {border-width: 1; border: solid; text-align: center}

</STYLE>

</HEAD>

<BODY>

<H1 class="myclass"> На этот H1 не действует </H1>

<H1 id="myid"> На этот H1 действует </H1>

<H1> На этот H1 не действует </H1>

</BODY>

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

<<< < Предыдущая 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 2122 / 2522 23 24 25 > Следующая >>>