Элемент STYLE

Элемент STYLE

Внутри этого элемента задаются стили, используемые на странице. Таких элементов внутри заголовка страницы может быть несколько. Элемент STYLE поддерживает знакомые вам атрибуты lang и title, а также новые атрибуты type и media. Атрибут type указывает, какой язык задания стилей применяется в данном документе, а атрибут media определяет, на каком устройстве предполагается воспроизводить данный HTML-документ.

Для задания стилей в документе HTML 4.01 применяется язык CSS, который мы будем подробно рассматривать в гл. 7. Здесь же мы немного познакомим вас с возможностями этого языка, чтобы вы поняли их достоинства. Они настолько велики, что консорциум W3C отказался от использования атрибутов форматирования содержимого HTML-документов в элементах, применяемых для разметки текста, например задающих шрифт, его начертание и прочие характеристики. Все эти методы признаны устаревшими, на их смену пришли средства CSS.

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

Элемент STYLE позволяет реализовать возможности CSS в документе без применения внешних источников. Внутри этого элемента можно записывать код форматирования содержимого странички в формате CSS. Чтобы браузер знал формат кода, атрибуту type элемента STYLE присваивается значение text/css, сообщающее браузеру о применении средств CSS. Вот пример задания CSS-стиля:

<style type="text/css">

p.style {

color:#CC0000;

background:#9999CC;

word-spacing:20px;

}

