Медіа типи

Русский перевод: Медиа типы

Стилі можуть відноситися до різних типів медіа. Наприклад, можна створити окремий стиль для сторінки, яка буде проглядатися в браузері, та інший стиль для друку сторінки. Ви можете визначати тип медіа в теге <link> для зовнішньої таблиці стилів і всередині тега <style> для впроваджуваних таблиць стилів.

<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen">
<style type="text/css" media="all">
/* rules */
</style>

Коли тип медіа невизначений, стилі відносяться до всіх медіа. Медіа типи можуть приймати наступні значення:

  • all – стилі для всіх типів медіа
  • aural – для синтезаторів мови
  • braille – для пристроїв читання символів Брайля
  • embossed – для пристроїв друку символів Брайля
  • handheld – для портативних пристроїв
  • print – для друку на принтері
  • projection – для демонстрації за допомогою проекторів
  • screen -для показу на екрані монітора
  • tty – для показу на терміналах і телетайпах
  • tv – для показу на екрані ТБ

Код нижче демонструє як застосувати CSS для дизайну різних медіа:

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Media</title>
<style type="text/css" media="screen">
.warning {color:#ff0000}
h1.warning {text-decoration:underline}
p.warning {font-weight:bold}
.printDisplay {display:none}
</style>
<style type="text/css" media="print">
.warning {color:#660000;}
h1.warning {text-decoration:underline; font-size:1in;}
p.warning {font-weight:bold; font-size:.5in;}
.screenDisplay {display:none}
</style>
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
<p class="printDisplay">This is the print version.</p>
<p class="screenDisplay">This is the screen version.</p>
</body>
</html>

Зазначений вище CSS-файл може бути прикріплений до будь-якої кількості HTML-сторінок. Тег <link>, розташований в секції head кожної веб-сторінки, може використовуватися для прикріплення зовнішньої каскадної таблиці стилів до будь-якій сторінці вашого сайту.

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>External Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 class="warning">WARNING</h1>
<p class="warning">Don't go there!</p>
</body>
</html>
Атрибути <link>

Атрибути Опис
href вказує на місцезнаходження зовнішньої каскадної таблиці стилів
rel атрибут повинен встановлювати значення “stylesheet” для посилання на таблицю стилів
type повинно бути встановлено “text/css” для посилання на таблицю стилів

Кількість зовнішніх каскадних таблиць стилів, які може використовувати сторінка HTML, необмежена. Більше, того, ми можемо об’єднувати зовнішні таблиці стилів, використовуючи техніку впровадження стильових таблиць.

Вбудовані стилі

Ми створюємо вбудовані стилі, додаючи тегам атрибути стилю. Так само як і у випадку з класом чи атрибутами ідентифікатора (id), більшість елементів можуть мати стильові атрибути. Значення атрибуту стилю розділяються крапкою з комою. Зразок коду нижче демонструє, як застосовується вбудований стиль:

Приклад коду

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inline Styles</title>
</head>
<body>
<p style="color:blue; font-weight:bold; font-size:12pt">Common Greetings</p>
<ul style="margin-top:-20px; font-size:10pt">
<li style="list-style-type:square">Hello</li>
<li style="list-style-type:circle">Hi</li>
<li style="list-style-type:disc">Howdy</li>
</ul>