чайников в магазине фирменной техники Smeg
smgrussia.ru
Браузер | ![]() |
![]() |
![]() |
![]() |
![]() |
|||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Версия | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Тег <STYLE> применяется для определения стилей элементов web-страницы. Тег <STYLE> необходимо использовать внутри контейнера <HEAD>. Можно задавать более чем один тег <STYLE>.
<head> <style type="text/CSS (ЦСС)"> ... </style> </head>
Обязателен.
Пример 1. Использование тега <STYLE>
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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. Вид заголовка после применения стилей
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Устанавливает устройство вывода, для которого предназначена таблица стилей. Для каждого устройства — от карманного компьютера до принтера можно определить свою собственный стиль, который бы учитывал специфику устройства и подгонял под него вид web-страницы.
<style media="all | screen | print | projection | braille | speech">...</style>
Можно устанавливать сразу несколько значений, перечисляя их через запятую.
screen
Пример 2. Стили для разных устройств вывода
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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". Результат эмулирован, поскольку стиль будет действовать только при отправке web-страницы на печать.
Рис. 2. Страница со стилем для просмотра на мониторе
Рис. 3. Страница со стилем для вывода на печать
ШТМЛ: | 3.2 | 4 | XШТМЛ: | 1.0 | 1.1 |
Сообщает браузеру, какой синтаксис использовать, чтобы правильно интерпретировать таблицу стилей. Как правило, браузеры корректно работают со стилями и при отсутствии этого параметра, он необходим для некоторых старых браузеров, которые могут не распознать содержимое контейнера <STYLE>.
<style type="text/CSS (ЦСС)">...</style>
В качестве значения используется MIME-тип — text/CSS (ЦСС).
text/CSS (ЦСС)
Пример 3. Использование параметра type
ШТМЛ 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/HTML4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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="lorem.ШТМЛ">Lorem ipsum dolor sit amet</a></p>
</body>
</html>
Copyright © 2009-2022 | По всем вопросам: donmobi@mail.ru
О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект