Стилевая информация заголовка Элемент style

<!element style - - cdata -- стилевая информация --
<!attlist style

	%i18n;	-- lang, dir, для использования с title --
	type cdata #implied	-- тип содержимого internet для стилевого языка --
	media cdata #implied	-- предназначено для использования в этих средах --
	title cdata #implied	-- рекомендуемый title -- >

Описание атрибутов

type = cdata

Этот атрибут специфицирует язык стилевого листа (заменяет значение по умолчанию). Стилевой язык специфицируется также как и тип среды Интернет (internet media type) (т.е. "text/css").

media cdata-list

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

	screen:	Вывод на экран дисплей (без многостраничной поддержки). Значение по умолчанию.
	print:	Постраничный вывод на непрозрачную бумагу. Предназначен также для вывода на экран в режиме preview.
	projection:	Вывод на проектор.
	braille:	Вывод кодов Брайля на тактильное устройство
	speach:	Вывод на речевой синтезатор.
	all:	Вывод на все устройства сразу.

Элемент style позволяет разработчику установить стилевые правила в заголовке документа. HTML допускает любое число элементов style в секции head документа. Агент пользователя, который не поддерживает стилевые листы или специфический стилевой язык, используемый элементом style, должен прятать содержимое элемента style. Управление средой особенно интересно, когда применяются внешние стилевые листы, так как агент пользователя может сэкономить время, копируя через сеть только те стилевые листы, которые используются на данном устройстве вывода.

Следующая декларация CSS style устанавливает рамку вокруг каждого Н1 элемента в документе и центрирует ее на странице.

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

</style>

</head>

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

		h1.myclass {border-width: 1; border: solid; text-align: center}
	</style>

</head>
<body>

	<h1 class="myclass"> this H1 is affected by our style </h1>
	<h1 this one is not affected by our style </h1>

</body>

И наконец, для того чтобы ограничить зону действия стилевой информации одним случаем Н1, установим атрибут ID.

<head>

	<style type="text/css">
		h1.myid {border-width: 1; border: solid; text-align: center}
	</style>

</head>
<body>

	<H1 class="myclass"> this H1 is not affected </h1>
	<H1 this one is affected by style </H1>
	<H1> this h1 is not affected </H1>

</body>

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

<head>

	<style type="text/css">
		span.sc-ex { font-variant: small-caps }
	</style>

</head>
<body>

	<p><span id="sc-ex"> the first</span> few words of
		this paragraph are in small-caps

</body>

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

<head>

	<style type="text/css">
		div.abstact {text-align: justify }
	</style>

</head>
<body>

	<div class="abstract">
	<p>the chieftain product range is our market winner for the coming year.
	this report sets out how to position chieftain against competing products.
	<p>chieftain replaces the commander range, which will remain on the
	price list until further notice.

</div>
</body>

23.2. Типы среды

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

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

Атрибут media специфицирует среду вывода для формирования стилевых правил. Установив атрибут media, разработчик может позволить агенту пользователя избежать копирования через сеть стилевых листов, не используемых в данном документе. Ниже предлагается пример деклараций для элемента Н1. При отображении на экране текст будет голубым и выровненным по центру, при печати текст будет выровнен по центру. Предусмотрена возможность вывода и на речевой синтезатор.

<head>

	<style type="text/css" media="screen">
		h1 { color: blue }
	</style>

type="text/css" media="screen">

type="text/css" media="print">

type="text/css" media="speach">

</head>

Содержание раздела