Архив Апрель 2009 г.

Импортированные внешние таблицы стилей

28 Апрель 2009 | Автор: admin

Второй способ загрузки внешней таблицы стилей импортирует файлы, применяя специальную директиву (так называемое правило at) в теге <style>:

<head>
<title>Импортированный стиль</title>
<style type=»text/css»>
<!–
@import url(http://www.kumquats.com/styles/gen_styles.css);
@import «http://www.kumquats.com/styles/spec_styles.css»;
body {background: url(backgrounds/marble.gif)}
–>
</style>
</head>

Директива @import ожидает параметр в виде URL, указывающего путь в сети к внешней таблице стилей. Как показано в этом примере, URL может быть заключенной в двойные кавычки строкой, заканчивающейся точкой с запятой, или следовать за ключевым словом url, так же оканчиваясь точкой с запятой, но помещаясь при этом в скобки. URL может быть абсолютным или относительным, отсчитываемым от базового URL документа.

Команда @import должна появляться до любых традиционных стилевых правил, будь то в теге <style> или во внешней таблице стилей. В противном случае стандарт настаивает, чтобы броузер игнорировал ошибочную @import. Согласно стандарту CSS2 каскадирование происходит так: сначала импортируются различные таблицы стилей, затем обрабатываются правила, определенные на уровне документа, в результате выигрывает последний оставшийся стиль.

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

Категории: Каскадные таблицы стилей | Комментариев (0)

Присоединение внешних таблиц стилей при помощи тега link

26 Апрель 2009 | Автор: admin

Один способ загрузить внешнюю таблицу стилей – использовать тег <link> внутри тега

<head> в вашем документе:
<head>
<title>Присоединение стиля с помощью link</title>
<link rel=stylesheet type=»text/css»
href=»http://www.kumquats.com/styles/gen_styles.css»
title=»Синева»>
</head>
<body>
<h1>Я такой сииинииий!</h1>
…
<h1>И я тожеее сииинииий!</h1>

Напомним, что тег <link> связывает документ, в котором он содержится, с каким то другим документом в сети. В примере мы сообщаем броузеру, что документ, поименованный в атрибуте href, имеет тип stylesheet, как это указано в атрибуте type. Ссылка на внешнюю таблицу стилей в теге <link> требует указания атрибутов href и type. Кроме того, мы явно, причем добровольно, сообщаем броузеру, что отношение файла к нашему документу определяется значением stylesheet (таблица стилей). Мы также добавили атрибут title, определяющий название таблицы стилей, создав возможность для ссылок на нее в будущем.

Тег <link> и его обязательные атрибуты href и type должны появляться только в заголовке документа. URL таблицы стилей может быть абсолютным или относительным, отсчитываемым от базового URL документа.

Категории: Каскадные таблицы стилей | Комментариев (0)

Внешние таблицы стилей

22 Апрель 2009 | Автор: admin

Кроме того, можно помещать определения стилей в отдельный документ (текстовый файл, MIME типом которого является text/css) и импортировать такие «внешние» таблицы стилей в документы. Чтобы придать своим документам унифицированный вид, пользуйтесь единой таблицей стилей для других документов в этом собрании и даже
для других собраний документов. Поскольку внешняя таблица является отдельным файлом и загружается броузером из сети, ее можно хранить где угодно, использовать многократно и даже применять чужие таблицы стилей.

Например, допустим, что мы создали файл gen_styles.css, включающий следующее стилевое правило:

h1 {color: blue; font style: italic}

Можно предложить броузеру прочитать файл gen_styles.css для каждого документа из нашей подборки, а он в ответ покрасит содержимое каждого тега <h1> в синий цвет и выведет текст курсивом. Конечно, это произойдет только при условии, что машина пользователя способна совершать такие фокусы со стилем, на ней установлен работающий с таблицами стилей броузер и назначения стиля не отменены на уровне документа или встроенным определением.

Загрузить в документ внешнюю таблицу стилей можно двумя способами: при помощи тега <link> или директивы @import.

Категории: Каскадные таблицы стилей | Комментариев (0)

Таблицы стилей на уровне документа

19 Апрель 2009 | Автор: admin

Действительная сила таблиц стилей становится более очевидной, когда вы помещаете список правил представления в начало HTML-или XHTML-документа. Расположенные внутри тега <head> и заключенные в собственный тег <style> (с закрывающим </style>) таблицы стилей на «уровне документа» действуют на все вхождения тегов в документ, за исключением тех, что содержат обладающие более высоким приоритетом встроенные определения с атрибутом style.

Все, что находится между тегами <style> и </style>, рассматривается как часть стилевых правил, которые должны быть применены к документу. На самом деле содержимое тега <style> не относится к HTML или XHTML и не подчиняется обычным правилам размеченного содержимого. Тег <style>, таким образом, позволяет вставить в документ
чужеродную информацию, которую броузер использует для форматирования тегов.

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

<head>
<title>Все синее</title>
<style type=»text/css»>
<!
/* делаем все заголовки 1 го уровня синими и курсивом */
h1 {color: blue; font style: italic}
>
</style>
</head>
<body>
<h1> Я такой сииинииий!</h1>
…
<h1>И я тожеее сииинииий!</h1>

Категории: Каскадные таблицы стилей | Комментариев (0)

Встроенные стили. Атрибут style

14 Апрель 2009 | Автор: admin

Встроенный стиль – это простейший способ применения стиля к тегу. Просто включите в тег атрибут style со списком свойств и их значений. Броузер использует их при выводе содержимого в соответствии с требованиями тега.

К примеру, следующий стиль предлагает отобразить текст заголовка уровня 1, «Я такой сииинииий!», применяя не только свойственные броузеру стилевые характеристики тега <h1>, но также синий цвет и курсив:

<h1 style=»color: blue; font style: italic»> Я такой сииинииий!</h1>

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

Категории: Каскадные таблицы стилей | Комментариев (0)

Элементы стилей

12 Апрель 2009 | Автор: admin

На самом простом уровне стиль – это не что иное, как правило, указывающее броузеру, как выводить содержимое какого то определенного HTML или XHTML-тега. У каждого тега есть ряд ассоциированных с ним стилевых свойств, значения которых определяют, как этот тег воспроизводится броузером. Правило приписывает определенное значение одному или нескольким свойствам тега. Например, большинство тегов имеют свойство color, значение которого определяет цвет, который современные GUI броузеры должны использовать при отображении содержимого тега. К числу других свойств относятся шрифт, интервал между строками, поля, рамки, громкость звука и тембр, которые будут детально рассмотрены ниже в этой главе.

Существует три способа присоединения стиля к тегу: встроенные в теги стили, стили документа и внешние таблицы стилей. Вы можете использовать одну или несколько таблиц для документа. Броузер либо объединяет определения каждого из стилей, либо переопределяет характеристики стиля для содержимого тега. Заимствованные из этих
различных источников, они применяются к документу, сочетаясь и определяя свойства результирующего стиля, которые, подобно каскаду водопадов, ступенчато ниспадают, начиная с внешних таблиц, продолжая на уровне документа и оканчивая свой путь во встроенных стилях. Этот каскад свойств и стилевых правил дал имя стандарту каскадных таблиц стилей.

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

Категории: Каскадные таблицы стилей | Комментариев (0)

Что такое каскадные таблицы стилей (CSS)

9 Апрель 2009 | Автор: admin

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

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

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

В начале 1996 года консорциум WorldWideWeb Consortium (W3C) собрал проектные разработки, определяющие каскадные таблицы стилей (CSS) для HTML. Этот проект быстро созрел до рекомендованного стандарта. В середине 1998 года W3C расширил изначальные спецификации и создал CSS2, который включил в себя стандарты представления для множества средств вывода информации, отличных от хорошо всем знакомых экранных броузеров, наряду с другими усовершенствованиями.

Консорциум W3C продолжает работать над младшей версией (2.1) и черновым проектом CSS3, но они пока не актуальны. Вообще, никакой современный броузер или другой веб клиент сети не отвечает вполне стандарту CSS2. Поскольку и так ясно, что согласие с детищем, предложенным W3C, будет в конце концов достигнуто, мы в этой главе за
тронем все компоненты стандарта CSS2. Как всегда, будет точно указано, что уже реально существует, что только предлагается и что в действительности поддерживается.

Категории: Каскадные таблицы стилей | Комментариев (0)

Как использовать списки

4 Апрель 2009 | Автор: admin

Используйте неупорядоченные списки для:

• Собраний гиперссылок
• Коротких, не связанных иерархически фрагментов текста
• Выделения ключевых моментов презентации
Используйте упорядоченные списки для:
• Оглавлений
• Перечня предписаний
• Последовательных разделов текста
• Присоединения номеров к коротким фразам, на которые, возмож
но, придется где то сослаться
Используйте списки определений для:
• Словарей
• Создания маркеров элементов списка (поместите в тег <dt> малень
кую пиктограмму)
• Любых списков вида имя/значение

Категории: Форматированные списки | Комментариев (0)

Списки определений

2 Апрель 2009 | Автор: admin

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

Тег <dl>
Список определений заключен между тегами <dl> и </dl>. Внутри этого тега каждый элемент списка состоит из двух частей – термина и следующего за ним определения или объяснения. Вместо тега <li> для выделения элементов используется тег <dt> (содержащий термин) и следующий за ним тег <dd> (содержащий определение или объяснение).Если только вы не изменили характеристики отображения при помощи таблиц стилей, броузер будет выводить имя термина у левого края демонстрационного окна, а его определение ниже и с отступом. Если описываемый термин очень короткий (обычно не длиннее трех символов), броузер может поместить первую часть определения на той же строке.

<h3>Common Kumquat Parasites</h3>
<dl>
<dt>Leaf mites</dt>
<dd>The leaf mite will ravage the Kumquat tree, stripping it
of any and all vegetation.</dd>
<dt>Trunk dropsy</dt>
<dd>This microscopic larvae of the common opossum
chigger will consume the structural elements of the
tree trunk, causing it to collapse inward.</dd>
</dl>

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

Тег <dt>
Этот тег устанавливает компонент, соответствующий термину списка определений. Он имеет смысл, только если находится в списке перед тегом <dd>, содержащим определение или объяснение термина.
Обычно определяемый термин, следующий за тегом <dt>, краток. Это слово или несколько слов. Формально он может иметь любую длину. Длинный термин броузер может продолжить за пределы окна или, разбив его на несколько частей, поместить окончание на ту же строку, где начинается определение.
Поскольку конец тега <dt> непосредственно предшествует началу соответствующего тега <dd>, пропуск </dt> не приведет к двусмысленности, и закрывающий тег не является обязательным в HTML документах.XHTML, однако, настаивает на его присутствии, поэтому привыкайте включать его в свои документы.

Тег <dd>
Тег <dd> отмечает начало описания в элементе списка определений. В соответствии со стандартами HTML 4 и XHTML тег <dd> может встречаться только внутри списка определений, непосредственно следуя за тегом <dt> и термином. Вслед за тегом <dd> идет определение или объяснение термина.

За тегом <dd> могут следовать любые HTML/XHTML конструкции, включая другие списки, блоки текста и мультимедийные элементы.
Рассматривая все эти компоненты как обыкновенное содержимое тега, броузеры обычно отображают их с отступом. И поскольку начало другого термина, назначенного указанием (<dt>), или обязательный закрывающий тег списка </dl> недвусмысленно прекращают предшествующее определение, в теге </dd> нет необходимости, и его отсутствие делает исходный текст более пригодным для чтения. Итак, опять и снова: XHTML настаивает на присутствии закрывающих тегов в ваших документах, так что лучше привыкнуть вставлять в них </dd>.

Категории: Форматированные списки | Комментариев (0)