Учебник по HTML и CSS |
|
Теги HTML Теги по типам
| Тег STYLE
ОписаниеТег <STYLE> применяется для определения стилей элементов веб-страницы. Тег <STYLE> необходимо использовать внутри контейнера <HEAD>. Можно задавать более чем один тег <STYLE>. Синтаксис <head> Параметры
Закрывающий тегОбязателен. Пример 1. Использование тега <STYLE> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег STYLE</title> <style type="text/css"> H1 { font-size: 120%; font-family: Verdana, Arial, Helvetica, sans-serif; color: #333366 } </style> </head> <body> <H1>Hello, world!</H1> </body> </html> Результат примера показан на рис. 1. Обратие внимание, что цвет текста и начертание шрифта в теге <H1> изменились. Рис. 1. Вид заголовка после применения стилей Описание параметров тега <STYLE>Параметр MEDIA
ОписаниеУстанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид веб-страницы. Синтаксис<style media="all | screen | print | projection | braille | speech">...</style> Аргументы
Можно устанавливать сразу несколько значений, перечисляя их через запятую. Значение по умолчаниюscreen Пример 2. Стили для разных устройств вывода <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег STYLE, параметр media</title> <style type="text/css" media="screen"> .window { background: #333; border: 1px solid red; font-size: 90%; color: #fc0; padding: 10px } </style> <style type="text/css" media="print"> .window { border: 1px solid black; font-family: Arial; font-size: 90%; font-weight: bold; color: black; padding: 10px } </style> </head> <body> <div class="window"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> </body> </html> Результат данного примера продемонстрирован на рис. 2, где применяется стиль с параметром media="screen". На рис. 3 показана та же страница, но при этом уже действует стиль для печати, заданный параметром media="print". Результат эмулирован, поскольку стиль будет действовать только при отправке веб-страницы на печать. Рис. 2. Страница со стилем для просмотра на мониторе Рис. 3. Страница со стилем для вывода на печать Параметр TYPE
ОписаниеСообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера <STYLE>. Синтаксис<style type="text/css">...</style> АргументыВ качестве значения используется MIME-тип — text/css. Значение по умолчаниюtext/css Пример 3. Использование параметра type <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Тег STYLE, параметр type</title> <style type="text/css"> a:link { color: #003366; } a:visited { color: #660066; } a:hover { color: #800000; } a:active { color: #FF0000; } </style> </head> <body> <p><a href="link1.php">Lorem ipsum dolor sit amet</a></p> </body> </html> |
При использовании материалов сайта ссылка на comnew.ru обязательна! |