Медіа типи
Русский перевод: Медиа типы
Стилі можуть відноситися до різних типів медіа. Наприклад, можна створити окремий стиль для сторінки, яка буде переглядатися в браузері, та інший стиль для друку сторінки. Ви можете визначати тип медіа в теге <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 – для показу на екрані ТБ
Приклад коду з різними медіа
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<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>
Атрибути <link>
| Атрибут | Опис |
|---|---|
| href | Вказує на місцезнаходження зовнішньої таблиці стилів |
| rel | Повинно бути "stylesheet" для посилання на таблицю стилів |
| type | Повинно бути "text/css" для посилання на таблицю стилів |
Вбудовані стилі
Ми створюємо вбудовані стилі, додаючи тегам атрибут style. Зразок:
<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>