Здесь запись p.style указывает, что для элемента P, создающего абзац, определяется стиль под названием style, который определяет для текста внутри абзаца цвет шрифта (color: #CC0000), фона (background: #9999CC) и расстояние между словами (word-spacing:2 0px).

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

<p class="style">

Текст со стилем style

</p>

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

Более того, с помощью элемента STYLE можно задать разные стили для вывода на экран и для вывода на печать. Это полезно, если в качестве фона вы используете темные тона или рисунок. Совершенно не обязательно оставлять подобное декорирование документа при выводе на печать, тем более что это потребует больше краски от принтера. Для этого нужно использовать атрибут media.

Значения атрибута media таковы:

• print – стили для вывода на печать;

• screen – стили для вывода на экран;

• all – стили для вывода на любое устройство.

На примере кода из листинга 1.6 рассмотрим основы синтаксиса CCS.

Листинг 1.6. Использование стилей

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

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

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

p.style {

color:#CC0000;

background:#9999CC;

word-spacing:20px;

}

.style2 {

color:#66FFFF;

background:#990000;

word-spacing:10px;

}

</style>

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

p.style {

color:#000000;

background:#FFFFFF;

word-spacing:20px;

}

.style2 {

color:#000000;

background:#FFFFFF;

word-spacing:10px;

}

</style>

<title>Использование стилей</title>

</head>

<body>

<p class="style">

Текст со стилем style

</p>

<p class="style2">

Текст со стилем style2

</p>

<table border="1" >

<tr>

<td class="style2">

Для ячейки применен стиль style2

</td>

</tr>

</table>

</body>

</html>

В примере создано два стиля: style можно применять только для элемента P (для обозначения этого перед названием стиля стоит название элемента), style2 – для любого объекта. В листинге 1.6 стиль style2 применен еще и для ячейки таблицы.

Результат обработки листинга 1.6 представлен на рис. 1.3.

Рис. 1.3. Использование стилей

Для вывода на печать будет использован черный шрифт с белым фоном. Этим мы сэкономим чернила пользователей.

Совет

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

Есть еще один способ применения к элементу стиля: встроить CSS-код непосредственно в элемент разметки в виде значения атрибута style. Такой атрибут доступен для всех элементов HTML. В нем в формате CSS через точку с запятой прописываются значения разных свойств элемента. Вот как это выглядит для элемента P:

<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">

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

Листинг 1.7. Использование атрибута style

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

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Использование стилей</title>

</head>

<body>

<p style="color:#CC0000; background:#9999CC; word-spacing:20px;">

Текст с атрибутом style="color:#CC0000; background:#9999CC; word-spacing:20px;"

</p>

<p style="color:#66FFFF; background:#990000; word-spacing:10px;">

Текст с атрибутом style="color:#66FFFF; background:#990000; word-spacing:10px;"

</p>

<table border="1" >

<tr>

<td style="color:#66FFFF; background:#990000; word-spacing:10px;">

Описание ячейки таблицы с атрибутом style="color:#66FFFF; background: #990000; word-spacing:10px;"

</td>

</tr>

</table>

</body>

</html>

Здесь применены такие же стили, как и в предыдущем примере, но параметры заданы с помощью атрибута style.

На рис. 1.4 показан результат обработки кода из листинга 1.7.

Рис. 1.4. Установка стилей с помощью атрибута style

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

Еще один способ задать стили для документа – записать их в отдельный файл с разрешением CSS. Синтаксис записи в этот файл такой же, как и при использовании элемента STYLE, однако этот способ более универсален.

Подключить файл со стилями к документу можно двумя способами. Первый представлен в листинге 1.8 и использует элемент STYLE. Внутри этого элемента нужно записать такую строку: @import URL("nyTb к файлу с таблицами");.

Листинг 1.8. Импорт файлов с таблицами стилей

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

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

<html>

<head>

<style>

@import URL("test.css");

</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Использование стилей</title>

</head>

</html>

При такой настройке к элементам нашего документа можно будет применять стили, описанные в файле test.css.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

Binkley-style мейлеры.

Из книги 64 килобайта о Фидо автора Filimonov Nick

Binkley-style мейлеры. Для мейлера типа BinkleyTerm одним из основных отличий от ArcMail-Attach является тот факт, что такой мейлер никоим образом не работает с письмами. Таким образом, вместо NetMail-фолдера в Binkley-style мейлерах используется понятие аутбаунда (outbound). Для каждой из зон, в которые


style="text-transform: uppercase;">ПИСЬМОНОСЕЦ

Из книги Журнал «Компьютерра» № 6 от 14 февраля 2006 года автора Журнал «Компьютерра»

style="text-transform: uppercase;">ПИСЬМОНОСЕЦ Автор: Илья Щуров VoyagerЗдравствуй, уважаемая Терра!Являюсь вашим читателем уже два года. Читаю журнал не всегда, но практически от корки до корки, особенно меня интересует OpenSource/Freeware software и Linux. Я линуксоид, и поэтому сторонник лицензионного


Элемент

Из книги Windows Script Host для Windows 2000/XP автора Попов Андрей Владимирович

Элемент <?job?> Элемент <?job?> задает режим отладки при выполнении WS-файла. Если значение атрибута debug равно true, то задание может быть выполнено во внешнем отладчике (см. приложение 3). Если же значение атрибута debug равно false, то отладчик для этого задания применен быть не


Элемент

Из книги Справочник по JavaScript автора Коллектив авторов

Элемент <example> Внутри элемента <example> приводится текст из одной или нескольких строк, в котором можно описать примеры запуска сценария. Если сценарий был запущен с ключом /? в командной строке или в сценарии встретился вызов метода ShowUsage объекта WshArguments, то этот текст


Объект style

Из книги XSLT автора Хольцнер Стивен

Объект style Как и все остальные объекты, style поддерживает ряд свойств и методов. Их можно разделить на две группы:иСвойства первой группы в целом аналогичны соответствующим атрибутам стиля и имеют почти такие же имена за тем исключением, что символы "-" убираются, т.к. не


Работа с объектом style

Из книги Технология XSLT автора Валиков Алексей Николаевич

Работа с объектом style Объект style позволяет изменить стиль любого элемента Web-страницы, просто присвоив нужному свойству необходимое значение.paragraph1.style.fontSize = 7;Можно изменить геометрические размеры элемента:image1.style.height = "100mm";image1.style.width = "120mm";и его месторасположение:iamge1.style.top


Объект style в Internet Explorer

Из книги Цифровой журнал «Компьютерра» № 195 автора Журнал «Компьютерра»

Объект style в Internet Explorer Как же получить доступ к объекту style? Internet Explorer предоставляет для этого три свойства: style, currentStyle и runtimeStyle.Первое свойство позволяет получить доступ к стилю, встроенному в тег элемента с помощью атрибута STYLE:<P id="par1" style="color: green">Любой текст</P>someColor =


Объект style в Navigator. JavaScript-стили

Из книги Цифровая фотография. Трюки и эффекты автора Гурский Юрий Анатольевич

Объект style в Navigator. JavaScript-стили Navigator поддерживает прямое обращение по идентификаторам только для объектов layer и не поддерживает коллекцию all. Да и поддержка атрибута ID в нем реализована так себе, в основном, для присвоения элементам стилей. Но объект document Navigator


Элемент

Из книги автора

Элемент <xsl:if> При помощи элемента <xsl:if> осуществляются проверки условия и принимаются действия на основе результата проверки. Он во многом похож на оператор if в языках программирования. У элемента <xsl:if> один атрибут:• test (обязательный). Устанавливается в


Элемент

Из книги автора

Элемент <xsl:for-each> Элемент <xsl:for-each> позволяет применять тело шаблона в цикле снова и снова для всех элементов набора узлов. С технической точки зрения, он работает с набором узлов, который возвращает выражение XPath и выполняет одно и то же действие с каждым узлом в


Элемент xsl:if

Из книги автора

Элемент xsl:if Синтаксис элемента следующий:<xsl:if test="выражение"> <!-- Содержимое: шаблон --></xsl:if>Элемент xsl:if является простейшим условным оператором в XSLT. Выражение, содержащееся в обязательном атрибуте test, вычисляется и приводится к булевому типу. В том и только том


Минкомсвязь, или Бессмысленный полёт мотылька в опасной близости от лампы о сокращении, или упрощении, или даже полной отмене чего-либо. Новостей много, но нет ничего, что было бы похоже на работу вообще и на построение информационного общества в частности — н

Из книги автора

Минкомсвязь, или Бессмысленный полёт мотылька в опасной близости от лампы о сокращении, или упрощении, или даже полной отмене <span style="white-space:nowrap">чего-либо</span>. Новостей много, но нет ничего, что было бы похоже на работу вообще и на построение


11.3. Layer Style (Стиль слоя)

Из книги автора

11.3. Layer Style (Стиль слоя) Слоевые стили – это эффекты, которые применяются к одному или нескольким слоям, кроме Background (Фон). Они влияют на весь слой, независимо от выделенных областей. Все данные стили находятся в меню Layer ? Layer Style (Слой ? Стиль слоя), а на палитре Styles (Стили)